Skip to content
A HSV(HSB)/HSL color picker inspired by chrome devtools and a material color picker for your flutter app.
Branch: master
Clone or download
Latest commit d9c2012 May 28, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example [#10] fix overflow slider May 28, 2019
lib [#10] fix overflow slider May 28, 2019
.gitignore initial commit Feb 22, 2018
CHANGELOG.md bump version May 28, 2019
LICENSE initial commit Feb 22, 2018
README.md update images May 19, 2019
flutter_colorpicker.iml it works Feb 22, 2018
pubspec.yaml bump version May 28, 2019

README.md

flutter_colorpicker

pub package donate

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

Getting Started

Installation

Add this to your pubspec.yaml (or create it):

dependencies:
  flutter_colorpicker: any

Then run the flutter tooling:

flutter packages get

Or upgrade the packages with:

flutter packages upgrade

Example

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

preview

Details in example/ folder.

You can’t perform that action at this time.