Flutter颜色选择器插件material_color_picker_wns的使用

Flutter颜色选择器插件material_color_picker_wns的使用

Material Color picker是一个Flutter小部件，可以进行自定义。

默认情况下，它使用Material颜色，但你可以定义自己的颜色。

你还可以使用CircleColor小部件在你的应用程序中显示颜色。 例如，你可以在对话框中设置颜色选择器，并在设置中显示所选的颜色。

如何使用它

这些示例使用静态颜色作为’selectedColor’，但你可以使用变量（状态）。

添加到你的Flutter项目

你只需要在pubspec.yaml文件中添加material_color_picker_wns作为依赖项。

material_color_picker_wns: ^1.0.8

导入

import 'package:material_color_picker_wns/material_color_picker_wns.dart';

基本用法

MaterialColorPicker(
    onColorChange: (Color color) {
        // 处理颜色变化
    },
    selectedColor: Colors.red
)

监听主颜色变化

MaterialColorPicker(
    onColorChange: (Color color) {
        // 处理颜色变化
    },
    onMainColorChange: (ColorSwatch color) {
        // 处理主颜色变化
    },
    selectedColor: Colors.red
)

禁用阴影

MaterialColorPicker(
    allowShades: false, // 默认为true
    onMainColorChange: (ColorSwatch color) {
        // 处理主颜色变化
    },
    selectedColor: Colors.red
)

如果将allowShades设置为false，则只显示并允许选择主颜色。onColorChange将不会被调用，改用onMainColorChange。

自定义颜色

在这个示例中，自定义颜色是一组Material颜色（扩展了ColorSwatch的类）。但你可以创建自己的ColorSwatch列表。

MaterialColorPicker(
    onColorChange: (Color color) {
        // 处理颜色变化
    },
    selectedColor: Colors.red,
    colors: [
        Colors.red,
        Colors.deepOrange,
        Colors.yellow,
        Colors.lightGreen
    ],
)

截图

颜色选择

有两个步骤，首先选择主颜色，然后按它时，你需要选择主颜色的一个阴影。 默认情况下，它是所有的Material颜色，但你可以定义自定义颜色，一个ColorSwatch列表。

使用示例

你可以在对话框中插入颜色选择器。

显示颜色

你可以使用CircleColor小部件，在设置中显示所选颜色。

完整示例代码

import 'package:flutter/material.dart';
import 'package:material_color_picker_wns/material_color_picker_wns.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Material Color Picker",
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  // 使用临时变量仅在按下对话框的提交按钮时更新颜色
  ColorSwatch? _tempMainColor;
  Color? _tempShadeColor;
  ColorSwatch? _mainColor = Colors.blue;
  Color? _shadeColor = Colors.blue[800];

  void _openDialog(String title, Widget content) {
    showDialog(
      context: context,
      builder: (_) {
        return AlertDialog(
          contentPadding: const EdgeInsets.all(6.0),
          title: Text(title),
          content: content,
          actions: [
            TextButton(
              child: Text('取消'),
              onPressed: Navigator.of(context).pop,
            ),
            TextButton(
              child: Text('确定'),
              onPressed: () {
                Navigator.of(context).pop();
                setState(() => _mainColor = _tempMainColor);
                setState(() => _shadeColor = _tempShadeColor);
              },
            ),
          ],
        );
      },
    );
  }

  void _openColorPicker() async {
    _openDialog(
      "颜色选择器",
      MaterialColorPicker(
        selectedColor: _shadeColor,
        onColorChange: (color) => setState(() => _tempShadeColor = color),
        onMainColorChange: (color) => setState(() => _tempMainColor = color),
        onBack: () => print("后退按钮已按下"),
      ),
    );
  }

  void _openMainColorPicker() async {
    _openDialog(
      "主颜色选择器",
      MaterialColorPicker(
        selectedColor: _mainColor,
        allowShades: false,
        onMainColorChange: (color) => setState(() => _tempMainColor = color),
      ),
    );
  }

  void _openAccentColorPicker() async {
    _openDialog(
      "强调颜色选择器",
      MaterialColorPicker(
        colors: accentColors,
        selectedColor: _mainColor,
        onMainColorChange: (color) => setState(() => _tempMainColor = color),
        circleSize: 40.0,
        spacing: 10,
      ),
    );
  }

  void _openFullMaterialColorPicker() async {
    _openDialog(
      "完整的Material颜色选择器",
      MaterialColorPicker(
        colors: fullMaterialColors,
        selectedColor: _mainColor,
        onMainColorChange: (color) => setState(() => _tempMainColor = color),
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            "Material颜色选择器",
            style: Theme.of(context).textTheme.headline5,
          ),
          const SizedBox(height: 62.0),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CircleAvatar(
                backgroundColor: _mainColor,
                radius: 35.0,
                child: const Text("MAIN"),
              ),
              const SizedBox(width: 16.0),
              CircleAvatar(
                backgroundColor: _shadeColor,
                radius: 35.0,
                child: const Text("SHADE"),
              ),
            ],
          ),
          const SizedBox(height: 32.0),
          OutlinedButton(
            onPressed: _openColorPicker,
            child: const Text('显示颜色选择器'),
          ),
          const SizedBox(height: 16.0),
          OutlinedButton(
            onPressed: _openMainColorPicker,
            child: const Text('显示主颜色选择器'),
          ),
          const Text('(仅主颜色)'),
          const SizedBox(height: 16.0),
          OutlinedButton(
            onPressed: _openAccentColorPicker,
            child: const Text('显示强调颜色选择器'),
          ),
          const SizedBox(height: 16.0),
          OutlinedButton(
            onPressed: _openFullMaterialColorPicker,
            child: const Text('显示完整的Material颜色选择器'),
          ),
        ],
      ),
    );
  }
}