flex-color-picker

name	flex-color-picker
description	Use FlexColorPicker to embed or dialog a Material/custom/wheel color picker with optional tonal palettes, opacity, and copy-paste. Use when adding ColorPicker, showColorPickerDialog, ColorIndicator, ColorTools, or ColorPickerCopyPasteBehavior.

Using FlexColorPicker

Copy this skill into a consuming app’s .agents/skills/ or .cursor/skills/. It does not depend on this repository’s AGENTS.md.

Galleries and longer prose: pub.dev/packages/flex_color_picker. Live demo: https://rydmike.com/flexcolorpicker

dependencies:
  flex_color_picker: ^4.0.0

Import the barrel only:

import 'package:flex_color_picker/flex_color_picker.dart';

Do not import package:flex_color_picker/src/... from an app.

Entry points

API	Returns	When
ColorPicker widget	paints in place	Embedded in a page, card, or drawer
ColorPicker.showPickerDialog	Future<bool> (OK / cancel)	You already have a configured ColorPicker
showColorPickerDialog	Future<Color>	Convenience dialog; cancel or dismiss returns the start color

onColorChanged is required. The picker does not own the selected color — the parent must setState (or equivalent). Await dialog calls.

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

final Color result = await showColorPickerDialog(context, currentColor);

Which pickers show

pickersEnabled is a Map<ColorPickerType, bool>. Omitted keys keep their defaults. Types not enabled do not appear.

Default: primary and accent on; both, bw, custom, customSecondary, wheel off.

pickersEnabled: const <ColorPickerType, bool>{
  ColorPickerType.wheel: true, // others keep defaults
},

ColorPickerType.custom / customSecondary also need a non-empty customColorSwatchesAndNames (or the secondary map). An enabled custom picker with an empty map is hidden.

Shades of a selected swatch: enableShadesSelection (default true). Grey index 850: includeIndex850 (default false).

Tonal, opacity, wheel

These are picker features, not FlexSeedScheme ColorScheme generation. Do not call SeedColorScheme.fromSeeds to drive this widget.

• enableTonalPalette (default false) — Material 3 HCT tonal row from the selected color.
• enableOpacity (default false) — alpha slider. Copy strings omit alpha when copyFormat has no alpha channel.
• Wheel: enable ColorPickerType.wheel. Tune wheelDiameter (100–500), wheelWidth, square padding/radius.

Copy-paste

Configure with ColorPickerCopyPasteBehavior. Keyboard shortcuts use Ctrl on Windows/Linux and Command on macOS (ctrlC / ctrlV, default true). Toolbar copy/paste buttons default off. Long-press vs secondary-click menus are off until you set the platform flags (longPressMenu, secondaryMenu, secondaryOnDesktopLongOnDevice, secondaryOnDesktopLongOnDeviceAndWeb).

copyFormat (ColorPickerCopyFormat) is copy-only. Paste parses all formats, plus 3-char #RGB when parseShortHexCode is true.

The copy icon on the code field is ColorPickerCopyPasteBehavior.copyIcon. The old colorCodeIcon parameter was removed in 4.0.0.

Recent colors, names, code field

• showRecentColors (default false) — parent must keep recentColors and handle onRecentColorsChanged. maxRecentColors is 2–20 (default 5).
• showMaterialName / showColorName / showColorCode default false.
• ColorTools static English names can be overwritten at startup for i18n (ColorTools.redName = 'Röd').

Other exported widgets

• ColorIndicator — tappable color chip (also used inside the picker).
• ColorWheelPicker — standalone HSV wheel.
• ColorCodeField — hex edit field.
• Extensions: Color.hex / hexAlpha; String.toColorShort; value32bit / *8bit channels on Color (use these to persist a Color, not deprecated Color.value).

Do not

• Import src/ or construct internal widgets (MainColors, CopyPasteHandler, …)
• Skip onColorChanged or forget to update parent state
• Enable custom without swatch maps
• Use showColorPickerDialog without await
• Treat a tonal row as a ColorScheme seed pipeline