A highly customizable Flutter color picker.

Overview

Pub Version GitHub Workflow Status (event) Test codecov License

FlexColorPicker

FlexColorPicker is a customizable color picker for Flutter. The ColorPicker can show six different types of color pickers, three of which are used for the standard Flutter Material colors and their shades. The size and style used for the pick items can be customized.

The picker is also Windows, Mac, Linux and Web desktop compatible. It has desktop focus handling plus optional menus and buttons for handling COPY-PASTE of colors from and to the picker, including desktop COPY-PASTE keyboard shortcuts.

ColorPicker variations upper

Contents


Color Picker Types

The different types of available color pickers are:

  1. Material primary colors and its shades. ColorPickerType.primary
  2. Material accent colors and its shades. ColorPickerType.accent
  3. Both primary and accent colors and their shades, in the same color picker. ColorPickerType.both
  4. Black and white colors, including very near black and white shades. ColorPickerType.bw
  5. Custom color swatches and their shades, that you define and name. ColorPickerType.custom
  6. HSV color wheel picker, that allows you to select or enter any color. ColorPickerType.wheel

When you show more than one color picker, a segmented sliding control allows you to select which one to use. You can configure the ColorPicker to include any of the above color pickers. Showing pickers 1 and 2, together with picker 3 is not very useful, they are available as optional ways of showing and selecting the standard Material primary and accent colors.

Give the ColorPicker a heading and a subheading for the color shades, typically Text widgets with appropriate style. Decide if the Material shades can be selected or not and if the selected color name and RGB code are visible in the picker. If the color HEX RGB code is visible, the picker can also include a button that allows you to copy the selected color's code to the clipboard directly from the field. On the wheel picker you can enter a HEX RGB color code, and the wheel picker will move to select the entered color, while also creating a color swatch for it.

The shape, size and spacing of the color picker items can be modified. There is a built-in dialog that can be used to show and use the ColorPicker in a dialog. You can of course also make your own dialog and just use the ColorPicker widget in your own custom dialog or other overlay.

ColorPicker variations lower

Getting Started

In the pubspec.yaml of your Flutter project, add the following dependency:

dependencies:  
  flex_color_picker: ^2.1.2

In your library file add the following import:

import 'package:flex_color_picker/flex_color_picker.dart';

Default Example Application

To try the default example of the color picker on a device or simulator, clone the FlexColorPicker GitHub repository and run the example:

cd example/
flutter run --release

The result is a default color picker in a Card on the screen, with only the Material primary and accent color pickers enabled. It also has two other color pickers that opens up in dialogs with different styles and different enabled picker types. The tutorial goes through and explains the example application in detail.

ColorPicker Basic

Live Web Demo

You can also try a live Web demo of the FlexColorPicker here. With the Web demo you can modify most of the color picker's API values and use it as a tool to find a style that fits your application.

The source code for the Web demo, which is a bit more elaborate example than examples normally are, is also bundled with the package source code in the "example/lib/demo" folder.

IMPORTANT: If the color picker's opacity slider feature is used on WEB builds enableOpacity: true, then you must build using the SKIA canvaskit renderer only. The opacity slider uses ImageShader, a Flutter API that is not yet available on html builds, at least not in version stable 2.2.1.

flutter run -d chrome --web-renderer canvaskit
flutter build web --web-renderer canvaskit

For more information see https://flutter.dev/docs/development/tools/web-renderers

The Web demo has a responsive view, that expands into maximum four separately scrollable columns. The columns contain a massive amount of controls that you can use to adjust the color picker's settings. On a 1080p desktop screen, you can see most of the settings at the same time as the color picker. With this you can test the settings and see their impact on the picker as you adjust them.

The Web demo also has tooltips for each setting control. The tooltips show the name of the API it modifies and its current value. With this feature you can use the web demo as a tool configure the color picker to a desired style, and find the APIs and values that you used.

The same toggle that is used to turn OFF the tooltips in the color picker, also turns OFF the API tooltips in the demo, in case they get in the way. By default, the tooltips are ON, to show the used API and its current value.

The FlexColorPicker web demo also persist the settings as you change them. The next time you use it, with the same device and browser, it will restore the configuration that you left it in last time you used it. You can reset the settings to their start default values as well.

ColorPicker WEB demo

Tutorial

In this chapter we use the default bundled example application as an introduction to the FlexColorPicker. We will create three different color pickers, with different configurations and use the ColorPicker three different ways.

This example uses a StatefulWidget as its main page, the ColorPickerPage, where we define three different Color objects in its local state, and give them a start value in the StatefulWidget's initState().

We will use these colors to indicate the currently selected color for the three examples and as start color value for each example color picker.

class _ColorPickerPageState extends State<ColorPickerPage> {
  // Color for the picker shown in Card on the screen.
  late Color screenPickerColor;
  // Color for the picker in a dialog using onChanged.
  late Color dialogPickerColor;
  // Color for picker using the color select dialog.
  late Color dialogSelectColor; 

@override
void initState() {
  super.initState();
  screenPickerColor = Colors.blue;  // Material blue.
  dialogPickerColor = Colors.red;   // Material red.
  dialogSelectColor = const Color(0xFFA239CA); // A purple color.
}

Color Indicator

We can use the ColorIndicator Widget, that the ColorPicker also uses internally, to show and select a new color. Alternatively you can make and use a custom for Widget for this purpose. In this tutorial we use the ColorIndicator in a ListTile, and use the ColorIndicator as its trailing property to show the selected color.

The FlexColorPicker package also includes ColorTools, a set of helper functions that among other things, can display names of the standard Material colors, shade index, and an optional Flutter style Hex color code. We use the ColorTools.materialNameAndCode in the ListTile's subtitle property to describe the selected color by showing its Material color name and index, as well as its Flutter style HEX color value.

We also use the ColorTools.nameThatColor function, that names any color based on the closest matching color from a list consisting of 1566 color values and their English names.

We begin by adding this ListTile to a ListView in the Scaffold body.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
      centerTitle: true,
      title: const Text('FlexColorPicker Demo'),
    ),
    body: Scrollbar(
      child: ListView(
        padding: const EdgeInsets.fromLTRB(8, 0, 8, 0),
      children: <Widget>[
        // Show the selected color.
        ListTile(
          title: const Text('Select color below to change this color'),
          subtitle:
            Text('${ColorTools.materialNameAndCode(screenPickerColor)} '
                 'aka ${ColorTools.nameThatColor(screenPickerColor)}'),
          trailing: ColorIndicator(
            width: 44,
            height: 44,
            borderRadius: 22,
            color: screenPickerColor,
          ),
        ),
   ...

Screen ColorPicker

Next we add the FlexColorPicker ColorPicker widget to the ListView. We give the ColorPicker's color property the defined starting color, in this case screenPickerColor. We also give the picker a heading and subHeading, plus the required onColorChanged callback function.

We use the color from the callback in a setState() to modify the screenPickerColor to the color returned by the callback. The onColorChanged callback in the ColorPicker is called whenever you select a new color in the ColorPicker with the selected Color value. In this example we have also wrapped the color picker in a Card.

  // Show the color picker in sized box in a raised card.
  SizedBox(
    width: double.infinity,
    child: Padding(
      padding: const EdgeInsets.all(6),
      child: Card(
        elevation: 2,
        child: ColorPicker(
          // Use the screenPickerColor as start color.
          color: screenPickerColor,
          // Update the screenPickerColor using the callback.
          onColorChanged: (Color color) =>
            setState(() => screenPickerColor = color),
          width: 44,
          height: 44,
          borderRadius: 22,
          heading: Text(
            'Select color',
            style: Theme.of(context).textTheme.headline5,
          ),
          subheading: Text(
            'Select color shade',
            style: Theme.of(context).textTheme.subtitle1,
          ),
        ),
      ),
    ),
  ),

This gives us round color pick items, and a round color indicator above the picker to show the selected color:

ColorPicker round with indicator

Dialog ColorPicker Method

A common use case for a color picker is to show a color selection widget and allow users to select a new color in a dialog. The ColorPicker comes with a built-in dialog that can be used for this. Alternatively you can just use the ColorPicker widget and include it in your own custom dialog.

For the first dialog example we will show all the built-in picker types, except the combined primary and accent colors picker type, and the near black and white shades' picker. We will add some custom colors for the Custom colors section of the ColorPicker.

First we define our custom colors and from our color definitions we create primary and accent color swatches by using ColorTools.createPrimarySwatch, and for some example colors with the ColorTools.createAccentSwatch to get accent color swatches.

We add these color swatches as keys to a ColorSwatch Map, that we map to our own String name values for our custom color swatches. You don't have to use the ColorTools functions to create the color swatches from a color, you can just as well define and use your own custom hand tuned ColorSwatch swatches created with MaterialColor or MaterialAccentColor, as shown in the custom color swatches chapter. The ColorTools functions are just convenient helpers that can be used to make Material like primary and accent color swatches from a single color value.

  // Define custom colors. The 'guide' color values are from
  // https://material.io/design/color/the-color-system.html#color-theme-creation
  static const Color guidePrimary = Color(0xFF6200EE);
  static const Color guidePrimaryVariant = Color(0xFF3700B3);
  static const Color guideSecondary = Color(0xFF03DAC6);
  static const Color guideSecondaryVariant = Color(0xFF018786);
  static const Color guideError = Color(0xFFB00020);
  static const Color guideErrorDark = Color(0xFFCF6679);
  static const Color blueBlues = Color(0xFF174378);

  // Make a custom ColorSwatch to name map from the above custom colors.
  final Map<ColorSwatch<Object>, String> colorsNameMap =
      <ColorSwatch<Object>, String>{
    ColorTools.createPrimarySwatch(guidePrimary): 'Guide Purple',
    ColorTools.createPrimarySwatch(guidePrimaryVariant): 'Guide Purple Variant',
    ColorTools.createAccentSwatch(guideSecondary): 'Guide Teal',
    ColorTools.createAccentSwatch(guideSecondaryVariant): 'Guide Teal Variant',
    ColorTools.createPrimarySwatch(guideError): 'Guide Error',
    ColorTools.createPrimarySwatch(guideErrorDark): 'Guide Error Dark',
    ColorTools.createPrimarySwatch(blueBlues): 'Blue blues',
  };

We will use another ListTile to display a ColorIndicator, that we style a bit differently for this example. We also use its onSelect callback to open a dialog with another ColorPicker. As the starting pre-selected color, we will use the dialogPickerColor we defined already at the beginning of the tutorial.

Before we open the dialog we store the current dialogPickerColor's color value. This way we can restore this color value if the user cancels the dialog. We put this ListTile before the previous one, so first in our list view. This will just ensure that it does not get hidden by the dialog on smaller phones. For demonstration purposes, we want this color to be visible and not obscured by the dialog.

  // Pick color in a dialog.
  ListTile(
    title: const Text('Click this color to change it in a dialog'),
    subtitle: Text(
      '${ColorTools.materialNameAndCode(dialogPickerColor, '
      'colorSwatchNameMap: colorsNameMap)} '
      'aka ${ColorTools.nameThatColor(dialogPickerColor)}',
    ),
    trailing: ColorIndicator(
      width: 44,
      height: 44,
      borderRadius: 4,
      color: dialogPickerColor,
      onSelectFocus: false,
      onSelect: () async {
        // Store current color before we open the dialog.
        final Color colorBeforeDialog = dialogPickerColor;
        // Wait for the picker to close, if dialog was dismissed, 
        // then restore the color we had before it was opened.
        if (!(await colorPickerDialog())) {
          setState(() {
            dialogPickerColor = colorBeforeDialog;
          });
        }
      },
    ),
  ),

The above onSelectFocus property is used to inform the ColorIndicator that we do not want it to keep focus when we select and click on it in desktop and Web applications. On those platforms it gets focus when we click on it to open the dialog from it. If it keeps focus while the dialog is open and after the dialog is closed, the active focus overlay color will distort its actual color a bit. In that case we cannot observe the selected color until we un-focus it. We don't want that, this property addresses this issues by automatically un-focusing it after we clicked on it.

Next we create a method to show a ColorPicker with the built-in colorPickerDialog dialog method. The colorPickerDialog method is an asynchronous bool function, that returns true if the user closed the dialog picker with the OK or Select dialog button. If Cancel/Close was selected, or if the user dismissed the dialog by clicking outside it, then false is returned.

In this example we first enable a few more color picker types. The pickersEnabled property takes a map with ColorPickerType enum keys to boolean values. The map defines which color pickers we want to enable and use in the ColorPicker.

In the example below we included Material primary, accent colors, and the custom colors we defined above, plus the HSV color wheel that allows us to select any color. We did not include the picker that combines the primary and accent colors in the same picker, nor the near black and near white color picker.

Below the custom colors we defined in colorsNameMap are given to the color picker's property customColorSwatchesAndNames. If you leave customColorSwatchesAndNames without an entry and happen to have ColorPickerType.custom: true enabled, the custom picker will not be shown.

  Future<bool> colorPickerDialog() async {
    return ColorPicker(
      // Use the dialogPickerColor as start color.
      color: dialogPickerColor,
      // Update the dialogPickerColor using the callback.
      onColorChanged: (Color color) =>
          setState(() => dialogPickerColor = color),
      width: 40,
      height: 40,
      borderRadius: 4,
      spacing: 5,
      runSpacing: 5,
      wheelDiameter: 155,
      heading: Text(
        'Select color',
        style: Theme.of(context).textTheme.subtitle1,
      ),
      subheading: Text(
        'Select color shade',
        style: Theme.of(context).textTheme.subtitle1,
      ),
      wheelSubheading: Text(
        'Selected color and its shades',
        style: Theme.of(context).textTheme.subtitle1,
      ),
      showMaterialName: true,
      showColorName: true,
      showColorCode: true,
      copyPasteBehavior: const ColorPickerCopyPasteBehavior(
        longPressMenu: true,
      ),
      materialNameTextStyle: Theme.of(context).textTheme.caption,
      colorNameTextStyle: Theme.of(context).textTheme.caption,
      colorCodeTextStyle: Theme.of(context).textTheme.caption,
      pickersEnabled: const <ColorPickerType, bool>{
        ColorPickerType.both: false,
        ColorPickerType.primary: true,
        ColorPickerType.accent: true,
        ColorPickerType.bw: false,
        ColorPickerType.custom: true,
        ColorPickerType.wheel: true,
      },
      customColorSwatchesAndNames: colorsNameMap,
    ).showPickerDialog(
      context,
      constraints:
          const BoxConstraints(minHeight: 460, minWidth: 300, maxWidth: 320),
    );
  }

The above example uses a few more ColorPicker properties. It is styled to be more compact and to show the general color name via showColorName, as well as the selected color's HEX color code by enabling showColorCode. With the color code field you can also copy the color value to the clipboard using the copy icon button suffix in the field. With the wheel picker you can also enter a hex color RGB value in the color code field. The two wheel color HSV selection indicators will move to the color selection matching the entered HEX RGB value.

The above example also uses the copyPasteBehavior configuration class ColorPickerCopyPasteBehavior() with longPressMenu set to true, to activate a long press context COPY-PASTE menu in the picker.

Most importantly the above example uses the showPickerDialog method to show the defined ColorPicker in a pre-made dialog. The dialog also needs a build context, that we pass to it.

In this example we also define size constraints for the dialog. If you do not define size constraints, it will auto size to fit the dialog content. Using constraints allows the dialog to keep the same size when the content size changes slightly as you switch between the different color picker types you enabled. It just looks a bit better if the dialog size does not change when you switch picker type with the type selector. The color wheel picker in particular will often require more space. The wheel size can be customized as well, it does however become more difficult to use if it is made very small. In this example it is on purposes on the lower side of a still usable size.

The end result of the above setup is a ListTile where the trailing color indicator widget can be clicked to open a dialog to select a new color for the trailing ColorIndicator color.

As the dialogPickerColor changes the color in the dialog, the ColorIndicator's color also changes via this interaction. If the dialog is cancelled, the ColorIndicator's original color is restored.

ColorPicker dialog demo

Bonus Exercise - Not Included the Example Code

As an extra exercise, and to better see this interactive change of the color when it is modified in the dialog, try connecting the dialogPickerColor color to the AppBar's backgroundColor property.

Did you manage to do it? What happened?

:
appBar: AppBar(
  // To do this, just add this row to the AppBar in the example.
  backgroundColor: dialogPickerColor,
  elevation: 1,
  centerTitle: true,
  title: const Text('ColorPicker Demo'),
),

As can be seen below, now the selected color in the dialog changes the AppBar's color and this happens as you change the color in the dialog. If you select the color, it is kept and cancelling, restores the AppBar's color as well, pretty cool!

You can use this principle to connect the color picking interaction to colors that define your application's theme colors and modify your application's theme color values while the app is running. Showing how to do this goes a bit beyond the scope of this tutorial, but it is pretty much as easy as the interactive AppBar background color manipulation we just did.

ColorPicker appbar demo

Dialog ColorPicker Function

If you do not need the feature that allows you to modify and update colors interactively from the dialog via a callback, you can use a more straight forward async dialog function API. This function opens the picker with a pre-selected color and either returns the new selected color when closed with OK, or returns the color you opened it with, when closed with Cancel action.

You can call this showColorPickerDialog dialog function directly from e.g., an onTap or onSelect callback, commonly found in Buttons, InkWell and similar Widgets with interaction callbacks. Make the callback async and wait for showColorPickerDialog to return the selected color value.

Let's take a look at how this works. As before, first we define another ListTile with a trailing ColorIndicator. We place it last after the previous two ListTile's in our ListView, just before the ColorPicker that is in the Card in the ListView. For the color that we manipulate, we use the dialogSelectColor Color that we defined earlier. In this case the start color value is not a color that exists in the default Material primary and accent color picker or any shade of them. Because the color cannot be found in the pickers with pre-defined colors, the color picker will automatically select the Wheel picker and show the start color value we defined in it.

In this case we make our ColorIndicator's onSelect callback async and directly from it call the showColorPickerDialog. In the function call we also define the ColorPicker's properties we want it to use in the dialog. We pass in the start color value and wait for it to return the color selection result, that we get when the dialog is closed via OK or CANCEL. After that we can use the returned color value, in this example we just update our dialogSelectColor state variable.

ListTile(
  title: const Text('Click to select a new color from a dialog'),
  subtitle: Text(
    '${ColorTools.materialNameAndCode(dialogSelectColor, colorSwatchNameMap: colorsNameMap)} '
    'aka ${ColorTools.nameThatColor(dialogSelectColor)}',
  ),
  trailing: ColorIndicator(
      width: 40,
      height: 40,
      borderRadius: 0,
      color: dialogSelectColor,
      elevation: 1,
      onSelectFocus: false,
      onSelect: () async {
        // Wait for the dialog to return color selection result.
        final Color newColor = await showColorPickerDialog(
          // The dialog needs a context, we pass it in.
          context,
          // We use the dialogSelectColor, as its starting color.
          dialogSelectColor,
          title: Text('ColorPicker',
              style: Theme.of(context).textTheme.headline6),
          width: 40,
          height: 40,
          spacing: 0,
          runSpacing: 0,
          borderRadius: 0,
          wheelDiameter: 165,
          enableOpacity: true,
          showColorCode: true,
          colorCodeHasColor: true,
          pickersEnabled: <ColorPickerType, bool>{
            ColorPickerType.wheel: true,
          },
          copyPasteBehavior: const ColorPickerCopyPasteBehavior(
            copyButton: true,
            pasteButton: true,
            longPressMenu: true,
          ),
          actionButtons: const ColorPickerActionButtons(
            okButton: true,
            closeButton: true,
            dialogActionButtons: false,
          ),
          constraints: const BoxConstraints(
              minHeight: 480, minWidth: 320, maxWidth: 320),
        );
        // We update the dialogSelectColor, to the returned result
        // color. If the dialog was dismissed it actually returns
        // the color we started with. The extra update for that
        // below does not really matter, but if you want you can
        // check if they are equal and skip the update below.
        setState(() {
          dialogSelectColor = newColor;
        });
      }),
),

This dialog picker example also introduces a few more properties that we have not used before. For starters, we gave it a title widget instead of a heading. The title is more like the title of an AppBar. We also skipped all the sub-heading widgets to make a more compact picker.

We used the copyPasteBehavior to define a ColorPickerCopyPasteBehavior configuration that enables both copy (copyButton: true) and paste (pasteButton: true) action icon buttons in the picker's top title toolbar. We also kept the long-press copy-paste menu from the previous picker example.

Additionally, we used the actionButtons to configure some options for the dialog action buttons with a ColorPickerActionButtons configuration class. With it, we set dialogActionButtons: false, to remove the dialog's bottom CANCEL and OK action buttons. Instead, we set okButton: true and closeButton: true, to enable an 'OK' check mark icon-button, and a 'Close' x icon-button in the dialog's top toolbar.

As a major new feature we also in the ColorPicker set enableOpacity: true. This shows the opacity slider in the ColorPicker, that we can use to adjust the opacity from 0 to 100% of the selected.

We also set colorCodeHasColor: true, this changes the style of the displayed color code field's background color. It will now use the currently selected color as the field's background color. Making it show the color result of our current color selection and opacity slider setting. The opacity slider has a checkered background, so you can see how opaque the selected opacity value is, when it is used on top of other widgets or images.

Below you can see the result of this picker setup, and also a demo of how you can copy-paste a selected color.

In the demo below we just copy and pate a color from one dialog picker to another, but you can copy-paste colors between the picker and any other app. On desktop the app also supports keyboard COPY-PASTE shortcuts. For more information about the COPY-PASTE features, see the API guide's chapter regarding its features.

ColorPicker copy-paste demo

Under the hood, the showColorPickerDialog function uses the same ColorPicker and showPickerDialog method. It just bundles them together in one single async showColorPickerDialog function.

The API surface of this function is quite large. It bundles all the ColorPicker properties, including its showPickerDialog method's parameters, and an AlertDialog, with all its properties, plus the showDialog function and its parameters, all into one large function.

Despite its large API surface, it is still rather convenient to use. You seldom need to use most of the underlying API properties, usually the default values for them work fine. They are however exposed to the degree they can be, should you ever need them.

Finally, the default example also includes a light and dark theme mode toggle. It is there so that you can test the look and operation of the color picker with a dark theme.

API Guide

In addition to what is covered in the above tutorial, the FlexColorPicker has a large amount of additional features. Its behavior can easily be modified with its direct properties and two additional configuration property classes ColorPickerActionButtons and ColorPickerCopyPasteBehavior, that can be configured and passed in for even more customization options.

This guide goes through most of the API settings, and provides links to API references. Below we will explore the ColorPicker APIs in more detail, and cover both basic and advanced features of the FlexColorPicker.

Elements of the Picker

This chapter shows the different visible elements of the color picker that you can enable and disable, or add as extra Widgets to the picker.

In main example and its tutorial, at the core is a passed in Color() object to the color picker's color property. It is used to pass in the color that the picker should pre-select. It will update to show the new color if the picker Widget is updated with a new color. The color property is not required, it defaults to Colors.blue if it is omitted, but normally you would give it a starting value based on the color you want to modify.

The other main property is the ValueChanged<Color> callback onColorChanged. This is called whenever a new color value is selected in the color picker, with the selected color. What you do with the callback color depends on your use-case. In the tutorial examples we update the passed in color with setState, and the changed color is shown in a color indicator widget, in the shape of a colored box or circle.

However, in the one of the dialog examples, it was also demonstrated how it can also be used to interactively change the AppBar color of the app itself. You can of use the picker to change any color in your application theme, or the color used by any Widget.

The two core properties of the ColorPicker:

ColorPicker(
  color: myColor,
  onColorChanged: (Color color) => setState(() => myColor = color),
),

If you need to update the ColorPicker externally, just pass in a new value to the color property. In the above example you could give the state variable myColor a new value from some other place than the above onColorChanged callback, and call setState. The live Web demo includes an example of how you can update the ColorPicker via other widget interactions, or even remote control, or mirror it completely from another FlexColorPicker opened as a dialog.

Enabled Color Pickers

API reference: pickersEnabled

By default, the Material primary colors and accent colors pickers are enabled. To change the enabled pickers you provide a ColorPickerType key to bool value map, with the pickers you want enabled to the property pickersEnabled. You only need to provide key-values pairs for picker keys you want to change. Key values that are not provided use their defaults.

If you only have one picker enabled, there is no sliding segment (tab) control shown that will allow you to switch between different color picker types. That would be pointless, since there is only one color picker. If all pickers are disabled, the Material primary color picker will be shown.

If all other features are disabled (by default they are not), the screenshot below represents an example of a bare-bones minimum picker, showing only the main colors of the Material primary colors. If other defaults are OFF, to enable producing this picker style, only the pickersEnabled setting to disable the accent color picker is needed to get the shown picker:

Pickers 1

Normally you would enable a few more pickers, below we enable the primary, secondary, near black and white and the wheel picker. Since more than one picker is enabled, the color picker selector automatically appears:

Pickers 2

If you want to show both Material primary and accent colors in the same picker you can enable the ColorPickerType.both picker. In that case you usually want to disable ColorPickerType.primary and ColorPickerType.accent, as they contain duplicates of already available colors in the both picker. The live Web demo implements this as exclusive selections in its own logic. It is of course possible to show all three pickers, but it does not really make much sense.

Enable Shades Selection

API reference: enableShadesSelection

By default, selection of the Material primary and Accent color swatch shade color, after selection of the main color, is enabled. In the above example enableShadesSelection had on purpose been disabled to produce the above, main only color, very compact color picker example.

Below we enable the Material color swatch shades selection. Typically, you want to be able to also select the Material shade colors. Normally you would just keep the default enabled setting and don't have to use this property at all. You only need this property if you ant to disable the color-shade selection feature, which you do by setting enableShadesSelection to false.

Pickers 4

Custom Color Swatches

API reference: customColorSwatchesAndNames

To use the custom color swatch picker you have to define your own custom ColorSwatch colors and pass them to the picker via the customColorSwatchesAndNames property. By default, there are no custom colors defined. If you enabled the custom picker and have not provided any custom color swatches, the picker will not be shown despite being enabled, since it has no colors to show.

You can make ColorSwatch objects with the Flutter SDK MaterialColor or the MaterialAccentColor classes by providing swatch color shades for each index. Alternatively you can use the FlexColorPicker helpers ColorTools.createPrimarySwatch(color) and ColorTools.createAccentSwatch(color) by just giving it a single color value. For createPrimarySwatch the provided color will always be used as the base for the [500] index and for createAccentSwatch for as color for index [200], the rest of the index color shades are computed.

Please note that these helpers just produce lighter and darker shades of the provided color for lower and higher swatch indexes. If you give e.g., the createPrimarySwatch the same color value as a built-in Material primary color with index [500], you will not get the same swatch as the built-in Material primary color swatch.

To define color data to use with the customColorSwatchesAndNames property, to start using the custom color picker, first make a final Map with your custom ColorSwatch objects, and their color names. You decide what the colors are called. Here we make three custom colors, with the different above mentioned methods.

final Map<ColorSwatch<Object>, String> customSwatches =
<ColorSwatch<Object>, String>{
  const MaterialColor(0xFFfae738, <int, Color>{
    50: Color(0xFFfffee9),
    100: Color(0xFFfff9c6),
    200: Color(0xFFfff59f),
    300: Color(0xFFfff178),
    400: Color(0xFFfdec59),
    500: Color(0xFFfae738),
    600: Color(0xFFf3dd3d),
    700: Color(0xFFdfc735),
    800: Color(0xFFcbb02f),
    900: Color(0xFFab8923),
  }): 'Alpine',
  ColorTools.createPrimarySwatch(const Color(0xFFBC350F)): 'Rust',
  ColorTools.createAccentSwatch(const Color(0xFFB062DB)): 'Lavender',
};

Then use the customSwatches map in your color picker as value for the customColorSwatchesAndNames property.

ColorPicker(
  color: myColor,
  onColorChanged: (Color color) => setState(() => myColor = color),
  pickersEnabled: const <ColorPickerType, bool>{
    ColorPickerType.both: false,
    ColorPickerType.primary: true,
    ColorPickerType.accent: true,
    ColorPickerType.bw: false,
    ColorPickerType.custom: true,
    ColorPickerType.wheel: true,
  },
  customColorSwatchesAndNames: customSwatches, // Our custom swatch colors.

This will create three custom color swatches, using our "Alpine", "Rust" and "Lavender" custom names in the Custom swatch picker. Picker 6

Customized labels

API reference: pickerTypeLabels

The picker labels have default English labels, you can override them to customize or translate the labels. You set the labels by providing a ColorPickerType key to String value map with the picker labels you want to change with the property pickerTypeLabels. You only have to provide key-value pairs for the labels you want to change, omitted keys will keep their default labels.

Pickers 3

Enable Opacity

API reference: enableOpacity

You can enable a color opacity slider by setting enableOpacity to true. With the slider you can adjust the opacity of the selected color. You can adjust opacity from fully opaque at 100%, to totally transparent at 0%. The selected color and the impact of the opacity value on it, is visualized by the checkered gradient on the opacity slider, and the selected color's opacity gradient on the slider. The thumb's position is over the resulting color's opacity when applied over a background.

The slider thumb label only show opacity value changes in 1% increments. However, the slider has 255 discrete steps, so there is a step for every alpha value in the resulting ARGB color value. If the color code value is enabled and set to a format that includes the alpha, you can see that the alpha value can be adjusted in single increments with the slider.

You cannot pass in the opacity separately to the color picker to get a starting opacity value. If your passed in color value has opacity in its alpha channel, it will automatically get used, but only if enableOpacity is true. If it is false, any opacity or alpha in the color value, or in a color pasted into the picker, is ignored and used as opaque by applying alpha #FF to it.

Picker 5

Show Color Names

API reference: showMaterialName, materialNameTextStyle, showColorName, colorNameTextStyle.

The color picker can be configured to show the selected color's Material color name and its selected shade index number. It can also be configured to show a color name for any selected color based on the ColorTools.nameThatColor function, that uses a lookup list of 1566 color codes and their names. It finds the color that closest matches the selected color on the list, and shows this as the selected color's name after the Material color name. You can also provide the text style for these color name labels. If not provided they default to Theme.of(context).textTheme.bodyText2.

Picker 7

Translate Material Color Names

API reference: Static color names

The Material color names are defined as static values with English defaults for all Material colors in ColorTools. You can modify these values by directly changing their static string values. You can do this in a function that you call just once, or every time your app changes its translated locale and then provide your own localized Material color names. For example:

Picker 8

The "name that color" feature, using the lookup from 1566 color names, is only available in English and cannot be translated in the current version.

Show Color Code

API reference: showColorCode, colorCodeHasColor, showColorValue, colorCodeTextStyle, colorCodePrefixStyle.

The color code field shows the RGB color value of the selected color. On the Wheel picker the field also functions as a HEX RGB color code entry field. The Wheel picker will move its indicators to show the color of the entered color code, as the entry is done for every entered or deleted character in the field.

By default, the code field has a grey background, but you can also configure it to use the current selected color as its background color. The color code field can also have a copy button as a suffix. This is enabled by default, it allows you to copy the current color to the clipboard. There are different options for enabling copy-paste commands in the FlexColorPicker and configuring the copy format also shown as prefix in the color code field. These features are described in detail in the copy-paste actions and behavior chapter.

Picker 9

The TextStyle of the color code display and entry field can be changed with colorCodeTextStyle. It defaults to Theme.of(context).textTheme.bodyText2, if not defined. There is also a separate style for the color code prefix that can be changed with colorCodePrefixStyle, if not defined it defaults to the same style as colorCodeTextStyle.

Show Recent Colors

API reference: showRecentColors, maxRecentColors, recentColors, onRecentColorsChanged.

When showRecentColors is enabled, the color picker shows recently selected colors in a list at the bottom of the color picker. The list uses first-in, first-out to keep min 2 to max 20 colors (defaults to 5) on the recently used colors list, the desired max value can be modified with maxRecentColors.

Selecting a recently used color, moves the picker to the picker where the color is located and selects it again. If opacity is enabled, the opacity the color had when it was selected is also applied. Normally when selecting colors and opacity is enabled, the value the opacity slider is at is kept. However, when selecting a recently used color the opacity the color had when it was selected and added to the recently used colors list will be used.

Selecting a color on the recently used colors list, will not move it first in the list, it will keep its current position. Selecting a color that is already on the list, will not add it again. The currently selected color is not added to the list until you select a new current color.

Picker 10

There is also an optional callback onRecentColorsChanged, that is called everytime a new color is added to the list, with the complete current list of recently used colors. If the optional callback is not provided, then it is not called. You can use this callback to save and restore the recently used colors.

To initialize the list when the color picker is created, give it a starting list with recentColors. This start list could be a list kept in state during the current app session. It is then used when the color picker is created and re-opened to show same recent colors that were used previously during the session. The start list could also even have been persisted and restored from a previous session. The live Web demo persists and restores the recently used colors lists between sessions, in addition to all the settings, you can use it as an example on how to do this.

Title and Heading Widgets

API reference: title, heading, subheading, wheelSubheading, opacitySubheading, recentColorsSubheading.

You can provide custom heading widgets for the picker's toolbar title, main heading, shades selection color subheading, and the wheelSubheading, opacity slider opacitySubheading and subheading for the recently used colors list recentColorsSubheading. If a heading is null, it is omitted. The headings can be any Widget, but typically they are Text widgets with a suitable style, as shown below.

Picker 11

Picker Design

The picker design APIs refers to properties that affect size, shape and spacing of the individual color indicator Widgets inside the color picker, as well as the color wheel and opacity slider sizing.

The ColorIndicator Widget can also be used as a color indicator and selection widget outside the color picker. This is done in the default example, where it is used to show the selected color and also to open a dialog to modify the color.

Color Picker Items

API reference: height, width, borderRadius, hasBorder, borderColor, elevation, spacing, runSpacing.

The color items that show the available colors can be modified. Their height, width, borderRadius plus their elevation, and if they have a border hasBorder and what color the border is borderColor (defaults to divider theme) can all be changed.

Additionally, the spacing between the color box items and their runSpacing when they wrap to more than one row can be adjusted. The color picker items for the Material, Accent, B&W and Custom colors use a Wrap widget for their layout, as do shade colors, and the colors in recently used colors list.

Picker 13

Wheel Diameter, Width and Border

API reference: wheelDiameter, wheelWidth, wheelHasBorder, borderColor.

The wheel color picker's wheelDiameter, wheelWidth and border can be modified. The borderColor is the same property as the color picker's color items' border, but it has its own enable/disable toggle wheelHasBorder (defaults to false). The color wheel width must be from 4 to 50 dp, and it defaults to 16 dp. The color wheel diameter must be from 100 to max 500 dp, and it defaults to 190 dp.

Picker 15

Opacity Slider Height, Width and Thumb Radius

API reference: opacityTrackHeight, opacityTrackWidth, opacityThumbRadius.

The opacity slider's height opacityTrackHeight, width opacityTrackWidth and thumb radius opacityThumbRadius can be adjusted, below some examples:

Picker 16

If the slider width is not defined (default) it expands to fill available picker width, its minimum allowed width is 150 dp. The slider height must be from 8 to 50 dp and thumb radius from 12 to 30 dp.

Picker Layout

API reference: crossAxisAlignment, padding, columnSpacing.

The picker layout APIs deal with spacing of the elements in the color picker, their alignment and padding.

Use the properties crossAxisAlignment, padding and columnSpacing to adjust the look of the color picker content. The columnSpacing refers to the additional vertical spacing between each element in the column used by the color picker layout. The padding and crossAxisAlignment are as typically used in Flutter. Please note that title widget is not a part of the Column body layout of the color picker, and it is not affected by the crossAxisAlignment property. You can think of the title a bit like an app bar title. It is always start aligned to leave enough room for 1 to 4 action buttons. The action buttons can optionally be enabled for the title bar, and they always appear at the end.

Picker 12

Tooltips

API reference: enableTooltips

The enableTooltips property defaults to true, and enables all tooltips that are available in the color picker. If the tooltips get in the way, you can disable them all by setting this property to false. Why not consider providing a property in your app that allows users to turn ON and OFF all the tooltips in the app? FlexColorPicker includes this toggle to make that easy to implement when it comes to its own tooltip behavior.

The tooltip strings used in FlexColorPicker are all based on existing labels in Flutter SDK and by default use Material localizations and thus change with the locale. Via that, they support all languages that Flutter does out of the box. You can still override the tooltip labels if so required and provide your own tooltip labels.

The following tooltips exist, and have the default values shown in the table below.

Usage English tooltip Used MaterialLocalizations.of(context)
Copy button Copy copyButtonLabel
Paste button Paste pasteButtonLabel
OK button OK okButtonLabel
Cancel button Cancel cancelButtonLabel
Close button Close closeButtonLabel

Picker 14

When the keyboard copy/paste shortcuts are enabled, the Copy and Paste tooltips automatically also receive platform aware keyboard shortcut info, after the localized tooltip label. On macOS ' (CMD-C)' is appended to the copy tooltip and ' (CMD-V)' is appended to the paste tooltip. On other platforms ' (CTRL-C)' is appended to the copy tooltip and ' (CTRL-V)' to the paste tooltip.

Dialog Action Buttons

API reference: ColorPickerActionButtons

The API surface of the color picker was getting quite large, therefore two less used configuration classes were created to group additional settings. The first one is the ColorPickerActionButtons used to define the color picker's OK and Cancel action buttons, and their style when they are used by the built-in dialogs.

You use it by passing in a ColorPickerActionButtons configuration to the ColorPicker()'s property actionButtons:

ColorPicker(
  actionButtons: const ColorPickerActionButtons(...),
); 

You can define if OK and Close action buttons are on the top toolbar, or only in the dialog bottom actions area. The top toolbar buttons are plain icon only buttons. For the bottom dialog action buttons you can choose between TextButton, OutlinedButton and ElevatedButton for each button.

The used icons can be changed from default ones, as can their used tooltips. The labels on the bottom action buttons can also be changed. By the default they, like the tooltips, use Material localizations, so they work well enough out of the box for most locales. The bottom action buttons can also use the default or customized OK and Cancel icons as prefix icons to the labels. These icons are always shared with the corresponding icons defined for the top toolbar icon buttons.

The recommendation is to not use the top and bottom action buttons at the same time, but rather select one of the two options. The API does however allow using both or even a mix and match. It is for example possible to show Cancel and OK actions at the bottom of the dialog, and also add just the 'x' close icon in the upper end corner of the dialog. This 'x' icon then also cancel closes the dialog as expected, this is a usable combination. Adding the OK icon button (by default a check icon) as a select close button to the top toolbar is a bit unconventional, if you also have the OK as a bottom action. Without it enabled, the OK and Close buttons on the toolbar are a nice and compact alternative to selecting color or cancelling the dialog.

Picker 17

The bottom action buttons, and their style depend on their ambient theme.

There are more dialog action buttons design properties you can adjust, please see the ColorPickerActionButtons API reference for additional details.

Copy-Paste Actions and Behavior

API reference: ColorPickerCopyPasteBehavior

The ColorPickerCopyPasteBehavior is the second configuration class group. It is used to configure the desired COPY-PASTE behavior of the color picker. You use it by passing in a ColorPickerCopyPasteBehavior configuration to the ColorPicker()'s property copyPasteBehavior:

ColorPicker(
  copyPasteBehavior: const ColorPickerCopyPasteBehavior(...),
); 

You can control if the picker has:

  • Copy and paste action buttons in the top toolbar.
  • Long press and/or right click copy and paste context menu.
  • Ctrl-C and Ctrl-V keyboard shortcuts, also when not in edit field. Keyboard shortcuts automatically uses Command instead of Ctrl on macOS.
  • A copy color action button in the code entry and display field.

You can also:

  • Define default result RGB string format for the copy command.
  • Define icons for copy and paste action buttons.
  • Define icon theme for the copy and paste icons.
  • Define paste color string parsing error feedback type and message if used.
  • Modify the tooltips for copy and paste buttons.

Paste operation supports all RGB string formats defined by ColorPickerCopyFormat, but the copy format is only in the selected copyFormat.

Code Field Copy Button

API reference: editFieldCopyButton

The color code display and entry field suffix color copy icon button, is enabled by default. This button existed already in version 1.x. It can now if so desired be removed by setting ColorPickerCopyPasteBehavior.editFieldCopyButton to false.

Picker 18

Keyboard Shortcuts

API reference: ctrlC, ctrlV.

When ctrlC and ctrlV properties are set to true, by default they are, a CTRL/CMD-C keyboard press on a desktop keyboard will copy the currently selected color's RGB color code to the clipboard. A CTRL/CMD-V will paste the current clipboard text into the picker. The color picker will then try to parse the pasted value as a color value and move to display the pasted color with the most suitable available picker. The CTRL keyboard modifier is used on Windows and Linux desktop OS and the CMD modifier is used on macOS and iOS.

When enabled, the keyboard copy color shortcuts work when one of the ColorPicker's focusable widgets have focus. These include the color indicators, color field, buttons, and the picker selector, as well as the color wheel. When the picker is used in a modal dialog, one of these widgets will typically always have focus. If the picker is used in layouts on the main surface, where other widgets may have focus, the keyboard shortcuts will not work until the color picker's focusable widgets gets focus.

When the keyboard copy/paste shortcuts are enabled, the Copy and Paste tooltips by default also receive platform aware keyboard shortcut info. After the localized default tooltip label, on macOS ' (CMD-C)' is appended to the copy tooltip and ' (CMD-V)' is appended to the paste tooltip. On other platforms ' (CTRL-C)' is appended to the copy tooltip and ' (CTRL-V)' to the paste tooltip. This is shown in the example in the next chapter.

Toolbar Buttons

API reference: copyButton, copyIcon, copyTooltip, pasteButton, pasteIcon, pasteTooltip.

You can show a copy and paste action icon button in the picker's top toolbar end by setting copyButton and pasteButton to true. You change their default icons, that are Icons.copy and Icons.paste, by defining the properties copyIcon and pasteIcon. Their tooltips can also be changed.

The copyTooltip defaults to MaterialLocalizations.of(context).copyButtonLabel. If CTRL-C keyboard shortcut copying is also enabled, the string ' (CTRL-C)' is added on Linux and Windows platforms and on macOS ' (CMD-C)' is added.

The pasteTooltip defaults to MaterialLocalizations.of(context).pasteButtonLabel. If CTRL-V keyboard shortcut copying is also enabled, the string ' (CTRL-V)' is added on Linux and Windows platforms and on macOS ' (CMD-V)' is added.

Picker 19

Context Menu

API reference: secondaryMenu, longPressMenu, secondaryOnDesktopLongOnDevice.

The FlexColorPicker provides a menu option for copying and pasting colors from and to the picker. You can enable a context like COPY-PASTE menu that can be triggered either via a long press or secondary mouse click, typically the right mouse button.

The secondary right click is often a good option on Windows and Linux desktop apps, to some extent it may also work on desktop web browsers. However, desktop browsers' built in right click menu also tend to ge triggered by it. This menu may get in the way of the color picker's COPY-PASTE menu when secondary click is used in a desktop Web browser. On touch only devices, or other use cases when a mouse right click is not optimal, the long press option to show the COPY-PASTE menu may work better.

Set property secondaryMenu to true (defaults to false), to enable using secondary button click anywhere in the color picker to open up the COPY-PASTE context menu.

Set property longPressMenu to true (defaults to false) to enable using long press anywhere in the color picker, to open up the COPY-PASTE context menu.

Set property secondaryOnDesktopLongOnDevice to true (defaults to false), to enable using long press in the color picker, to open up the COPY-PASTE context menu on iOS and Android touch devices. While using secondary mouse button on desktop platforms Windows, Mac and Linux and their web variants.

Set property secondaryOnDesktopLongOnDeviceAndWeb to true (defaults to false), to enable using long press in the color picker, to open up the COPY-PASTE context menu on Web, iOS and Android touch devices. While using secondary mouse button on desktop platforms Windows, Mac and Linux, but not if it is a desktop web app.

Due to secondary mouse button on desktop Web browsers often activating the browser's own secondary-button context menu, the secondaryOnDesktopLongOnDevice option may not be ideal for desktop web browsers. You may want to use secondaryOnDesktopLongOnDeviceAndWeb option instead to avoid right click menu on web desktop automatically, and thus automatically prefer long press on it as well.

Picker 20

If you want to style and customize the look of the popup menu, it can also be done. Please refer to the following APIs menuThemeData, menuWidth, menuItemHeight, and menuIconThemeData for more information.

Color Code Formats and Paste Parsing

API reference: copyFormat, parseShortHexCode, editUsesParsedPaste, snackBarParseError, snackBarMessage, snackBarDuration, feedbackParseError.

copyFormat
The color code display and edit field's value can be shown in five different formats by the setting the copyformat enum ColorPickerCopyFormat to desired format value. The copyFormat also defines the received string format of the copied RGB value when any of the copy functions are used. It defaults to ColorPickerCopyFormat.dartCode.

ColorPickerCopyFormat Resulting format
dartCode Flutter Hex RGB format '0xAARRGGBB' (default)
hexRRGGBB Hex RGB format with no alpha 'RRGGBB'
hexAARRGGBB Hex RGB format with alpha 'AARRGGBB'
numHexRRGGBB Web Hex RGB format with a leading num # sign and no alpha '#RRGGBB'
numHexAARRGGBB Web Hex RGB format with a leading num # sign and alpha '#AARRGGBB'

When pasting color RGB text string values into the color picker, any of the above formats are always accepted and parsed to its color value.

The color picker's paste parser also filters out none valid HEX code related characters from the string, and truncates it to the max length of above formats from the right (end) side! Partial values like for example '0', 'aC', '#334' and '0xFF34' are also allowed and are interpreted as being right aligned in the complete 8-char hex code.

If alpha values are not included in a pasted hex char string, it is always set to 'FF'. If alpha is included in the pasted color value, but alpha via enableOpacity is not enabled for the color picker, then the alpha value included in the pasted color string value will be replaced with 'FF' or fully opaque.

parseShortHexCode
The color picker's paste parser can optionally also interpret 3-char hex code as done by CSS/WEB. This is enabled by setting parseShortHexCode to true (defaults to false). When true, the hex color code paste action and field entry parser will interpret short three character web hex color codes like it is done in CSS/WEB. This results in short HEX RGB color codes, like 123, ABC, F0C and 5D1 being interpreted as 112233, AABBCC, FF00CC and 55DD11.

editUsesParsedPaste
The color code entry field can also be set to use the paste parser by setting editUsesParsedPaste to true (defaults to false). When true, the color code entry field uses the paste parser for keyboard paste shortcuts.
A standard text field keyboard paste shortcut, will paste whatever text is in the copy-paste buffer into the field. This is the false default behavior here too, with the exception that the field only accepts valid hex value input chars (0-9, A-F). It thus always filters out and pastes only the acceptable input characters from the paste buffer.

When editUsesParsedPaste property is true, the edit field will use the same color paste value parser that is used by the other paste actions when the input field is not in focus. This results in a paste action in the entry field that always fully replaces the content, with the parsed color value of the pasted string data. It does not paste in the string in the paste buffer into the text field, it changes it to its parsed value, converted back to a string. Currently, this setting only impacts CTRL-V and CMD-V keyboard shortcut pasting on desktops. The paste on Android and iOS are not intercepted when this setting is true. The false setting is equivalent to past versions (1.x) default behavior when pasting strings into the code entry field.

Setting editUsesParsedPaste to true, may be preferred for a more consistent paste experience in the picker.

snackBarParseError
Set snackBarParseError to true, to show a snack bar paste parse error message when pasting something that could not be parsed to a color value, into the color picker. A paste parse error occurs when something is pasted that cannot be parsed to a color value.

snackBarMessage
The snackBarMessage defines the text message label shown in the paste parse error snack bar. The snackBarMessage label is shown in the snack bar when there is a paste parse error, and snackBarParseError is true.

If the snackBarMessage is not defined (is null), it defaults to the combination of the two Material localization labels pasteButtonLabel: invalidDateFormatLabel. In English this will it say Paste: Invalid format. The snackbar uses the closest ambient theme with SnackBarThemeData for its theming.

Below an example of a copyformat, parseShortHexCode, editUsesParsedPaste and snackBarParseError configuration, and a snack bar parse error message.

Picker 21

snackBarDuration
The duration the paste parse error snack bar message is shown can be set via snackBarDuration. It defaults to const Duration(milliseconds: 1800).

feedbackParseError
By setting feedbackParseError to true the device will vibrate, make an audible click sound or an alert sound on some platforms, when a paste parse error occurs.

This feature is experimental, its support is very limited on most platforms in Flutter. If Flutter SDK some day supports the Material Sound Guide sounds, this feature can be improved with better sound effects. Currently, it cannot be improved without importing none SDK plugins/packages to make sounds. This package strives to work without any plugins or packages, so it will not add any none Flutter SDK imports. (Defaults to false).

onChange Callbacks

API reference: onColorChanged, onColorChangeStart, onColorChangeEnd, onRecentColorsChanged.

The onChange callbacks inform you about color selection changes the user is doing in the color picker, as they are happening. Only the onColorChanged callback is required, the other callbacks can be omitted if they are not needed. If they are null, they will not be called.

onColorChanged
A required ValueChanged<Color> callback, called when user selects a new color with the selected new color value.

Called every time the color value changes via a color selection click, when operating thumbs on the color wheel, or
transparency sliders, or entering a new character in the color code field. Changing which picker type is viewed does not trigger this callback, it is not triggered until a color in the viewed picker is selected.

onColorChangeStart
Optional ValueChanged<Color> callback. Called when user starts color selection with current color value, before the new color selection is applied. When clicking a new color in color items, the color value before the selected new value was clicked is thus returned. It is also called with the current color when user starts the interaction on the color wheel, or the transparency slider.

onColorChangeEnd
Optional ValueChanged<Color> callback. Called when user ends color selection with the new color value. When clicking a new color on color items, the clicked color is returned, the change basically ends after first click. The callback's main purpose is when it is called with the resulting color value, when user ends the interaction on the color wheel or the transparency slider, with the final color value. The purpose of the callback is to indicate when such interaction ended. The onColorChanged and onColorChangeEnd will always end with the same returned color value, but onColorChangeEnd only when the interaction on the wheel and sliders have ended, with only the final result from the interaction.

If you are using a state logging solution in your application, you can use the start and end events to get current selected color state when the change starts. Then store the end result when the user has finished changing the color and only if the color value was different. This is useful on the wheel and opacity slider operations, as they will generate a lot of onColorChanged events while they are operated, which you may not want to log. If it is applicable to the use-case, then using the showColorPickerDialog function described here, is another way around this when logging is used.

It is worth noticing that for keyboard color code entry, as each entry also changes the selected color interactively for every entered character, we cannot know when the editing is actually done. Thus keyboard entries generate start and end events for every char input, just as when selecting a color by clicking on direct color items or when pasting in a new color.

You can use you the LIVE web example to observe and study the behavior of the above callbacks when you use the picker. The demo includes trackers that show their behavior.

Picker 22

onRecentColorsChanged
Optional ValueChanged<List<Color>> callback that returns the current list of recently selected colors.

This optional callback is called every time a new color is added to the recent colors list with the complete current list of recently used colors. If the optional callback is not provided, then it is not called. You can use this callback to save and restore the recently used colors. To initialize the list when the color picker is created give it a starting via recentColors. This could be a list kept just in state during the current app session, or it could have been persisted and restored from a previous session.

Dialogs

The FlexColorPicker comes with two built-in ready to use dialogs. You can also make your own custom dialogs by including the ColorPicker() in your own dialog or overlays designs. In this chapter we will look at the two built-in dialogs, that are really the same dialog, but designed for slightly different use cases.

ColorPicker showPickerDialog Method

API reference: showPickerDialog

This dialog allows you track the ColorPicker's different onChange callbacks when the dialog is open and colors are being manipulated and react to the changes as they happen. You can use this to for example interactively change color properties of the application's Widgets and even its theme. You can see the effect of changes applied as a new color is selected in the dialog picker, even while dragging the wheel and sliders.

The showPickerDialog dialog demo in the default example app shown earlier here explains how to use the built-in ColorPicker(...).showPickerDialog method.

The disadvantage with this dialog is that to maintain the state yourself. You have to store color before you open the dialog and restore this color if the dialog is cancelled, instead of a color selected. The API can also be a bit cumbersome to use, although the above mentioned example shows how it is done.

Function showColorPickerDialog

API reference: showColorPickerDialog

The showColorPickerDialog function is often simpler to use. Just pass in a build context for the dialog, and the required start color value. Call the function, with needed color picker and dialog setup properties, and await for it to return the selected color when the dialog is closed. If no color is selected, when the dialog is cancelled or dismissed, then it just returns the passed in start color.

This picker might be simpler to use in many scenarios. However, it cannot use the feature where colors and themes can be updated in the background behind the dialog, as colors are selected in it, before the dialog is even closed. It also cannot return the list of recently selected colors, but you can still give it a starting set of recently selected colors. Potentially the callback for the recently used colors lists could be added to the showColorPickerDialog's exposed APIs, it is however currently not exposed.

In many cases when you just need to open a picker dialog, to select a color, or cancel the selection and move on, this version offers a simpler API for that. Under the hood it is just a wrapper for the other version with the on change callbacks. It thus shares all other properties and features with the ColorPicker, combined with its showPickerDialog method.

The showColorPickerDialog dialog demo in the default example app shown earlier here explains how to use the built-in ColorPicker(...).showColorPickerDialog function.

Since the properties elevation and title, in the showPickerDialog method would collide with the same named ones in the ColorPicker, the dialog's elevation and title in showColorPickerDialog are instead called dailogElevation and dialogTitle. This is to avoid the property name conflict when they are present in the same function.

Desktop and Web Ready

FlexColorPicker works on all Flutter platforms, Android, iOS, Web, Windows, macOS and Linux. Here is an example of the demo application running on Windows desktop.

ColorPicker on Windows

The live Web demo is of course an example of it running in a Web environment. For the major part the color picker runs well with either Flutter Web renderer, HTML or CanvasKit.

If the color picker's opacity slider feature is used on WEB builds enableOpacity: true, then you must build using the SKIA canvaskit renderer only. The opacity slider uses ImageShader, a Flutter API that is not yet available on html builds, at least not in version stable 2.2.1.

flutter run -d chrome --web-renderer canvaskit
flutter build web --web-renderer canvaskit

The FlexColorPicker goes a bit further than just working on Web and Desktop. For example, pick item focusing behaves as can be expected. The picker supports keyboard navigation and control selection and control activation, especially when it is used in a dialog where other controls on the screen do not affect the intended keyboard navigation order. As mentioned in the API guide, if the picker is so configured, it also has keyboard shortcuts for copy and paste commands, that even adapt to the used desktop platform.

The wheel picker cannot be operated with just a keyboard, it needs a mouse or touch control. It will remain so, as it is not a design well suited to keyboard control, it is designed to require a mouse or touch input to be operated.

The opacity slider can be operated via keyboard controls too. Future picker options will offer additional advanced color picker type, designed using only sliders for selecting any custom color. This design will enable this picker to use keyboard controls to define and select any color.

The currently used color picker type selection control is based on the CupertinoSlidingSegmentedControl widget. It unfortunately does not support keyboard control. A future version may include additional optional picker type selection controls, that support keyboard navigation and picker "tab" selection. When such controls are added, the current version will remain available as default for backwards compatibility.

Additional Resources

There are more configuration options available in the ColorPicker than those described in the above API guide, please use the complete API doc reference for additional information.

The source code of the live Web example is included in the package example folder, in "example/lib/demo". By studying it, you can see a practical examples of how to use all the features it uses.

The live Web demo also has tooltips showing the used API behind every demonstrated interactive control. This can be used as quick reference and to find the actual used API-value as you interactively configure the Web example.

Happy color picking!

Comments
  • Use of FocusNode is creating issue for other controls.

    Use of FocusNode is creating issue for other controls.

    If TextFormField or TextField is used while using ColorPicker not able to use keyboard at all.

    On clicking on TextFormField soft keyboard appears and instantly disappears. If ColorPicker removed above issue is not coming. Tested on Android.

    bug fixed 
    opened by sachinchavanin 17
  • The argument type 'double?' can't be assigned to the parameter type 'double' because 'double?' is nullable and 'double' isn't.               iconSize: effectiveIconTheme.size,

    The argument type 'double?' can't be assigned to the parameter type 'double' because 'double?' is nullable and 'double' isn't. iconSize: effectiveIconTheme.size,

    When I try to run the application getting this error.

    ../tools/flutter/.pub-cache/hosted/pub.dartlang.org/flex_color_picker-2.3.0/lib/src/widgets/color_picker_toolbar.dart:113:44: Error: The argument type 'double?' can't be assigned to the parameter type 'double' because 'double?' is nullable and 'double' isn't.
                  iconSize: effectiveIconTheme.size,
    

    Directly am not using this plugin. But one of the plugin(https://pub.dev/packages/html_editor_enhanced) is using this library. So not able to figure it out how to fix it.

    bug Flutter SDK change 
    opened by Sunsiha 8
  • Ability to set selected color

    Ability to set selected color

    Unless I'm missing on how to do it, it would be nice to have a way of changing currently selected color. I have a dialog (rolled my own, not using showPickerDialog) with color wheel where I would like to have a reset button that would set the color in the wheel to something predefined.

    opened by metalinspired 8
  • Get Color Name

    Get Color Name

    Hello, the return type when the color is changed in DialogPicker is a material Color. This has no property of name, which I need to get to show to the user.

    I know that you have each color name because you display it in the dialog.

    How can I receive the picked color name? Is there a function to change from color to color name?

    Thank you!

    question 
    opened by TomasWard1 5
  • Honor

    Honor "useRootNavigator" arg when "Navigator.pop" is called

    Currently, the "useRootNavigator" field is ignored when the 'Navigator.pop' method is called by pressing either the 'cancel' or 'ok' button, which causes some unexpected issues in certain use cases like having nested navigators in a bottom navigation bar configuration.

    opened by paolovalerdi 5
  • Exposing onColorChangeStart and onColorChangeEnd for Sliders

    Exposing onColorChangeStart and onColorChangeEnd for Sliders

    I was wondering if it's possible to expose these two callbacks for the color sliders in a similar manner to the Slider Widget.

    An example use case is when the application is keeping track of operations history (undo/redo). With a Slider widget, registering every change can be avoided by doing the following:

    Slider(
      onChangeStart: (_) {
        controller.trackChanges = false;
      },
      onChange: (value) {
        controller.updateData(value);
      },
      onChangeEnd: (value) {
        controller.trackChanges = true;
        controller.updateData(value);
      },
    )
    

    So it'd be nice to have these two callbacks exposed.

    enhancement 
    opened by osaxma 5
  • Is there a way to paste the color code in the color picker?

    Is there a way to paste the color code in the color picker?

    Hi there,

    Is there any way to paste an external color code in the color picker? For example, let's say I've got this color code "0xFF56AB32", and I want to paste color code in the color picker so that I get the same color picked (may be).

    Thanks

    opened by Sheharyar566 5
  • Improve performance of wheel picker

    Improve performance of wheel picker

    Thank you for creating this color picker! It does everything I need and then some. 😊

    I did improve the performance of the wheel picker some by splitting it up into separate CustomPainter widgets and introducing RepaintBoundary widgets around the more expensive painters. I also improved the shouldRepaint implementations for each custom painter widget so as to only repaint when relevant changes have happened.

    The improvement I got was from ~18.5 FPS previously to ~120 FPS after changes in profile mode on my test device (mid-range Android phone from 2019.)

    opened by krista-koivisto 4
  • Dialog with Future<Color?> return type

    Dialog with Future return type

    Hi Mick!

    Great work BTW!

    I have a suggestion regarding the dialog picker.

    I'm not fond of the way it is implemented and I would have preferred a "stateless" way of doing things without relying on the onColorChanged callback.

    An API like this would feel more natural to me :

    Future<Color?> showColorPickerDialog(
       BuildContext context,
       Color? selectedColor,
       /// Picker properties
       /// Same properties as ColorPicker widget
      );
    

    This way I find it more natural to use from a button from example :

    Button(
      onTap: () async {
         final newColor = await showColorPickerDialog(context, color, ...);
      }
    )
    

    What do you think?

    Edit

    I understand why you did that: this allows you to update the view behind the picker while shown to the user!

    Maybe having the two alternatives would be the best then. :)

    opened by aloisdeniel 4
  • add secondaryOffset

    add secondaryOffset

    The latest version of Flutter master will require the addition of this secondaryOffset parameter. Not needed for now on stable but should be helpful to note for folks in the future.

    opened by danReynolds 3
  • fix effectiveIconTheme.size null safe error

    fix effectiveIconTheme.size null safe error

    #40 The argument type 'double?' can't be assigned to the parameter type 'double' because 'double?' is nullable and 'double' isn't. iconSize: effectiveIconTheme.size

    opened by onewilk 3
  • Add option to change color code format

    Add option to change color code format

    Currently, when enabling the showColorCode flag, the widget will display the color codes in a 0xAARRGGBB format. However, it might be desirable to be able to change both the prefix and the order of the channels. For instance, in a package I am developing I was hoping to be able to show the color codes in an #RRGGBBAA format instead.

    Cheers.

    EDIT: I have just learned about the copyFormat attribute, which does allow you to change the prefix, however, the alpha channel can only be removed entirely, and not be repositioned. Perhaps a ColorPickerCopyFormat.numHexRRGGBBAA would solve this issue?

    enhancement discussion 
    opened by Adrian-Samoticha 5
  • Support for disabled Colors

    Support for disabled Colors

    Idea

    I thought about a feature where the developer can provide a list of color values, that either get grayed out or be non selectable in the color picker.

    Why would this be useful?

    I enable users to select their own player color in my app, which is in turn used in statistics. On initial creation the user gets a random color assigned which is not yet selected by another user. The user is able to change the own color, but it would be great, if a visual indicator would show which colors are already selected.

    What is your take on this?

    enhancement discussion 
    opened by jlnrrg 3
  • Copy setup config code from WEB demo app

    Copy setup config code from WEB demo app

    The FlexColorScheme ThemesPlayground app has a feature that can generate the code for the configured active viewed package setup and you can copy paste it into your own app.

    Add the same feature for the ColorPicker to its web demo app.

    enhancement 
    opened by rydmike 0
  • Add a Named Color Picker

    Add a Named Color Picker

    Hi @rydmike ,

    A huge thank you for this package, it is extremely complete.

    Just a small suggestion, the possibility to choose a color among the 1566 named colors in the form of a list or a grid with the possibility to research.

    Have a nice day

    enhancement 
    opened by LefebvreIlyas 2
  • This Flutter issue causes an unhandled exception in certain paste situations when using the new CMD/CTRL-V paste shortcut.

    This Flutter issue causes an unhandled exception in certain paste situations when using the new CMD/CTRL-V paste shortcut.

    https://github.com/flutter/flutter/issues/63226

    The issue is not resolved, but I have worked around it for most parts. This Flutter issue set back progress on the new release a few days.

    This Flutter issue has a workaround in FlexColorPicker, there is no urgent need to fix it. However, for keeping track of the Flutter issue, this issue is used as a tracker for when the root issue in Flutter SDK is resolved.

    wontfix Flutter SDK bug 
    opened by rydmike 0
Releases(3.0.0)
  • 3.0.0(Nov 23, 2022)

    3.0.0

    Nov 23, 2022

    BREAKING - STYLE

    • The color picker dialog actionsPadding now default to null. This results in that if it is undefined, its value is determined by the ambient AlertDialogTheme, or if it is not defined either, the default for AlertDialog. Which have different defaults depending on if Material 2 or Material 3 is used. Default value in previous versions of FlexColorPicker was: EdgeInsets.symmetric(horizontal: 16)

    • The color picker dialog buttonPadding now default to null. This results in that if it is undefined, its value is determined by the ambient AlertDialogTheme, or if it is not defined either, the default for AlertDialog. Which have different defaults depending on if Material 2 or Material 3 is used. Default value in previous versions of FlexColorPicker was: EdgeInsets.all(16)

    • The API usage of the above properties is unchanged. It is only the default behavior that has been updated to be less opinionated and to enable using theme-dependent settings.

    BREAKING - REMOVED

    • Removed in version 2.1.0 no longer used and already deprecated parameter useRootNavigator in ColorPicker method showPickerDialog.
    • Removed in version 2.1.0 no longer used and already deprecated parameter useRootNavigator in function showColorPickerDialog.

    NEW

    • To ColorPicker method showPickerDialog and to function showColorPickerDialog, added parameters barrierLabel and anchorPoint as pass along values to Flutter SDK showDialog and showGeneralDialog.

    • To ColorPicker method showPickerDialog and to function showColorPickerDialog added parameters transitionBuilder and transitionDuration. If transitionBuilder is not null, the showPickerDialog and showColorPickerDialog will use the showGeneralDialog Flutter SDK function instead of showDialog. The showGeneralDialog function will be used with the provided transitionBuilder and transitionDuration. The transitionDuration only has any impact when the transitionBuilder is used. If transitionBuilder is null, then the showPickerDialog and showColorPickerDialog use the Flutter SDK showDialog implementation as before, thus using the default Material platform dependent showDialog transition and duration.

    EXAMPLES

    • Default example: Added an example of how to use the transitionBuilder.
    • Web example: Modernized its theme by using Material 3 and a seed generated ColorScheme.
    Source code(tar.gz)
    Source code(zip)
  • v2.6.1(Sep 9, 2022)

    2.6.1

    Sep 9, 2022

    • Add secondaryOffset to OpacitySliderTrack paint method override to fix new requirement for master channel compatibility, works with stable channel too. Thanks Dan Reynolds for the PR.
    Source code(tar.gz)
    Source code(zip)
  • v2.6.0(Aug 30, 2022)

    Aug 30, 2022

    • Contains all updates from 2.6.0-dev, dev2 and dev3.
    • Updated minimum dependencies to Dart >=2.18.0 and Flutter >= 3.3.0.

    2.6.0-dev.3

    August 28, 2022

    CHANGE

    • This is a dev release that works with Flutter beta 3.3.0-0.5.pre and master channel. It has more relaxed constraints than 2.6.0-dev.2.

    • This version no longer depends directly on package material_color_utilities it uses flex_seed_scheme instead, with a transitive dependency on material_color_utilities.

    • Changed all used TextTheme style names to M3 versions, including docs.

    2.6.0-dev.2

    August 21, 2022

    CHANGE

    • This is a dev release for those that need to work with both master channel where Flutter master SDK depends on material_color_utilities 0.2.0 and 3.3.0 beta, pre for upcoming Flutter 3.3.0 stable, use material_color_utilities 0.1.5. It uses a controversial package constraint of: material_color_utilities: '>=0.1.5 <=0.2.0'. Using older version 0.1.3 and 0.1.4 in theory also works, but they contain some breaking color values in the used algorithm for calculation of tonal palettes. The color changes are very minor and typically not visible to the eye.

    • This dev release also disabled two trivial tests that contained incompatible results between Flutter 3.0.5 stable, 3.3.0-0.4.pre beta and 3.1.0-x master.

    2.6.0-dev.1

    August 5, 2022

    CHANGE

    • This is a dev release for those that need to work with master channel where Flutter SDK depends on material_color_utilities ^0.2.0.

    • Updated material_color_utilities to ^0.2.0. This version constraint does not work with Flutter 3.0.x stable or beta 3.3.x, and their earlier versions. This dev release is required to use Flutter SDK master 3.1.0-0.0.pre.2111 or later, that uses material_color_utilities 0.2.0.

    • For other (older) version of Flutter SDK you can use package version 2.5.0 that has a material_color_utilities version constraint of ^0.1.3.

    • This release also updates Dart SDK constraint to '>=2.17.0 <3.0.0' and has Flutter listed as '>=3.1.0-0.0.pre.2111'.

    DOCS

    • Harmonized the changelog style and its past history. The new style and how it looks will be tested with a dev release to ensure it works well on pub.
    Source code(tar.gz)
    Source code(zip)
  • 2.6.0-dev.3(Aug 28, 2022)

    2.6.0-dev.3

    August 28, 2022

    CHANGE

    • This is a dev release that works with Flutter beta 3.3.0-0.5.pre and master channel. It has more relaxed constraints than 2.6.0-dev.2.

    • This version no longer depends directly on package material_color_utilities it uses flex_seed_scheme instead, with a transitive dependency on material_color_utilities.

    • Changed all used TextTheme style names to M3 versions, including docs.

    Source code(tar.gz)
    Source code(zip)
  • 2.6.0-dev.2(Aug 21, 2022)

    2.6.0-dev.2

    August 21, 2022

    This is a dev release for those that need to work with both master channel where Flutter master SDK depends on material_color_utilities 0.2.0 and 3.3.0 beta, pre for upcoming Flutter 3.3.0 stable, use material_color_utilities 0.1.5. It uses a controversial package constraint of: material_color_utilities: '>=0.1.5 <=0.2.0'. Using older version 0.1.3 and 0.1.4 in theory also works, but they contain some breaking color values in the used algorithm for calculation of tonal palettes. The color changes are very minor and typically not visible to the eye.

    This dev release also disabled two trivial tests that contained incompatible results between Flutter 3.0.5 stable, 3.3.0-0.4.pre beta and 3.1.0-x master.

    Source code(tar.gz)
    Source code(zip)
  • 2.6.0-dev.1(Aug 7, 2022)

    2.6.0-dev.1

    August 5, 2022

    This is a dev release for those that need to work with master channel where Flutter SDK depends on material_color_utilities ^0.2.0.

    • Updated material_color_utilities to ^0.2.0. This version constraint does not work with Flutter 3.0.x stable or beta 3.3.x, and their earlier versions. This dev release is required to use Flutter SDK master 3.1.0-0.0.pre.2111 or later, that uses material_color_utilities 0.2.0.

    • For other (older) version of Flutter SDK you can use package version 2.5.0 that has a material_color_utilities version constraint of ^0.1.3.

    • This release also updates Dart SDK constraint to '>=2.17.0 <3.0.0' and has Flutter listed as '>=3.1.0-0.0.pre.2111'.

    DOCS

    • Harmonized the changelog style and its past history. The new style and how it looks will be tested with a dev release to ensure it works well on pub.
    Source code(tar.gz)
    Source code(zip)
  • 2.5.0(Apr 21, 2022)

    [2.5.0] - April 21, 2022

    NEW FEATURES

    • Added new features to add padding between the wheel picker's shade square and hue wheel, and to adjust the border radius on the shade square. Addresses enhancement request #47 "Square padding". The new features are available via ColorPicker properties wheelSquarePadding and wheelSquareBorderRadius.
    Source code(tar.gz)
    Source code(zip)
  • 2.4.0(Apr 15, 2022)

    [2.4.0] - April 15, 2022

    FIX

    • Fixes issue #44 "High wheelWidth cause wrong cursor position in the ColorPicker"

    NEW FEATURES

    • The order of the action buttons Cancel - OK on the bottom of the built-in dialog can be changed to OK - Cancel. come in three flavors controlled by enum ColorPickerActionButtonOrder having values:

      • okIsRight this is the default in order to no break past behavior.
      • okIsLeft
      • adaptive order depends on platform. Windows uses okIsLeft others okIsRight.

      The feature is enabled via the ColorPickerActionButtons configuration and its new property dialogActionOrder.

    • By default, the picker tries to set focus to its own widgets when it is created. It does this when either [ctrlC] or [ctrlV] are enabled in order for the keyboard listener to be able to react to copy-paste events even if no control on the widget has been focused yet. If you need another widget to retain focus, e.g., if the picker is used on a surface/scope shared with other widgets and not in its own dialog, then setting [autoFocus] to false might help.

      If both [ctrlC] and [ctrlV] are false, the picker yields the focus the same way as setting [autoFocus] false, but then you have no keyboard shortcut copy-paste functions at all. With [autoFocus] false, you can still use keyboard copy-paste shortcuts and yield the focus from the picker. When you do this, the copy-paste keyboard shortcuts will not work until one of the pickers components have been focused by interacting with them.

      The picker still grabs focus when you click on its background, as one way to set focus to keyboard listener to enable copy-paste keyboard shortcuts or when you operate any of its controls, the control in question always gains focus.

      You can now turn OFF the autofocus used by the keyboard listener by setting autoFocus to false in ColorPickerCopyPasteBehavior.

      This new feature can potentially also be used to address issue #33.

    UPDATED

    • The generated Material Color swatch you get when you click on any color in the wheel picker has been updated and is a bit improved. It is still not the actual M2 MaterialColor swatch algorithm, like the Tonal Palette is when it comes to Material 3. Which is using the actual seed algorithm for the primary tonal palette you get with the selected color as input. The wheel does detect when you have selected any Material 2 swatch color and shows its swatch then. For other colors, it computes a MaterialColor swatch. This swatch is still not using the correct algorithm, but it is a bit better looking than before.

      There is currently no know Dart implementation of this algorithm, if there were it would be in use here. There are some versions in JS of the algorithm that have been reverse engineered from the Material 2 design guide website. If someone wants to make a Dart version, that would be fabulous. Links and more information can be found in ColorTools.createPrimarySwatch

    WED DEMO

    The web demo app has been updated to demonstrate above new features.

    Source code(tar.gz)
    Source code(zip)
  • 2.3.1(Mar 3, 2022)

    [2.3.1] - March 3, 2022

    FIX

    • Fix for nullable/none nullable difference for Flutter IconButton between Flutter version 2.10.0 and earlier versions, e.g. 2.8.1, where iconSize is nullable in Flutter 2.10.x, but not e.g. in Flutter 2.8.1. See issue report #40 and PR #41.
    Source code(tar.gz)
    Source code(zip)
  • 2.3.0(Feb 18, 2022)

    [2.3.0] - February 18, 2022

    NEW FEATURE

    • Added capability to show a Material 3 tonal palette as per Material 3 design specification.

    • To enable it set new ColorPicker property enableTonalPalette to true. It is false by default. Like the Material Swatch shades heading that that has an optional subHeading widget, when tonal palette is enabled you can show an optional tonalSubheading widget above it.

      • When you click/select a color in the color picker and tonal palette is enabled, a 13 shade Material 3 tonal palette for the selected color will be generated, always starting with black, tone 0 for the used seed color and ending in white, tone 100.

      • The official Material 3 Dart library is used to create the tonal palette from any selected color. The color you select functions a seed color to generate the tonal palette and might not itself be included and selected in the palette. You can of course click on any color in the generated palette to select and pick a color.

      • Selecting a color in the tonal palette, only selects the color in the palette, it does not update the palette. Only when you select a color from the other color sources in the picker, is that color used as key, to seed and generate an updated color palette for the selected color.

    UPDATED

    • The WEB example was updated to include enabling and disabling the tonal palette and built it with Flutter version, stable 2.10.1.

    • All dependencies in the Web demo were updated to their latest released version.

      The Web demo example requires at least Flutter 2.10.0 to be built, it uses ColorScheme properties in its theme that were not available earlier and removed in 2.10.0 deprecated color properties from its theme. The color picker package itself, still has unchanged version requirement of Dart SDK sdk: '>=2.14.0 <3.0.0'.

    Source code(tar.gz)
    Source code(zip)
  • 2.2.0(Nov 17, 2021)

    [2.2.0] - November 17, 2021

    • Fixed the style for color entry field, to always uses the intended fixed stadium style.
    • Updated dependencies for the web demo, big change was Riverpod to use v1.0.0.
    • Lint rule updates.
    • Bump Dart SDK requirement to 2.14.
    • Build and publish WEB demo with updated version using Flutter 2.5.3.
    Source code(tar.gz)
    Source code(zip)
  • 2.1.2(Jul 16, 2021)

    [2.1.2] - July 16, 2021

    • Improvement: Improved performance by splitting wheel painting into multiple painters and introducing RepaintBoundary widgets around expensive painters to avoid unnecessary repaints. Thank you Krista Koivisto for this excellent contribution!
    Source code(tar.gz)
    Source code(zip)
  • 2.1.1(Jul 1, 2021)

    [2.1.1] - July 2, 2021

    • Documentation fix.

    [2.1.0] - July 2, 2021

    • Fix: The useRootNavigator argument is now respected on all Navigator pop functions used in the ColorPicker widget itself and by built-in dialogs used by the ColorPicker. In order to support this, the current useRootNavigator property in the ColorPicker.showPickerDialog() and in the function showColorPickerDialog had to be deprecated.

      The property has moved to become a configuration option in ColorPickerActionButtons class in order to make it accessible to the Navigator pop functions both in the ColorPicker widget itself, as well as to built-in dialogs.

      The default behavior has not changed, the setting still defaults to using dialogs that use the root navigator, but now the pop functions work as intended. If you for some reason have used none root navigators for the built-in dialogs in previous versions, you need to set ColorPickerActionButtons(useRootNavigator: false) and pass it to ColorPicker(actionButtons) or showColorPickerDialog(actionButtons).

    • Tests: Started adding more tests and coverage report. Total 5668 tests, coverage 65.36%.

    • Documentation and typo updates.

    Source code(tar.gz)
    Source code(zip)
  • 2.0.2(Jun 11, 2021)

    [2.0.2] - June 11, 2021

    • Improvement: Performance slightly improved via an additional rebuild check.
    • New feature: ColorTools got a new static function swatchContainsColor.
    • New feature: Set property secondaryOnDesktopLongOnDeviceAndWeb to true (defaults to false) in ColorPickerCopyPasteBehavior, to enable using long press in the color picker, to open up the COPY-PASTE context menu on Web, iOS and Android touch devices. While using secondary mouse button on desktop platforms Windows, Mac and Linux, but not if it is a desktop web app.
    • Documentation: Fixed broken API reference links in API guide chapter. Mentioned that WEB build requires a canvas kit build if enableOpacity feature is used.
    • Web example: The live web example got updated to use the latest Flutter stable embedder.
    • CI/CD: Trying the CI/CD deployment with --base-href="/flexcolorpicker/" instead of repl.
    Source code(tar.gz)
    Source code(zip)
  • 2.0.1(Apr 9, 2021)

    [2.0.1] - April 10, 2021

    • New feature: Enabled updating the color picker externally. Just set the color property of the widget to a new value to update it. You can even "remote control" the color picker by updating the color, if so needed.

      This is mostly a potential use-case for desktop/web when the picker is not used in a dialog. You can of course use this on a phone or tablet too, but often there is not room enough to keep the picker visible on the main surface this way on mobile devices. However, on desktops it is certainly a valid use case that should be supported. It was previously not supported by design, but as we are going for covering web/desktop use-cases, it should certainly be supported. This update adds support for it. The picker only updates if the externally provided color constructor property differs from its internally kept color state. Finding the right picker, computing its swatches, is a bit demanding, but it seems to work fluidly, even when remote controlling the wheel and sliders interactively.

    • Web example: Updated the Web example to also show the "remote control" of the on-screen color picker. A remote control widget with a few color boxes, that you can click on to update its colors externally was added. The demo even goes meta! You can use a modal dialog version of the ColorPicker, to control the ColorPicker on the screen in the card, from the dialog ColorPicker! Maybe not as such so useful, but an interesting demo.

    Source code(tar.gz)
    Source code(zip)
  • 2.0.0(Apr 9, 2021)

    [2.0.0] - April 9, 2021

    • This release only contains documentation updates from pre-release 2.0.0-nullsafety.5

    • Thi is the first stable release of the null-safe version

    • This is a MAJOR new feature release, in addition to the null-safety conversion.
      Please see changelogs from 2.0.0-nullsafety.0 to nullsafety.5, for a complete list of changes and new features.

    • To get familiar with version 2.0.0 and all its new features, it is recommended to go through the updated tutorial, and the API guide in the readme file.

    • For convenience, the list of breaking changes from last stable version 1.1.5 are listed below.

      Breaking Changes

      In addition to breaking changes as a result of the null-safety implementation, this release contain a few other minor breaking changes from version 1.x, they mostly concern visual nuances and label defaults.

    • The colorCodeIcon has been deprecated and no longer has any function. To modify the copy icon on the color code entry field, define the ColorPickerCopyPasteBehavior(copyIcon: myIcon) and provide it to the copyPasteBehavior property, it defaults to same icon as in versions 1.x.

    • The bottom dialog action button that selects the color now says OK instead of Select. The label for the OK button by default comes from a Material localization. You can as before change it to whatever string you want.

    • The dialog bottom action button for OK by default now uses a plain TextButton and not an OutlinedButton. This change is done to conform to a less opinionated default style. You can still manually configure it to use an OutlinedButton instead as before. Now you can choose, before there was no choice.

    • The dialog bottom OK button is no longer auto-focused.

    • The extension FlexPickerNoNullStringExtensions on none nullable String named toColor, no longer returns color value Color(0x00000000) for colors that cannot be parsed to a Color. It now returns Color(0xFF000000). This is because the Flutter SDK dislikes the fully transparent black Color(0x00000000), if it is full opaque black, it works better as a fallback safety color. The FlexPickerNullableStringExtensions on String? named toColorMaybeNull works as before by returning null when the String? cannot be parsed to a Color.

    • The color code edit and entry field now works more like a normal text entry field. It still only accepts valid hex input and converts all input to uppercase.

    Source code(tar.gz)
    Source code(zip)
  • 2.0.0-pre.5(Apr 8, 2021)

    [2.0.0-nullsafety.5] - April 8, 2021

    • Fix: Setting borderColor did not change the border color on the wheel when wheelHasBorder was true.
    • New features: The showPickerDialog method now exposes most (= not directly controlled) properties of the underlying AlertDialog used to make the dialog, this includes e.g. the backgroundColor, elevation, clipBehavior and shape as new exposed properties that may be useful.
    • New feature: Added a new alternative color picker dialog function showColorPickerDialog that returns a Future<Color> which when the dialog is closed, returns the selected color from the dialog or original start color value, if no selection was made. This picker might be simpler to use in some scenarios, but it does not allow for the feature where colors and theme's can update in the background behind the dialog, as colors are selected in it, before it is even closed. However, if you just need to open a dialog, select a color and move on, this version offers a simpler API for that. Under the hood it is just a wrapper for the previous more capable version with the onChange callbacks. It shares all other properties and features with the ColorPicker combined with its showPickerDialog method, except all the onChanged callbacks that are excluded.
      Since the properties elevation and title in the showPickerDialog method, would collide with the same named properties in ColorPicker. The dialog's elevation and title in the showColorPickerDialog are
      instead called dailogElevation and dialogTitle in it.
    • Improvement: Performance was improved via more optimized rebuilds.
    • Documentation: First version of updated documentation with API guide documentation is now included. It still requires proof-reading before stable release, but getting close to be ready for release now.
    • Default example: The default example got a new picker that shows how to the new showColorPickerDialog function.
    • Web example: The Web example, with the built-in API tooltips guides, got a major rewrite. It was originally not intended to be as large as it grew to be, but since it grew so much it needed a rewrite.
      It now uses Riverpod to make its simple state management needs easy to handle and much cleaner than before. It also includes persisting the settings directly as settings are changed in the app. The persistence is implemented with Hive and should work on all Flutter platforms as well, but it has only been tested on Android, Web and Windows.
      As an experiment, only RiverPod StateProviders were used. While the setup is a bit tedious, it enables the desired fine-grained control over rebuilds of all the used setting control widgets. Each setting is also stored as an individual key-value pair in the used Hive box.
      A ProviderObserver that observes changes in the StateProviders we want to persist, is used to save any state change to the used Hive box, regardless of where the state is changed in the demo app. This setup was an experiment to see if it might work and provide some simplification benefits. At least in this case it did, and it is also a pretty interesting and simple solution.
      The default start values are also defined via the Riverpod StateProvider's default values, that also use their const Hive string key as their provider name. Each StateProvider gets its start setting value from the Hive box with the same key. If the key does not exist yet in Hive, it falls back to a default value from a const Map using the same sring const as its key, for the default fallback value. Reset back to default values is also done by setting all providers' state back to their default values as defined by the same const fallback value map.
    Source code(tar.gz)
    Source code(zip)
  • 2.0.0-pre.4(Mar 22, 2021)

    [2.0.0-nullsafety.4] - March 22, 2021

    • New Feature: A bool enableOpacity property was added that enables an opacity slider that can be used to control the alpha channel in the selected ARGB color value. The slider height can be controlled with opacityTrackHeight, the width with opacityTrackWidth and the slider thumb size with opacityThumbRadius. There is also a opacitySubheading Widget that can be used to provide a Widget heading for the opacity slider.

    NOTE:
    This is FlexColorPicker 2.0.0 dev and pre-release with sound null safety. It contains many new features compared to previous stable 1.1.5 none null safe version.

    The package documentation has not yet been updated to cover the new features that are being introduced in final 2.0.0 version together with null-safety. The changelog covers the major changes. The API-documentation is up to date as well. The bundled and live web demo app demonstrates all the new features, and you can change most API settings. The demo also shows each API name and current value in a tooltip for each control that modifies API values in the demo.

    No more new features will be added to 2.0.0 before the pending stable release. This release is a stabilization and fine-tuning phase. The remaining minimum requirements for releasing stable version 2 is an update of this package documentation to cover all new features. Later releases will provide additional refinements, further testing and CI/CD pipe.

    Source code(tar.gz)
    Source code(zip)
  • 2.0.0-pre.3(Mar 12, 2021)

    [2.0.0-nullsafety.3] - March 12, 2021

    • Bugfix: Color code field no longer receives focus when switching to it on wheel page. Focus is set to color wheel, or the selected color shade, if the shade colors are present. The focus handling has also been improved for desktop usage.
    • Bugfix: The property editUsesParsedPaste now works as intended, if true, desktop keyboard paste commands, while editing a color value are intercepted, and the hole pasted buffer value gets parsed, it does not get pasted into the field. For normal field paste functionality keep editUsesParsedPaste false (default).
    • The color code edit and entry field now works more like a normal text entry field. It still only accepts valid hex input and converts all input to uppercase.
    • New property: If colorCodeHasColor is true, then the background of the color code entry field uses the current selected color.
    • New property If colorCodeReadOnly the color code entry field is always read only. Normally color code can be edited on the wheel picker, set this to true to make it read only there as well. Copy/paste operations still work if they are enabled even if the color code field entry is in read only mode.
    • New feature: The copyPasteBehavior property received three new features and properties:
      • The copy/paste context menu can now also optionally use secondary, typically mouse right, click by setting secondaryMenu to true.
      • It also has a mode where long press will be used on iOS/Android, but secondary mouse click will be used on desktop/web, by setting secondaryOnDesktopLongOnDevice to true.
      • When parseShortHexCode is true the hex color code paste action and field entry parser, interpret short three character web hex color codes like in CSS.
    • New extension: The extension FlexPickerNoNullStringExtensions on String got a new extension function Color toColorShort(bool enableShortRGB).
    • New extension: The extension FlexPickerNullableStringExtensions on String? got a new extension function Color? toColorShortMaybeNull(bool enableShortRGB).
    • Minor breaking: The extension FlexPickerNoNullStringExtensions on none nullable String named toColor no longer returns color value Color(0x00000000) for colors that cannot be parsed to a Color. It now returns Color(0xFF000000). This is because the Flutter SDK dislikes the fully transparent black Color(0x00000000), if it is full opaque black, it works better as a fallback safety color. The FlexPickerNullableStringExtensions on String? named toColorMaybeNull works as before by returning null when the String? cannot be parsed to a Color.
    • Tests: Added unit tests for ColorPickerActionButtonType and ColorPickerCopyPasteBehavior.

    See API documentation for more information.

    Source code(tar.gz)
    Source code(zip)
  • 2.0.0-pre.2(Mar 3, 2021)

  • 2.0.0-pre.1(Mar 3, 2021)

    [2.0.0-nullsafety.1] - March 3, 2021

    There are many new features included in this version 2 pre-release. The new features can be explored with live Web example. Its source code is also included in the package example folder, in "example/lib/demo/main.dart".

    • Improvements: The wheel picker now move on pointer down to point location, it no longer requires a slight movement for its thumbs to move to the selected start tracking point.

    • Improvements: Keyboard traversal of the colors and selecting indicator colors with the keyboard via enter or space. The wheel can however still not be operated with a keyboard, only touch and mouse controlled.

    • New property onColorChangeStart: Called when user starts color selection with current color before the change.

    • New property onColorChangeEnd: Called when user ends color selection with the new color value.

    • New property selectedPickerTypeColor: The color of the thumb on the slider that shows the selected picker. Ported from none null-safe version 1.1.4, does not exist in version 2.0.0-nullsafety.0.

    • New property colorCodePrefixStyle: Defines the text style of the prefix for the color code. If not defined it defaults to same style as colorCodeTextStyle. Ported from none null-safe version 1.1.4, does not exist in version 2.0.0-nullsafety.0.

    • New property title: A Widget used as an app bar type of title widget above the heading. Can include copy, paste, select-close and cancel-cancel icon buttons when picker is used as a dialog.

    • Major new feature: An actionButtons property that takes an ColorPickerActionButtons(). Used to define what type of Ok and Cancel action buttons the color picker has when used in a dialog. It is possible to define if bottom action buttons should be TextButton, OutlinedButton or ElevatedButton per button. If not defined, the labels on the buttons come from Material localizations, not from default hard coded values. See breaking label for the 'Select' label. There are optional select/OK and cancel icon buttons that can be used in the title bar for a more compact dialog. See API documentation for more information.

    • Major feature: A copyPasteBehavior property that takes an ColorPickerCopyPasteBehavior(). Used to define the copy/paste behavior of the color picker, including:

      • Keyboard shortcuts: CTRL-C, CMD-C, CTRL-V, CMD-V
      • Top toolbar copy-paste buttons.
      • Long press copy-paste menu.

      All copy/paste behaviors are optional and can be enabled based on what is needed.

      For the copy format, the desired resulting RGB color string format can be configured to use #RRGGBB RRGGBB #AARRGGBB AARRGGBB and 0xAARRGGBB (default) options. The selected copy format is indicated with the corresponding prefix in the color code display/edit field when it is enabled.

      Paste supports parsing multiple RGB color string formats. It automatically detects what format is used and auto parses to correct Flutter/Dart color value. You can e.g. paste string formatted as #RRGGBB RRGGBB #AARRGGBB AARRGGBB #RGB RGB or 0xAARRGGBB, partial color string values also work. You can also activate a snack bar that informs the users if they paste color strings in an unsupported RGB string format into the color picker.

      See API documentation for more information.

    • Major new feature: The picker can display recently used colors in a list of color indicators at the bottom of the picker. You can use the following properties to control it.

      • showRecentColors: Set to true/false to enable/disable the usage of the recent colors feature.

      • recentColorsSubheading: Subheading widget for the recently used colors. Typically, a Text widget, e.g. Text('Recent colors'). If not provided there is no sub heading for the recently used colors.

      • maxRecentColors: Number of recent colors to track, from 2 to 20 allowed.

      • recentColors: a list with current recent color, defaults to empty. You can store the last list and use it to restore the previous recent colors list.

      • onRecentColorsChanged: Optional value callback that returns a copy the current list of recently used colors. Use it store a copy of the recent colors in order to be able to restore it later.

        See API documentation for more information.

    Breaking changes

    The following are minor breaking changes from version 1.x, they mostly concern visual nuances and label defaults.

    • The colorCodeIcon has been deprecated and no longer has any function. To modify the copy icon on the color code entry field, define the ColorPickerCopyPasteBehavior(copyIcon: myIcon) and provide it to the copyPasteBehavior property, it defaults to same icon as in version 1.x.
    • The bottom action button that selects the color now says OK instead of Select. The label for the OK button by default comes from a Material localization. You can as before change it to whatever string you want.
    • The dialog bottom action button for OK by default now uses just a plain TextButton and not an OutlinedButton, this change is done to conform to a less opinionated default style. You can still manually configure it to use an OutlinedButton instead as before. Now you can choose, before there was no choice.
    • The dialog bottom OK button is no longer auto-focused.
    Source code(tar.gz)
    Source code(zip)
  • 1.1.5(Mar 3, 2021)

    [1.1.5] - March 3, 2021

    • Bug fix selectedPickerTypeColor: When color was undefined, the thumb did not receive the same text color as the default and only one before in version 1.1.3 and earlier, in dark-mode. This broke compatibility with past style when using dark-mode. This fix restores the correct past style when the selectedPickerTypeColor is undefined.
    Source code(tar.gz)
    Source code(zip)
  • 1.1.4(Mar 3, 2021)

    [1.1.4] - March 3, 2021

    • New property selectedPickerTypeColor: Defines the color of the thumb on the slider that shows the selected picker.
    • New property colorCodePrefixStyle: Defines the text style of the prefix for the color code. If not defined it defaults to same style as colorCodeTextStyle.
    Source code(tar.gz)
    Source code(zip)
  • 2.0.0-pre.0(Feb 15, 2021)

    [2.0.0-nullsafety.0] - February 15, 2021

    • First version with null safety.
    • A workaround to https://github.com/flutter/flutter/issues/71687 was introduced. The issue has not been resolved. However, the workaround allows for the Wrap implementation that was changed to a Row in version 1.1.2, to be used again.
    • The almost full API configurable Web example and demo, was included in the package in "example/lib/demo/mina.dart" together with the previous default example in "example/lib/main.dart". Previously this Web example was in a separate GitHub repository. The example was updated to make it responsive, to offer better usability on Web.
    Source code(tar.gz)
    Source code(zip)
  • v1.1.3(Dec 22, 2020)

    [1.1.3] - December 22, 2020

    • Fixed the faulty documentation and comment for showPickerDialog parameter insetPadding.
    • Fixed the faulty default value for showPickerDialog parameter insetPadding, the new default value is the same as Flutter and Material default EdgeInsets.symmetric(horizontal: 40.0, vertical: 24.0), as it should have been.
    • Minor documentation style correction.
    Source code(tar.gz)
    Source code(zip)
  • v1.1.2(Dec 5, 2020)

    [1.1.2] - December 5, 2020

    • Temporary: The Wrap implementation for showing the color code and integer value was changed to a Row due to a regression in Flutter SDK causing a crash issue on channels dev and master when showing the ColorPicker in a Dialog. For more info see here: https://github.com/flutter/flutter/issues/71687 When the issue is resolved, the implementation will be reverted back to a Wrap. Using a Wrap has the added benefit of breaking the color code display+input field, and the rarely used int value, into two rows in case a large font is used in a narrow view when they are both configured to be shown. The Row may overflow in some rare cases. If you do not plan to use the ColorPicker with channels and versions affected by the issue, you can still use the previous version 1.1.1 to keep using the Wrap implementation if you need it. With normal styling it is typically not needed.
    • Fixed that the provided TextStyle via property colorCodeTextStyle was not also applied to the shown color integer value when showColorValue was set to true, as stated in API doc and intended.
    Source code(tar.gz)
    Source code(zip)
  • v1.1.1(Nov 11, 2020)

    [1.1.1] - November 11, 2020

    • Updated the example app and documentation. The update includes updated screen shots and updated animated gifs.
    • Unit tests for ColorTools added, widget tests still pending for later updates.
    Source code(tar.gz)
    Source code(zip)
  • v1.1.0(Nov 6, 2020)

    [1.1.0] - November 6, 2020

    • New API: Added showColorValue to optionally display the int value of the selected color. This can be used to assist developers when they need to see or copy selected color values as int numbers.
    • New APIs: Exposed previously missing static color names in the API for all the accent and B&W color names in ColorTools. All the color name values default to English color names, but can now be changed to translated strings to provide Material color names in other languages as well.
    • Example and documentation updated.
    Source code(tar.gz)
    Source code(zip)
  • v1.0.0(Nov 5, 2020)

    [1.0.0] - November 5, 2020

    • First official release.
    • Example and documentation updated.
    • Updated the live Web demo version to use the released package.
    • New API: Added shouldUpdate to the color wheel picker, as a fix for an issue where black selection changed hue to red. This is a lower level API that is not needed unless you make your own picker for scratch and you want to use the wheel picker in your picker.
    • Final API name tweaks before version 1.0.0 release:
    • Renamed: API createPrimaryColor -> createPrimarySwatch
    • Renamed: API createAccentColor -> createAccentSwatch
    • Renamed: API colorNameAndHexCode -> materialNameAndCode
    • Renamed: API colorName -> materialName
    • Renamed: API colorHexCode -> colorCode
    Source code(tar.gz)
    Source code(zip)
  • v1.0.0-dev.5(Nov 5, 2020)

    [1.0.0-dev.5] - November 5, 2020

    • Added a feature on the wheel color picker that enables entry of a hex RGB value to select a color.
    • API changes to support separate display of Material color name showMaterialName and selected color code showColorCode, plus defining their text styles materialNameTextStyle and colorCodeTextStyle.
    • New API showColorName to display an English color name for any selected color, not just the Material color names or custom named color swatches. It has text style that can be defined as well colorNameTextStyle.
    • New API colorCodeIcon that exposes the color code icon so it can be customized.
    • New API enableTooltips to enable current and future tooltips used in the picker. Currently only the copy color code button has a tooltip.
    • A new method was introduced in ColorTools called nameThatColor(Color color). It returns a name for any color passed to it, only supports English names. It is based on a Dart port of http://chir.ag/projects/ntc.
    • Updated the example.
    • Documentation updates.
    Source code(tar.gz)
    Source code(zip)
Owner
Rydmike
Works with software for building management and energy efficiency. Flutter rocks!
Rydmike
Color picker for Flutter, based on the Google Docs color picker.

Material ColorPicker Color picker for Flutter, based on the Google Docs color picker. Getting Started You can embed into your material app or use it o

Razvan Lung 103 Oct 30, 2022
null 0 Feb 2, 2022
Material color picker, you can customize colors. Selection in two step, first main color and after shades.

Flutter Material Color Picker Material Color picker is a Flutter widget, that can be customizable. By default, it's Material Colors, but you can defin

Jean-Charles Moussé 70 Nov 25, 2022
Create highly customizable, simple, and controllable autocomplete fields for Flutter.

Field Suggestion Installing Depend on it Add this to your package's pubspec.yaml file: dependencies: field_suggestion: <latest_version> Install it Y

Ismael Shakverdiev 21 Oct 18, 2022
⚡️A highly customizable, powerful and easy-to-use alerting library for Flutter.

Flash ⚡️ A highly customizable, powerful and easy-to-use alerting library for Flutter. Website: https://sososdk.github.io/flash Specs This library all

null 368 Jan 5, 2023
A highly customizable Flutter widget to render and interact with JSON objects.

The spreadsheet with superpowers ✨ ! JSON Data Explorer A highly customizable widget to render and interact with JSON objects. Features Expand and col

rows 15 Dec 21, 2022
Add beautiful animated effects & builders in Flutter, via an easy, highly customizable unified API.

Flutter Animate A performant library that makes it simple to add almost any kind of animated effect in Flutter. Pre-built effects, like fade, scale, s

Grant Skinner 352 Dec 25, 2022
Powerful, helpfull, extensible and highly customizable API's that wrap http client to make communication easier with Axelor server with boilerplate code free.

flutter_axelor_sdk Powerful, helpful, extensible and highly customizable API's that wrap http client to make communication easier with Axelor server w

Abd al-Rahman al-Ktefane 5 Dec 25, 2022
Custom dropdown widget allows to add highly customizable widget in your projects with proper open and close animations and also comes with form required validation.

Custom Dropdown Custom Dropdown package lets you add customizable animated dropdown widget. Features Lots of properties to use and customize dropdown

Abdullah Chauhan 22 Dec 29, 2022
A package that provides a highly customizable sheet widget that snaps to different vertical & horizontal positions

Snapping Sheet A package that provides a highly customizable sheet widget that snaps to different vertical & horizontal positions Can adapt to scrolla

Adam Jonsson 364 Dec 6, 2022
The flutter_calendar_widget is highly customizable calendar widget.

flutter_calendar_widget The flutter_calendar_widget is highly customizable calendar widget. Not only can you change the style, but you can also change

dooboolab 4 Jun 24, 2022
A package can help you to change your flutter app's statusbar's color or navigationbar's color programmatically.

flutter_statusbarcolor A package can help you to change your flutter app's statusbar's color or navigationbar's color programmatically. Getting Starte

Zero 201 Nov 10, 2022
Color matching game - A Crossplatform Color Matching Game made with Flutter

color_matching_game A Color Matching Game built with Flutter. It is a simple app made without adding a plug-in. Play by specifying the red, green and

Yusuke Ishimi 6 Nov 21, 2022
A colorful TabBar Flutter library with color animating indicator where each tab has a color. (inspired by SmartNews app)

Flutter Colorful TabBar A colorful TabBar for Flutter where each tab has a color (inspired by SmartNews app). Getting Started Add this to your package

null 8 Jun 17, 2022
Automatically generate profile picture with random first name and background color. But you can still provide pictures if you have them. As the default color, based on the name of the first letter. :fire: :fire: :fire:

FLUTTER PROFILE PICTURE Automatically generate profile picture with random first name and background color. But you can still provide pictures if you

Aditya Dharmawan Saputra 10 Dec 20, 2022
ThemeX is an easy theme manipulation. Only inform primary color and the ThemeX generate all color combination palette for you

ThemeX is an easy theme manipulation basied on Material Design. Only inform primary color and the ThemeX generate all color combination palette for yo

Michael S. Lopes 2 Jan 31, 2022
A Fluter tabview that text color can change with animation and bg color change with animation

float_tab A Fluter tabview that text color can change with animation and bg color change with animation Getting Started This project is a starting poi

ventureli 1 Dec 8, 2021
meg4cyberc4t 11 Oct 24, 2022
Sample Flutter Drawing App which allows the user to draw onto the canvas along with color picker and brush thickness slider.

DrawApp Sample Flutter Drawing App which allows the user to draw onto the canvas along with color picker and brush thickness slider. All code free to

Jake Gough 226 Nov 3, 2022