https://mchome.github.io/flutter_colorpicker/

HSV(HSB)/HSL/RGB/Material color picker inspired by all the good design for your amazing flutter apps.
https://mchome.github.io/flutter_colorpicker/

block color-picker flutter flutter-package grid hsb hsl hsv material rgb

Last synced: about 1 month ago
JSON representation

HSV(HSB)/HSL/RGB/Material color picker inspired by all the good design for your amazing flutter apps.

• Host: GitHub
• URL: https://mchome.github.io/flutter_colorpicker/
• Owner: mchome
• License: mit
• Created: 2018-02-23T05:47:06.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2024-05-19T07:48:50.000Z (7 months ago)
• Last Synced: 2024-05-19T08:38:45.741Z (7 months ago)
• Topics: block, color-picker, flutter, flutter-package, grid, hsb, hsl, hsv, material, rgb
• Language: Dart
• Homepage: https://pub.dev/packages/flutter_colorpicker
• Size: 2.1 MB
• Stars: 328
• Watchers: 7
• Forks: 195
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-flutter - Web Example

README

        
# flutter_colorpicker

[![pub package](https://img.shields.io/pub/v/flutter_colorpicker?include_prereleases.svg "Flutter Color Picker")](https://pub.dev/packages/flutter_colorpicker)

[![badge](https://img.shields.io/badge/%20built%20with-%20%E2%9D%A4-ff69b4.svg "build with love")](https://github.com/mchome/flutter_colorpicker)

HSV(HSB)/HSL/RGB/Material color picker inspired by all the good design for your amazing flutter apps.  

Adorable color pickers out of the box with highly customized widgets to all developers' needs.

[Web Example](https://mchome.github.io/flutter_colorpicker)

## Getting Started

Use it in [showDialog] widget:

```dart

// create some values

Color pickerColor = Color(0xff443a49);

Color currentColor = Color(0xff443a49);

// ValueChanged 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,

      ),

      // 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: [

      ElevatedButton(

        child: const Text('Got it'),

        onPressed: () {

          setState(() => currentColor = pickerColor);

          Navigator.of(context).pop();

        },

      ),

    ],

  ),

)

```

![preview](https://user-images.githubusercontent.com/7392658/36585408-bb4e96a4-18b8-11e8-8c20-d4dc200e1a7c.gif)

![SlidePicker](https://user-images.githubusercontent.com/7392658/74600957-5efa3980-50d3-11ea-9458-55842927e565.png)



Details in [example](https://github.com/mchome/flutter_colorpicker/tree/master/example) folder.