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

Overview

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.

Comments
  • The argument type 'PointerEvent' can't be assigned to the parameter type 'PointerDownEvent' Linux

    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
    
    opened by wim07101993 12
  • hexInputController causes setState() called after dispose() exception

    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);
    }
    
    bug 
    opened by glaceon2000 11
  • Error after installing v0.5.0

    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 `

    opened by samiraj99 10
  • How to work around using the colorpicker inside an alertdialog on a small phone (e.g. nexus5)

    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 : ════════════════════════════════════════════════════════════════════════════════════════════════════
    
    opened by gizmomogwai 10
  • Landscape version?

    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.

    opened by codegrue 9
  • Null safety support

    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.

    opened by lig 6
  • iPhone 5s Landscape Material Dialog too large

    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.

    bug 
    opened by zurie 5
  • App can't debug when colorpicker is added to the pubspec.yaml

    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.

    opened by jabberwocky1994 3
  • Update color selection also for tap down

    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.

    opened by friebetill 3
  • Overflow on dialog / iPhone

    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

    bug 
    opened by jaumard 3
  • add didUpdateWidget lifecycle to handle changes to pickerColor

    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);
              },
            ),
          ],
        );
      }
    }
    
    opened by Jordan-Nelson 3
  • Text input not working on web

    Text input not working on web

    When I show this widget in an alert dialogue on flutter web, the hex code and rgb inputs are not clickable/typeable. It works on mobile, but not on web for some reason.

    opened by sirwes 4
  • Feature request: Vertical Slider

    Feature request: Vertical Slider

    I really like this package because it easy to custom. Beside "horizontal slider" and "circle slider" i think we should add "vertical slider" for more customable layout.

    opened by HuyNguyen1590 0
  • `ColorPickerHueRing` improvements

    `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.

    opened by JCapucho 0
  • Fix stroke width scaling in hue ring

    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 |

    opened by JCapucho 0
  • Implemented option to remove color indicator and to change the width of the pallet type slider

    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.

    opened by SayuruSandaru 1
Owner
Dark Knight
Game Dev & Dragon Slayer
Dark Knight
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

Dartoos 8 Nov 2, 2022
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

CODEHOMIE 265 Dec 25, 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.

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

Blackshadow Software Ltd 22 Sep 1, 2022
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

Leo Elstin 1.2k Jan 8, 2023
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

Sreelal TS 4 May 2, 2022
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

Stefan Humm 99 Dec 24, 2022
An assets picker in WeChat style, support multi assets picking.

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

FlutterCandies 1.1k Dec 30, 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

XenonLabz 7 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.

Altaf Razzaque 25 Dec 20, 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

Samuel 18 Nov 29, 2022
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

Norbert Kozsir 10 Nov 18, 2022
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.

Urmish Patel 191 Dec 29, 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 the clients and use charts and use a lot of features to complete the process (HUGE APP) There two apps: Andr

ABDULKARIMALBAIK 1 Feb 7, 2022
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

Andrei Lesnitsky 151 Dec 22, 2022
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

CABREX 9 Nov 8, 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

Carlton Aikins 8 Feb 12, 2022
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

Roberto Juarez 1.1k Dec 31, 2022
Flutter Beautiful Login Page design and Animation - day 12

Flutter Beautiful Login Page design and Animation - day 12

Mohammad Rahmani 296 Jan 1, 2023
Create mobile game store design using Flutter

Create mobile game store design using Flutter

Firgia 16 Nov 25, 2022