flutter_colorpicker

The flutter_colorpicker package provides several different widget types depending on the desired user experience:

• ColorPicker: A versatile picker supporting HSV(HSB), HSL, RGB, and Material color modes.
• MaterialPicker: A picker styled with Material Design principles. It includes a showLabel option (primarily for portrait mode).
• BlockPicker: A picker that presents colors as discrete blocks.
• MultipleChoiceBlockPicker: A picker designed for selecting multiple colors from a predefined list using pickerColors and onColorsChanged.

// Use ColorPicker:
ColorPicker(
  pickerColor: pickerColor,
  onColorChanged: changeColor,
)

// Use MaterialPicker:
MaterialPicker(
  pickerColor: pickerColor,
  onColorChanged: changeColor,
  showLabel: true,
)

// Use BlockPicker:
BlockPicker(
  pickerColor: currentColor,
  onColorChanged: changeColor,
)

// Use MultipleChoiceBlockPicker:
MultipleChoiceBlockPicker(
  pickerColors: currentColors,
  onColorsChanged: changeColors,
)

To implement a color picker in your Flutter application, you can wrap one of the provided picker widgets inside a showDialog using an AlertDialog. You must manage the state of the selected color (e.g., using setState) to update the picker as the user interacts with it. Once the user confirms their selection (e.g., by clicking a 'Got it' button), you can update your application's primary color state and close the dialog.

// create some values
Color pickerColor = Color(0xff443a49);
Color currentColor = Color(0xff443a49);

// ValueChanged<Color> callback
void changeColor(Color color) {
  setState(() => pickerColor = color);
}

// raise the [showDialog] widget
showDialog(
  context: context,
  child: AlertDialog(
    title: const Text('Pick a color!'),
    content: SingleChildScrollView(
      child: ColorPicker(
        pickerColor: pickerColor,
        onColorChanged: changeColor,
      ),
    ),
    actions: <Widget>[
      ElevatedButton(
        child: const Text('Got it'),
        onPressed: () {
          setState(() => currentColor = pickerColor);
          Navigator.of(context).pop();
        },
      ),
    ],
  ),
)

You can synchronize the ColorPicker with an external text field (like TextField or CupertinoTextField) by providing a TextEditingController to the hexInputController parameter.

When the user types a valid hex string, the picker updates automatically. The supported formats are:

• RGB (e.g., FF0000)
• #RGB (e.g., #F00)
• RRGGBB (e.g., FF0000)
• #RRGGBB (e.g., #FF0000)
• AARRGGBB (e.g., FFFF0000)
• #AARRGGBB (e.g., #FFFF0000)

Note: The picker respects the enableAlpha flag; if alpha is disabled, hex inputs with transparency will be converted to non-transparent values.

final textController = TextEditingController(text: '#2F19DB');

// In your widget tree:
Column(
  children: [
    ColorPicker(
      pickerColor: currentColor,
      onColorChanged: changeColor,
      hexInputController: textController,
      enableAlpha: true,
    ),
    CupertinoTextField(
      controller: textController,
      // ... other text field config
    ),
  ],
)

The BlockPicker widget allows users to select a single color from a grid of blocks. You can customize the available colors, the layout of the grid, and the visual shape of the color items.

Parameters

• pickerColor: The currently selected Color.
• onColorChanged: A callback function ValueChanged<Color> triggered when a new color is selected.
• availableColors: A List<Color> of colors to display in the picker. Defaults to a predefined set of 20 colors.
• useInShowDialog: A boolean that affects how the 'current color' state is calculated (useful when the picker is inside a dialog).
• layoutBuilder: A PickerLayoutBuilder function to customize the grid layout.
• itemBuilder: A PickerItemBuilder function to customize the appearance of each color block.

BlockPicker(
  pickerColor: Colors.blue,
  onColorChanged: (color) {
    print('Selected color: $color');
  },
)

The MaterialPicker widget provides a user interface for selecting colors from Material Design palettes. It displays a list of primary color types (e.g., Red, Blue, Green) and, upon selection, shows a list of available shades for that specific color.

Parameters

• pickerColor: The currently selected Color. This is used to initialize the picker's state.
• onColorChanged: A callback function triggered whenever a specific shade is selected. It receives the selected Color.
• onPrimaryChanged: (Optional) A callback function triggered when a new primary color type is selected. It receives the Color representing the primary color.
• enableLabel: (Optional) A boolean that, if true, displays text labels (color names and hex codes) next to the shades. Defaults to false.
• portraitOnly: (Optional) A boolean that forces the picker to use the portrait layout regardless of device orientation. Defaults to false.

MaterialPicker(
  pickerColor: Colors.blue,
  onColorChanged: (Color color) {
    print('Selected color: $color');
  },
  onPrimaryChanged: (Color primaryColor) {
    print('Selected primary color: $primaryColor');
  },
  enableLabel: true,
  portraitOnly: false,
)

The ColorPicker widget accepts several configuration parameters to customize its behavior and appearance:

• pickerColor: The initial color.
• onColorChanged: Callback triggered when the color changes.
• pickerHsvColor: Optional initial HSVColor.
• onHsvColorChanged: Optional callback for HSVColor changes.
• paletteType: Sets the color model (e.g., PaletteType.hsv, PaletteType.hsl, PaletteType.rgbWithBlue).
• enableAlpha: Enables/disables transparency support.
• showLabel: Whether to show color value labels (use empty labelTypes to disable).
• labelTypes: A list of ColorLabelType to display (e.g., ColorLabelType.rgb, ColorLabelType.hsv).
• displayThumbColor: Whether to show the current color on the slider thumb.
• portraitOnly: Forces a portrait layout regardless of device orientation.
• colorPickerWidth: The width of the picker.
• pickerAreaHeightPercent: The height ratio of the color area.
• pickerAreaBorderRadius: Border radius for the color area.
• hexInputBar: Enables/disables the hex input bar.
• hexInputController: A TextEditingController to sync hex text input with the picker.
• colorHistory: A list of previously selected colors.
• onHistoryChanged: Callback when the color history is updated.