ColorPicker

A grid of color swatches: the arrow keys preview a color, and Enter, Space, or a click commits one.

Learn more: Forms & validation

Import: package:fleury/fleury.dart, or package:fleury/fleury_core.dart in browser code.

Usage

ColorPicker(
  value: _color,
  colors: const [
    RgbColor(0xFF, 0x5C, 0x57),
    RgbColor(0xF5, 0xC2, 0x11),
    RgbColor(0x3D, 0xDC, 0x97),
    RgbColor(0x56, 0xC2, 0xFF),
    RgbColor(0xBD, 0x93, 0xF9),
  ],
  onChanged: (color) => setState(() => _color = color),
)

Details

The preview cursor is bracketed with the theme’s focus style while the committed swatch stays marked. The arrow keys, Home, and End move the preview without changing value; Enter or Space commits it, and clicking a swatch commits that swatch. Escape restores the value the picker had when it gained focus. Typing # opens a field for entering any color as a hex code.

Defaults to the 16 base ANSI colors laid out in 2 rows × 8 cols. Pass colors for a custom palette (e.g. a 256-color picker, brand colors, theme variants) and columns to control the grid shape.

Passing null for onChanged disables the picker.

Constructors

ColorPicker()

Parameter	Type	Default	Description
value:	Color	required	Currently-selected color. The first matching entry in colors (or the default palette) becomes the committed cell and initial preview cursor. A color no entry matches, such as one entered as a hex code, marks no cell: the preview cursor starts on the first cell, and the picker’s semantics report the color itself.
onChanged:	void Function(Color color)?	required	Called with the new color when the user commits a swatch (Enter, Space, or a click), enters a hex code after #, or presses Escape to restore the color the picker had when it gained focus.
colors:	List<Color>?	—	Palette to pick from. null uses the 16 base ANSI colors.
columns:	int	8	Grid width — palette cells wrap after this many. Default 8 (matches the natural split of the 16-color ANSI palette into 2 × 8).
swatchWidth:	int	3	Cell width per swatch (≥ 1). Wider swatches read more clearly at the cost of horizontal space.
rowSpacing:	int	0	Blank cell rows between palette rows. Defaults to zero.
showHelp:	bool	true	Show keyboard instructions when focused. Disable when the surrounding panel supplies persistent help and should keep a stable height on focus.
semanticLabel:	String	'Colors'	Label exposed through the semantic app graph for the picker.
semanticColorLabelBuilder:	String Function(Color color, int index)?	—	Optional semantic label builder for custom palette entries.
focusNode:	FocusNode?	—	Focus node used for keyboard navigation.
autofocus:	bool	false	Whether the picker requests focus when mounted.
style:	CellStyle?	—	Base styling for markers, plus optional hover, focus, selected, disabled, and invalid state entries from CellStyle.interactive.

Source

ColorPicker is defined in packages/fleury/lib/src/catalog/color_picker.dart.

Category: Inputs & controls · All widgets

Live demo

colorpicker_example.dart

Restart Run Expand

Example · editable Revert Format

class _ColorPickerExampleState extends State<_ColorPickerExample> {
  Color _c = const RgbColor(0x3D, 0xDC, 0x97);
  @override
  Widget build(BuildContext context) => ColorPicker(
    value: _c,
    onChanged: (c) => setState(() => _c = c),
    colors: const <Color>[
      RgbColor(0xFF, 0x5C, 0x57),
      RgbColor(0xF5, 0xC2, 0x11),
      RgbColor(0x3D, 0xDC, 0x97),
      RgbColor(0x56, 0xC2, 0xFF),
      RgbColor(0xBD, 0x93, 0xF9),
    ],
  );
}

Live preview

Live · interactive

click & type to interact ⓘ how this demo runs ⛶ Expand