ColorPicker class

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

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.

ColorPicker(
  value: const AnsiColor(4),
  onChanged: (c) => setState(() => accent = c),
)

Passing null for onChanged disables the picker.

Inheritance
Available extensions

Constructors

ColorPicker({Key? key, required Color value, required void onChanged(Color color)?, List<Color>? colors, int columns = 8, int swatchWidth = 3, int rowSpacing = 0, bool showHelp = true, String semanticLabel = 'Colors', String semanticColorLabelBuilder(Color color, int index)?, FocusNode? focusNode, bool autofocus = false, CellStyle? style})
const

Properties

autofocus → bool
Whether the picker requests focus when mounted.
final
colors → List<Color>?
Palette to pick from. null uses the 16 base ANSI colors.
final
columns → int
Grid width — palette cells wrap after this many. Default 8 (matches the natural split of the 16-color ANSI palette into 2 × 8).
final
focusNode → FocusNode?
Focus node used for keyboard navigation.
final
hashCode → int
The hash code for this object.
no setterinherited
key → Key?
finalinherited
onChanged → void Function(Color color)?
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.
final
rowSpacing → int
Blank cell rows between palette rows. Defaults to zero.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
semanticColorLabelBuilder → String Function(Color color, int index)?
Optional semantic label builder for custom palette entries.
final
semanticLabel → String
Label exposed through the semantic app graph for the picker.
final
showHelp → bool
Show keyboard instructions when focused. Disable when the surrounding panel supplies persistent help and should keep a stable height on focus.
final
style → CellStyle?
Base styling for markers, plus optional hover, focus, selected, disabled, and invalid state entries from CellStyle.interactive.
final
swatchWidth → int
Cell width per swatch (≥ 1). Wider swatches read more clearly at the cost of horizontal space.
final
value → Color
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.
final

Methods

animate({Duration? duration, Curve? curve, Object? trigger, bool repeat = false}) → Animate

Available on Widget, provided by the AnimateExtension extension

Starts an Animate chain over this widget. duration / curve apply to the whole chain. With no trigger it plays on mount; with a non-null trigger it rests on mount and replays whenever the token changes.
createElement() → StatefulElement
Creates the Element that will mount this widget into the tree.
inherited
createState() → State<ColorPicker>
Creates the mutable state for this widget at the current location in the tree. Called exactly once per StatefulElement instance.
override
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toString() → String
A string representation of this object.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited