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();
},
),
],
),
)
![](https://user-images.githubusercontent.com/7392658/46619114-de790f80-cb53-11e8-81c8-278d4dc51606.png)
![](https://user-images.githubusercontent.com/7392658/57980467-c577fb80-7a5e-11e9-85ee-033963b48162.png)
![](https://user-images.githubusercontent.com/7392658/46619111-dd47e280-cb53-11e8-9701-38900857321f.png)
![](https://user-images.githubusercontent.com/7392658/50912123-56fdae00-146c-11e9-8d63-be3a26a20b72.png)
![](https://user-images.githubusercontent.com/7392658/46619116-df11a600-cb53-11e8-8b6b-4e495f8dbea9.png)
![](https://user-images.githubusercontent.com/7392658/57980469-c6109200-7a5e-11e9-8c32-5f4ba74c88da.png)
![](https://user-images.githubusercontent.com/7392658/46619112-dde07900-cb53-11e8-91d9-a4d1ee70cf3b.png)
![](https://user-images.githubusercontent.com/7392658/57980462-b8f3a300-7a5e-11e9-95e4-1748b14793ae.png)
Details in example/ folder.