flutter_colorpicker

受 Chrome DevTools 启发而设计的 HSV 颜色选择器,以及适用于您的 Flutter 应用的 Material 颜色选择器。

入门

安装

将此添加到您的 pubspec.yaml 文件中(或创建它)

dependencies:
  flutter_colorpicker: any

然后运行 flutter 工具

flutter packages get

或使用以下命令升级软件包

flutter packages upgrade

示例

在 [showDialog] 小部件中使用它

// create some value
Color pickerColor = Color(0xff443a49);
Color currentColor = Color(0xff443a49);
ValueChanged<Color> onColorChanged;

// bind some values with [ValueChanged<Color>] callback
changeColor(Color color) {
  setState(() => pickerColor = color);
}

// raise the [showDialog] widget
showDialog(
  context: context,
  child: AlertDialog(
    title: const Text('Pick a color!'),
    content: SingleChildScrollView(
      child: ColorPicker(
        pickerColor: pickerColor,
        onColorChanged: changeColor,
        enableLabel: true,
        pickerAreaHeightPercent: 0.8,
      ),
      // Use Material color picker
      // child: MaterialPicker(
      //   pickerColor: pickerColor,
      //   onColorChanged: changeColor,
      //   enableLabel: true, // only on portrait mode
      // ),
    ),
    actions: <Widget>[
      FlatButton(
        child: Text('Got it'),
        onPressed: () {
          setState(() => currentColor = pickerColor);
          Navigator.of(context).pop();
        },
      ),
    ],
  ),
)

preview

01
02
03
04

GitHub

https://github.com/mchome/flutter_colorpicker