flutterx_color_picker 2.0.0

Material color picker inspired by Chrome DevTools, with HSV area, sliders, HEX and RGB/HSV/HSL fields, Material palettes and color names.

flutterx_color_picker

Material color picker inspired by Chrome DevTools: saturation/value area, one slider per chosen component, HEX and RGB/HSV/HSL fields, Material palettes and the name of the nearest known color. Use it inline in a page or in a dialog.

Install

flutter pub add flutterx_color_picker

import 'package:flutterx_color_picker/flutterx_color_picker.dart';

Inline

ColorPicker(
  tracks: {TrackType.hue, TrackType.alpha},
  initialValue: Colors.teal,
  onChanged: (color) => setState(() => _color = color),
)

tracks chooses the sliders (TrackType: hue, saturation, saturationForHSL, value, lightness, red, green, blue, alpha), shown in iteration order; the default is {hue, alpha}. initialValue is required and may be null, which starts from opaque black. The picker needs a bounded width and, in portrait, a bounded height.

Dialog

final color = await ColorPicker.open(context: context, initialValue: _color);
if (color != null) setState(() => _color = color);

Completes with the chosen color on OK and with null on cancel or when the dialog is dismissed. OK without any change returns initialValue.

Color indicator

ColorIndicator(color: _color, size: 32, shape: BoxShape.rectangle)

A swatch drawn over a chess pattern, so transparency is visible. The shape is a circle by default.

Color name

final affinity = findAffinity(Colors.red.shade500);
affinity.name;                 // 'Red 500'
affinity.exact;                // true
affinity.differencePercentage; // 0 = identical, 100 = opposite RGB corner

findAffinity returns the nearest named color by RGB distance, ignoring alpha. affinity.color is that color with the alpha of the source; toString() gives e.g. #FFF44336: Red 500.

Behavior

• initialValue is read only when the picker is created, as in TextFormField: passing another value later does not change the selection. Give the picker a new key to start over.
• onChanged is called only when the user changes the color to a different one, never on build and not for an edit that leaves the color unchanged.
• The HEX field and the paste button accept 6 (RRGGBB) or 8 (AARRGGBB) digits, with or without #; any other text is ignored.
• The numeric fields are limited to their range: a larger value becomes the maximum, a smaller one 0.
• The palette toggle labels ("Material", "Accent") are not localized; the dialog buttons use MaterialLocalizations (okButtonLabel, cancelButtonLabel).

Claude Code plugin

The repository ships a plugin with skills that teach Claude Code to integrate the library:

/plugin marketplace add https://gitlab.com/dade.sliep/flutterx_color_picker
/plugin install flutterx-color-picker@flutterx-color-picker