flutter_colorpicker

A HSV(HSB)/HSL color picker inspired by chrome devtools and a material color picker for your flutter app.

Getting Started

Use it in [showDialog] widget:

// create some values
Color pickerColor = Color(0xff443a49);
Color currentColor = Color(0xff443a49);

// ValueChanged<Color> callback
void 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,
        showLabel: true,
        pickerAreaHeightPercent: 0.8,
      ),
      // Use Material color picker:
      //
      // child: MaterialPicker(
      //   pickerColor: pickerColor,
      //   onColorChanged: changeColor,
      //   showLabel: true, // only on portrait mode
      // ),
      //
      // Use Block color picker:
      //
      // child: BlockPicker(
      //   pickerColor: currentColor,
      //   onColorChanged: changeColor,
      // ),
      //
      // child: MultipleChoiceBlockPicker(
      //   pickerColors: currentColors,
      //   onColorsChanged: changeColors,
      // ),
    ),
    actions: <Widget>[
      FlatButton(
        child: const Text('Got it'),
        onPressed: () {
          setState(() => currentColor = pickerColor);
          Navigator.of(context).pop();
        },
      ),
    ],
  ),
)

36585408-bb4e96a4-18b8-11e8-8c20-d4dc200e1a7c

74600957-5efa3980-50d3-11ea-9458-55842927e565

46619114-de790f80-cb53-11e8-81c8-278d4dc51606

57980467-c577fb80-7a5e-11e9-85ee-033963b48162

46619111-dd47e280-cb53-11e8-9701-38900857321f

50912123-56fdae00-146c-11e9-8d63-be3a26a20b72

46619116-df11a600-cb53-11e8-8b6b-4e495f8dbea9

57980469-c6109200-7a5e-11e9-8c32-5f4ba74c88da

46619112-dde07900-cb53-11e8-91d9-a4d1ee70cf3b

57980462-b8f3a300-7a5e-11e9-95e4-1748b14793ae

GitHub

https://github.com/mchome/flutter_colorpicker