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

Last update: Aug 2, 2022

flutter_colorpicker

pub package badge

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

Getting Started

Use it in [showDialog] widget:

// 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: <Widget>[
      ElevatedButton(
        child: const Text('Got it'),
        onPressed: () {
          setState(() => currentColor = pickerColor);
          Navigator.of(context).pop();
        },
      ),
    ],
  ),
)

preview SlidePicker

Details in example folder.

GitHub

https://github.com/mchome/flutter_colorpicker
Comments
  • 1. The argument type 'PointerEvent' can't be assigned to the parameter type 'PointerDownEvent' Linux

    When using the color picker on Linux I get following build error:

    Launching lib/main.dart on Linux debug mode...
    Building Linux application...
    Error: ../../.pub-cache/hosted/pub.dartlang.org/flutter_colorpicker-0.4.0/lib/src/hsv_picker.dart:731:29: Error: The argument type 'PointerEvent' can't be assigned to the parameter type 'PointerDownEvent'.
    Error:  - 'PointerEvent' is from 'package:flutter/src/gestures/events.dart' ('../../flutter/package/lib/src/gestures/events.dart').
    Error:  - 'PointerDownEvent' is from 'package:flutter/src/gestures/events.dart' ('../../flutter/package/flutter/lib/src/gestures/events.dart').
    Error:     super.addAllowedPointer(event);
    Error:                             ^
    Exception: Build process failed
    
    Reviewed by wim07101993 at 2021-05-24 19:23
  • 2. hexInputController causes setState() called after dispose() exception

    The code that throws this exception. This exception is thrown when I close the Dialog and open it again, and is not thrown once I remove the controller.

    class ColorPickerTextField extends StatefulWidget {
      const ColorPickerTextField(
          {Key? key, required this.color, this.onColorChanged})
          : super(key: key);
      final Color color;
      final void Function(String)? onColorChanged;
    
      @override
      _ColorPickerTextFieldState createState() => _ColorPickerTextFieldState();
    }
    
    class _ColorPickerTextFieldState extends State<ColorPickerTextField> {
      late Color _color;
      final _controller = TextEditingController();
    
      @override
      void initState() {
        super.initState();
        _color = widget.color;
        _controller.text = _color.value.toRadixString(16).toUpperCase();
      }
    
      @override
      void dispose() {
        _controller.dispose();
        super.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        return TextFormField(
            fillColor: _color,
            hoverColor: _color,
            readOnly: true,
            textColor:
                (_color.red * 0.299 + _color.green * 0.587 + _color.blue * 0.114) >
                        186
                    ? ColorProvider.kDarkBlue
                    : Colors.white,
            controller: _controller,
            onTap: () => showDialog(
                  context: context,
                  builder: (_) => AlertDialog(
                    title: Text(
                      'Pick a color!',
                    ),
                    content: SingleChildScrollView(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.end,
                        children: [
                          ColorPicker(
                            displayThumbColor: true,
                            hexInputController: _controller,
                            pickerColor: _color,
                            onColorChanged: (color) {
                              setState(() {
                                _color = color;
                              });
                            },
                            showLabel: true,
                            pickerAreaHeightPercent: 0.8,
                          ),
                          Container(
                            width: 300,
                            padding: const EdgeInsets.all(16),
                            child: TextFormField(
                              controller: _controller,
                              autofocus: true,
                              ),
                              maxLength: 8,
                              inputFormatters: [
                                UpperCaseTextFormatter(),
                                FilteringTextInputFormatter.allow(
                                  RegExp(kValidHexPattern),
                                ),
                              ],
                            ),
                          )
                        ],
                      ),
                    ),
                    actions: <Widget>[
                      CustomOrangeTextButton(
                        onTap: () => Navigator.of(context).pop(),
                        text: 'Done',
                      ),
                    ],
                  ),
                ));
      }
    }
    
    class UpperCaseTextFormatter extends TextInputFormatter {
      @override
      TextEditingValue formatEditUpdate(oldValue, TextEditingValue newValue) =>
          TextEditingValue(
              text: newValue.text.toUpperCase(), selection: newValue.selection);
    }
    
    Reviewed by glaceon2000 at 2021-11-03 03:35
  • 3. Error after installing v0.5.0

    `../../flutter/.pub-cache/hosted/pub.dartlang.org/flutter_colorpicker-0.5.0/lib/src/hsv_picker.dart:730:43: Error: The parameter 'event' of the method 'AlwaysWinPanGestureRecognizer.addAllowedPointer' has type 'PointerDownEvent', which does not match the corresponding type, 'PointerEvent', in the overridden method, 'DragGestureRecognizer.addAllowedPointer'.

    • 'PointerDownEvent' is from 'package:flutter/src/gestures/events.dart' ('../../flutter/packages/flutter/lib/src/gestures/events.dart').
    • 'PointerEvent' is from 'package:flutter/src/gestures/events.dart' ('../../flutter/packages/flutter/lib/src/gestures/events.dart'). Change to a supertype of 'PointerEvent', or, for a covariant parameter, a subtype. void addAllowedPointer(PointerDownEvent event) { ^

    ../../flutter/packages/flutter/lib/src/gestures/monodrag.dart:256:8: Context: This is the overridden method ('addAllowedPointer'). void addAllowedPointer(PointerEvent event) { ^ 2

    FAILURE: Build failed with an exception.

    • Where: Script '/Users/sam/Documents/flutter/packages/flutter_tools/gradle/flutter.gradle' line: 1035

    • What went wrong: Execution failed for task ':app:compileFlutterBuildDebug'.

    Process 'command '/Users/sam/Documents/flutter/bin/flutter'' finished with non-zero exit value 1

    • Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

    • Get more help at https://help.gradle.org

    BUILD FAILED in 16s `

    Reviewed by samiraj99 at 2021-06-15 15:53
  • 4. How to work around using the colorpicker inside an alertdialog on a small phone (e.g. nexus5)

    03-10 15:24:00.632  1140  1178 I flutter : ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
    03-10 15:24:00.641  1140  1178 I flutter : The following message was thrown during layout:
    03-10 15:24:00.641  1140  1178 I flutter : A RenderFlex overflowed by 43 pixels on the right.
    03-10 15:24:00.671  1140  1178 I flutter : The overflowing RenderFlex has an orientation of Axis.horizontal.
    03-10 15:24:00.671  1140  1178 I flutter : The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
    03-10 15:24:00.671  1140  1178 I flutter : black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
    03-10 15:24:00.671  1140  1178 I flutter : Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
    03-10 15:24:00.671  1140  1178 I flutter : RenderFlex to fit within the available space instead of being sized to their natural size.
    03-10 15:24:00.671  1140  1178 I flutter : This is considered an error condition because it indicates that there is content that cannot be
    03-10 15:24:00.671  1140  1178 I flutter : seen. If the content is legitimately bigger than the available space, consider clipping it with a
    03-10 15:24:00.671  1140  1178 I flutter : ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
    03-10 15:24:00.671  1140  1178 I flutter : like a ListView.
    03-10 15:24:00.671  1140  1178 I flutter : The specific RenderFlex in question is:
    03-10 15:24:00.671  1140  1178 I flutter :   RenderFlex#0d25a relayoutBoundary=up1 OVERFLOWING
    03-10 15:24:00.671  1140  1178 I flutter :   creator: Row ← Column ← ConstrainedBox ← Container ← ColorPicker ← _SingleChildViewport ←
    03-10 15:24:00.671  1140  1178 I flutter :   _ScrollableScope ← IgnorePointer-[GlobalKey#66b26] ← Semantics ← Listener ← _GestureSemantics ←
    03-10 15:24:00.671  1140  1178 I flutter :   RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#cd00a] ← ⋯
    03-10 15:24:00.671  1140  1178 I flutter :   parentData: offset=Offset(0.0, 271.0); flex=null; fit=null (can use size)
    03-10 15:24:00.671  1140  1178 I flutter :   constraints: BoxConstraints(0.0<=w<=232.0, 0.0<=h<=Infinity)
    03-10 15:24:00.671  1140  1178 I flutter :   size: Size(232.0, 78.0)
    03-10 15:24:00.671  1140  1178 I flutter :   direction: horizontal
    03-10 15:24:00.671  1140  1178 I flutter :   mainAxisAlignment: center
    03-10 15:24:00.671  1140  1178 I flutter :   mainAxisSize: max
    03-10 15:24:00.671  1140  1178 I flutter :   crossAxisAlignment: center
    03-10 15:24:00.671  1140  1178 I flutter :   textDirection: ltr
    03-10 15:24:00.672  1140  1178 I flutter :   verticalDirection: down
    03-10 15:24:00.672  1140  1178 I flutter : ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
    03-10 15:24:00.672  1140  1178 I flutter : ════════════════════════════════════════════════════════════════════════════════════════════════════
    
    Reviewed by gizmomogwai at 2018-03-10 14:25
  • 5. Landscape version?

    Would love an alternate layout that works in landscape format. Perhaps with the color square in the left and the sliders on the right. For reference see the date_picker.dart showDatePicker() dialog that displays differently depending on orientation.

    Reviewed by codegrue at 2018-08-20 03:24
  • 6. Null safety support

    I'm going to submit a PR for the null safety support.

    It is a common practice to keep such a code in a separate branch, i.e. null-safety, to be able to support the main release in legacy mode whilst the null safety compatible release could be released from its branch.

    Please, prepare the branch for null safety support PR.

    Reviewed by lig at 2020-12-03 23:41
  • 7. iPhone 5s Landscape Material Dialog too large

    If you run iPhone 5s in Landscape and pop the Material Dialog from your example, the height is too large and causes horizontal and vertical scrolling. Since these are just empty strips of color there is no reason that it can't be sized to properly fit without additional horizontal scrolling.

    Reviewed by zurie at 2019-04-02 02:17
  • 8. App can't debug when colorpicker is added to the pubspec.yaml

    I get the following output, followed by the usual "BUILD FAILED"

    ../../../.pub-cache/hosted/pub.dartlang.org/flutter_colorpicker-0.5.0/lib/src/hsv_picker.dart:730:43: Error: The parameter 'event' of the method 'AlwaysWinPanGestureRecognizer.addAllowedPointer' has type 'PointerDownEvent', which does not match the corresponding type, 'PointerEvent', in the overridden method, 'DragGestureRecognizer.addAllowedPointer'.
     - 'PointerDownEvent' is from 'package:flutter/src/gestures/events.dart' ('../../../development/flutter/packages/flutter/lib/src/gestures/events.dart').
     - 'PointerEvent' is from 'package:flutter/src/gestures/events.dart' ('../../../development/flutter/packages/flutter/lib/src/gestures/events.dart').
    Change to a supertype of 'PointerEvent', or, for a covariant parameter, a subtype.
      void addAllowedPointer(PointerDownEvent event) {
                                              ^
    
    ../../../development/flutter/packages/flutter/lib/src/gestures/monodrag.dart:256:8: Context: This is the overridden method ('addAllowedPointer').
      void addAllowedPointer(PointerEvent event) {
    

    I've completely cleaned flutter and downloaded all packages after the error showed up. Didn't work.

    Reviewed by AlbertDavid94 at 2021-09-08 16:13
  • 9. Update color selection also for tap down

    Currently the color is only updated if you touch the ColorPickerArea and then move your finger. With this PR the color will also be updated when you tap on the ColorPickerArea.

    Reviewed by friebetill at 2019-08-01 13:07
  • 10. Overflow on dialog / iPhone

    Just tried the following:

    showDialog(
          context: mainContext,
          builder: (context) {
            return AlertDialog(
              contentPadding: EdgeInsets.zero,
              content: SingleChildScrollView(
                child: picker.ColorPicker(
                  valueState.value,
                  (color) {
                    valueState.value = color;
                  },
                ),
              ),
              actions: <Widget>[
                FlatButton(
                  child: const Text('Got it'),
                  onPressed: () {
                    RemoteManagerWidget.of(mainContext).onChanges(id, valueState.value);
                    Navigator.of(context).pop();
                  },
                ),
              ],
            );
          },
        );
    

    And it got me this: Simulator Screen Shot - iPhone XS - 2019-05-27 at 20 47 53

    Am I doing something wrong ? I'm using v0.2.4 of the package and last flutter stable

    Reviewed by jaumard at 2019-05-27 18:50
  • 11. add didUpdateWidget lifecycle to handle changes to pickerColor

    Changes

    Add didUpdateWidget lifecycle hook to handle updates to pickerColor.

    Issues this PR resolves

    Currently the ColorPicker widget does not update when a new value is passed into pickerColor.

    Example: This example places a TextField above the ColorPicker widget, and updates the pickerColor when the Textfield is set to a new hex color.

    class HexColor extends Color {
      static int _getColorFromHex(String hexColor) {
        hexColor = hexColor.toUpperCase().replaceAll("#", "");
        if (hexColor.length == 6) {
          hexColor = "FF" + hexColor;
        }
        return int.parse(hexColor, radix: 16);
      }
      HexColor(final String hexColor) : super(_getColorFromHex(hexColor));
    }
    
    class ColorDialog extends StatefulWidget {
      ColorDialog({this.color});
      Color color;
      @override
      ColorDialogState createState() => new ColorDialogState();
    }
    
    class ColorDialogState extends State<ColorDialog> {
      Color _color;
      @override
      void initState() {
        _color = widget.color;
        super.initState();
      }
    
      @override
      Widget build(BuildContext context) {
        return AlertDialog(
          title: const Text('Theme Color'),
          content: Container(
            width: double.maxFinite,
            child: ListView(
              shrinkWrap: true,
              children: [
                TextField(
                  onChanged: (String val) {
                    if (val.length == 6) {
                      setState(() {
                        _color = HexColor(val);
                      });
                    }
                  },
                ),
                ColorPicker(
                  pickerColor: _color,
                  onColorChanged: (Color newColor) {
                    _color = newColor;
                  },
                  enableLabel: true,
                  enableAlpha: false,
                  pickerAreaHeightPercent: 0.5,
                ),
              ],
            ),
          ),
          actions: <Widget>[
            FlatButton(
              child: Text('Cancel'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
            FlatButton(
              child: Text('Save'),
              onPressed: () {
                Navigator.of(context).pop(_color);
              },
            ),
          ],
        );
      }
    }
    
    Reviewed by Jordan-Nelson at 2019-02-28 03:17
  • 12. `ColorPickerHueRing` improvements

    Adds a new option to toggle between the always win pan gesture recognizer with a new recognizer that checks if the pointer event is inside the ring.

    And a onEnd callback that is called when the users finishes the pan gesture on the ring.

    I implemented this options for a project I'm working on and since it might be useful to more people decided on upstreaming them, if this changes aren't desired feel free to close the PR.

    Reviewed by JCapucho at 2022-08-04 13:56
  • 13. Fix stroke width scaling in hue ring

    The hue ring despite accepting a different stroke width from 20.0 seems to have some bits hard coded in such a way that different values cause the ui to not render correctly.

    This PR fixes that by first ensuring that the HueRingPainter always renders inbound (see the first commit message for more information about the problem), secondly by changing the hard coded parts to scale with stroke width and finally by also scaling the thumb of the ring.

    | | Old | New | | --------------------------- | ------------- | ------------- | | Normal stroke width 20.0 | old-normal | old-big | | Big stroke width 40.0 | new-normal | new-big |

    Reviewed by JCapucho at 2022-08-04 13:12
  • 14. Implemented option to remove color indicator and to change the width of the pallet type slider

    Now the developers can remove the color indicator by setting displayColorIndicator to false. the default value is true. And also to fill the excess space they can change the width of the PalletType slider. You can change this by setting palletTypeSliderWidth. default value is 225 which comes from default colorPickerWidth - 75.00. This option is only available when the displayColorIndicator is set to false.

    Reviewed by SayuruSandaru at 2022-08-01 03:24
  • 15. Jerky/jittery behavior when not inside an AlertDialog

    When I place any of the color picker widgets inside an AlertDialog, they work great. But, when I put them directly in the widget tree, they don't work well. The behavior of dragging around the color cursor becomes very jittery and will sometimes jump around.

    The issue is that I am updating my state in the onColorChanged callback, which in turn causes the pickerColor to change. Many colors can be represented by a number of different picker states (for example, black could be any hue) so when the pickerColor is changed, the ColorPicker jumps to an arbitrary state that could produce that color.

    How do I prevent this? Why doesn't this behavior occur inside an AlertDialog? Is there a different way I am supposed to handle state? or is this a bug?

    Reviewed by QuinnFreedman at 2022-07-08 06:27
  • 16. ColorPickerHueRing's Slider doesn't work if current color is #FFFFFFFF or #FF000000

    Can we make it that the slider would work regardless of the current chosen color?

    https://user-images.githubusercontent.com/51567674/171574136-a181549a-ba0d-4d9a-9713-5f5e461a2cf3.mov

    Reviewed by glaceon2000 at 2022-06-02 07:13

Related

An elegant, object-oriented implementation of the Material Design color palettes and swatches.
An elegant, object-oriented implementation of the Material Design color palettes and swatches.

Contents Overview Getting Started Palette interface Numeric indexes X Named constructors Swatch interface Swatch in action Gradient interface Demo app

Jan 9, 2022
A conceptual design for on boarding screens for mobile apps.
A conceptual design for on boarding screens for mobile apps.

flutter_onboarding_ui_concept A conceptual design for on boarding screens for mobile apps. This app provides you with all the information you need to

Aug 2, 2022
This project contains various inspired UI kits purely coded in Flutter framework.
This project contains various inspired UI kits purely coded in Flutter framework.

Flutter UI Kits This project contains various inspired UI kits purely coded in Flutter framework. Animated BottomBar (Fancy Bar v1.2.0) Available as a

Aug 10, 2022
A simple calculator UI inspired by Daily UI post by @juliejamolo on Instagram.
A simple calculator UI inspired by Daily UI post by @juliejamolo on Instagram.

Calculator UI A simple calculator UI inspired by Daily UI post by @juliejamolo on Instagram. Just thought why not making it into an app? So, just buil

May 2, 2022
I am trying to teach Responsive Ui design. This video for Web and Mobile. This design is suitable for Desktop, Tab, and Mobile platforms.
I am trying to teach Responsive Ui design. This video for Web and Mobile. This design is suitable for Desktop, Tab, and Mobile platforms.

before clone the GitHub repository please give a star on the repository. I am trying to teach Responsive Ui design. This video for Web and Mobile. Thi

Jul 31, 2022
A Flutter package that provides an Emoji picker widget with 1500+ emojis in 8 categories.
A Flutter package that provides an Emoji picker widget with 1500+ emojis in 8 categories.

emoji_picker_flutter Yet another Emoji Picker for Flutter ?? Note: This package is based on emoji_picker which has been deprecated and not maintained

Aug 9, 2022
An assets picker in WeChat style, support multi assets picking.
An assets picker in WeChat style, support multi assets picking.

An assets picker in WeChat style, support multi assets picking.

Aug 10, 2022
A Flutter Widget Approach for using HTML tags & CSS styles in your upcoming Apps.

html_widgets A Flutter Widget Approach for using HTML tags & CSS styles in your upcoming Apps. Text Widgets *text property is required for all the tex

Jul 14, 2022
A flutter package to display a country, states, and cities. In addition it gives the possibility to select a list of countries, States and Cities depends on Selected, also you can search country, state, and city all around the world.
A flutter package to display a country, states, and cities. In addition it gives the possibility to select a list of countries, States and Cities depends on Selected, also you can search country, state, and city all around the world.

A flutter package to display a country, states, and cities. In addition it gives the possibility to select a list of countries, States and Cities depends on Selected, also you can search country, state, and city all around the world.

Jul 7, 2022
Allows widgets to be zoomed in and out by inserting a OverlayEntry which allows the widget to be on the front at all times.

zoom_pinch_overlay An instagram style pinch and zoom widget for all platform completely written in pure dart! All other "zoom_pinch" package doesnt di

Jun 24, 2022
Display all stand alone widgets in a nice UI
Display all stand alone widgets in a nice UI

flutter_organized_widgets Display all stand alone widgets in a nice UI How to install Add to dependencies: flutter_organized_widgets: git: https

Nov 4, 2021
A flutter plugin for Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple.
A flutter plugin for Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple.

A flutter plugin for Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple.

Aug 1, 2022
Foody - Flutter project to display foods to clients and display charts and has a lot of features , two flutter apps : Android and Web
Foody - Flutter project to display foods to clients and display charts and has a lot of features , two flutter apps : Android and Web

Foody Flutter project to display foods to the clients and use charts and use a lot of features to complete the process (HUGE APP) There two apps: Andr

Feb 7, 2022
Native context menu for Flutter apps
Native context menu for Flutter apps

native_context_menu Native context menu for flutter apps Installation flutter pub add native_context_menu Usage import 'package:native_context_menu/na

Aug 9, 2022
A Flutter project that gives basic flutter design to implement a login UI
A Flutter project that gives basic flutter design to implement a login UI

Login UI Design A Flutter project that gives basic flutter design to implement a

Aug 4, 2022
Canton Design System elements and resources for flutter.

Canton Design System Canton Design System elements and resources for Flutter. Description This package contains elements that I use in my apps. It inc

Feb 12, 2022
This is an eCommerce minimalist template with a clean and beautiful design for Flutter.
This is an eCommerce minimalist template with a clean and beautiful design for Flutter.

Shope - Free Flutter eCommerce Template The “Shope” e-Commerce UI Kit has the goal to help you to save time with the frontend development. You can use

Aug 6, 2022
Flutter Beautiful Login Page design and Animation - day 12
Flutter Beautiful Login Page  design and Animation - day 12

Flutter Beautiful Login Page design and Animation - day 12

Aug 5, 2022
Create mobile game store design using Flutter
Create mobile game store design using Flutter

Create mobile game store design using Flutter

Jun 2, 2022