ColorPicker class

A customizable Material primary color, accent color and custom colors, color picker.

You can configure which Material color swatches can be used for color selection, any combination of both primary/accent in same picker or in separate groups. There is an almost black and white shades picker and it is possible to include a page with custom material and accent swatches using custom names for the custom swatches. It is possible to specify if only the main color in a swatch should be selectable or its shades as well.

There is also a color wheel picker that allows you to select any color and automatically generate a Material primary swatch for the selected color.

If a selected color in the wheel picker belongs to any standard Material color, primary or accent, and any of its shades or any of the provided custom color swatches, then the wheel picker will not calculate swatch colors for such a color. It will instead show all the shades from the selected color's swatch. Selecting the shades on the wheel picker will then select the shade color and show where the color shade is on the HSV wheel.

If a selected on the color wheel, is not any color or shade of the pre-defined ones, then the wheel picker will always generate a new swatch from the selected color, using the selected color as the new primary swatch 500 index midpoint.

Inheritance
Annotations

Constructors

ColorPicker({Key? key, Color color = Colors.blue, required ValueChanged<Color> onColorChanged, ValueChanged<Color>? onColorChangeStart, ValueChanged<Color>? onColorChangeEnd, Map<ColorPickerType, bool> pickersEnabled = const <ColorPickerType, bool>{ColorPickerType.both : false, ColorPickerType.primary : true, ColorPickerType.accent : true, ColorPickerType.bw : false, ColorPickerType.custom : false, ColorPickerType.customSecondary : false, ColorPickerType.wheel : false}, bool enableShadesSelection = true, bool includeIndex850 = false, bool enableTonalPalette = false, CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, EdgeInsetsGeometry padding = const EdgeInsets.all(16), double columnSpacing = 8, double? toolbarSpacing, double? shadesSpacing, bool enableOpacity = false, double opacityTrackHeight = 36, double? opacityTrackWidth, double opacityThumbRadius = 16, ColorPickerActionButtons actionButtons = const ColorPickerActionButtons(), ColorPickerCopyPasteBehavior copyPasteBehavior = const ColorPickerCopyPasteBehavior(), IconData selectedColorIcon = Icons.check, double width = 40, double height = 40, bool tonalColorSameSize = false, double spacing = 4, double runSpacing = 4, double elevation = 0, bool hasBorder = false, double? borderRadius, Color? borderColor, double wheelDiameter = 190, double wheelWidth = 16, double wheelSquarePadding = 0, double wheelSquareBorderRadius = 4, bool wheelHasBorder = false, Widget? title, Widget? heading, Widget? subheading, Widget? tonalSubheading, Widget? wheelSubheading, Widget? recentColorsSubheading, Widget? opacitySubheading, bool showMaterialName = false, TextStyle? materialNameTextStyle, bool showColorName = false, TextStyle? colorNameTextStyle, bool showColorCode = false, bool colorCodeHasColor = false, TextStyle? colorCodeTextStyle, @Deprecated('This property is deprecated and no longer has any function. ' 'It was removed in v2.0.0. To modify the copy icon on the color code ' 'entry field, define the `ColorPickerCopyPasteBehavior(copyIcon: ' 'myIcon)` and provide it via the `copyPasteBehavior` property.') IconData? colorCodeIcon, TextStyle? colorCodePrefixStyle, bool colorCodeReadOnly = false, bool showColorValue = false, bool showRecentColors = false, int maxRecentColors = 5, List<Color> recentColors = const <Color>[], ValueChanged<List<Color>>? onRecentColorsChanged, bool enableTooltips = true, Color? selectedPickerTypeColor, TextStyle? pickerTypeTextStyle, Map<ColorPickerType, String> pickerTypeLabels = const <ColorPickerType, String>{ColorPickerType.primary : _selectPrimaryLabel, ColorPickerType.accent : _selectAccentLabel, ColorPickerType.bw : _selectBlackWhiteLabel, ColorPickerType.both : _selectBothLabel, ColorPickerType.custom : _selectCustomLabel, ColorPickerType.customSecondary : _selectCustomSecondaryLabel, ColorPickerType.wheel : _selectWheelAnyLabel}, Map<ColorSwatch<Object>, String> customColorSwatchesAndNames = const <ColorSwatch<Object>, String>{}, Map<ColorSwatch<Object>, String> customSecondaryColorSwatchesAndNames = const <ColorSwatch<Object>, String>{}})
Default constructor for the color picker.
const

Properties

actionButtons → ColorPickerActionButtons
Used to configure action buttons for the color picker dialog.
final
borderColor → Color?
The color of the 1 dp optional border used on ColorIndicator and on ColorWheelPicker, when each have their border toggle set to true.
final
borderRadius → double?
Border radius of the color indicator items.
final
color → Color
The active color selection when the color picker is created.
final
colorCodeHasColor → bool
When true, the color code entry field uses the currently selected color as its background color.
final
colorCodeIcon → IconData?
Old property, no longer in use. This property is now set via property copyPasteBehavior and ColorPickerCopyPasteBehavior.copyIcon
final
colorCodePrefixStyle → TextStyle?
The TextStyle of the prefix of the color code.
final
colorCodeReadOnly → bool
When true, the color code field is always read only.
final
colorCodeTextStyle → TextStyle?
Text style for the displayed generic color name in the picker.
final
colorNameTextStyle → TextStyle?
Text style for the displayed color name in the picker.
final
columnSpacing → double
Vertical spacing between items in the color picker column.
final
copyPasteBehavior → ColorPickerCopyPasteBehavior
Used to configure the copy paste behavior of the color picker.
final
crossAxisAlignment → CrossAxisAlignment
Cross axis alignment used to layout the main content of the color picker in its column layout.
final
customColorSwatchesAndNames → Map<ColorSwatch<Object>, String>
Color swatch to name map, with custom swatches and their names.
final
customSecondaryColorSwatchesAndNames → Map<ColorSwatch<Object>, String>
Color swatch to name map, with custom swatches and their names.
final
elevation → double
The Material elevation of the color indicator items.
final
enableOpacity → bool
Enable the opacity control for the color value.
final
enableShadesSelection → bool
Set to true to allow selection of color swatch shades.
final
enableTonalPalette → bool
Set to true to allow selection of color tone from a tonal palette.
final
enableTooltips → bool
Set to true to enable all tooltips in this widget.
final
hasBorder → bool
Set to true, to show a 1 dp border around the color indicator items.
final
hashCode → int
The hash code for this object.
no setterinherited
heading → Widget?
Heading widget for the color picker.
final
height → double
Height of the color indicator items.
final
includeIndex850 → bool
There is an extra index 850 used only by grey Material color in Flutter. If you want to include it in the grey color shades selection, then set this property to true.
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
materialNameTextStyle → TextStyle?
Text style for the displayed material color name in the picker.
final
maxRecentColors → int
The maximum numbers of recent colors to show in the list of recent colors.
final
onColorChanged → ValueChanged<Color>
Required ValueChanged callback, called when user selects a new color with new color value.
final
onColorChangeEnd → ValueChanged<Color>?
Optional ValueChanged callback. Called when user ends color selection with the new color value.
final
onColorChangeStart → ValueChanged<Color>?
Optional ValueChanged callback. Called when user starts color selection with current color value.
final
onRecentColorsChanged → ValueChanged<List<Color>>?
Optional callback that returns the current list of recently selected colors.
final
opacitySubheading → Widget?
Subheading widget for the opacity slider.
final
opacityThumbRadius → double
The radius of the thumb on the opacity slider.
final
opacityTrackHeight → double
The height of the opacity slider track.
final
opacityTrackWidth → double?
The width of the opacity slider track.
final
padding → EdgeInsetsGeometry
Padding around the entire color picker content.
final
pickersEnabled → Map<ColorPickerType, bool>
A ColorPickerType to bool map. Defines which pickers are enabled in the color picker's sliding selector and thus available as color pickers.
final
pickerTypeLabels → Map<ColorPickerType, String>
A ColorPickerType to String map that contains labels for the picker type selector.
final
pickerTypeTextStyle → TextStyle?
The TextStyle of the labels in segmented color picker type selector.
final
recentColors → List<Color>
A list with the recently select colors.
final
recentColorsSubheading → Widget?
Subheading widget for the recently used colors.
final
runSpacing → double
The space between the color picker color item rows, when they need to be wrapped to multiple rows.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
selectedColorIcon → IconData
Icon data for the icon used to indicate the selected color.
final
selectedPickerTypeColor → Color?
The color on the thumb of the slider that shows the selected picker type.
final
shadesSpacing → double?
Vertical spacing below the Material-2 based color shades palette.
final
showColorCode → bool
Set to true to show the RGB Hex color code of the selected color.
final
showColorName → bool
Set to true to show an English color name of the selected color.
final
showColorValue → bool
Set to true to show the int Color.value of the selected color.
final
showMaterialName → bool
Set to true to show the Material name and index of the selected color.
final
showRecentColors → bool
Set to true to a list of recently selected colors selection at the bottom of the picker.
final
spacing → double
The horizontal spacing between the color picker indicator items.
final
subheading → Widget?
Subheading widget for the color shades selection.
final
title → Widget?
Title widget for the color picker.
final
tonalColorSameSize → bool
Set to true to make tonal color items same size as the size defined for main and swatch shades indicator items.
final
tonalSubheading → Widget?
Subheading widget for the color tone selection.
final
toolbarSpacing → double?
Vertical spacing below the top toolbar header and action buttons.
final
wheelDiameter → double
Diameter of the HSV based color wheel picker.
final
wheelHasBorder → bool
Set to true to show a 1 dp border around the color wheel.
final
wheelSquareBorderRadius → double
Border radius of the shade square inside the hue wheel.
final
wheelSquarePadding → double
Padding between shade square inside the hue wheel and inner side of the wheel.
final
wheelSubheading → Widget?
Subheading widget for the HSV color wheel picker.
final
wheelWidth → double
The stroke width of the color wheel circle.
final
width → double
Width of the color indicator items.
final

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<ColorPicker>
Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
showPickerDialog(BuildContext context, {Widget? title, EdgeInsetsGeometry titlePadding = EdgeInsets.zero, TextStyle? titleTextStyle, EdgeInsetsGeometry contentPadding = EdgeInsets.zero, EdgeInsetsGeometry? actionsPadding, EdgeInsetsGeometry? buttonPadding, Color? backgroundColor, double? elevation, Color? shadowColor, Color? surfaceTintColor, String? semanticLabel, EdgeInsets insetPadding = const EdgeInsets.symmetric(horizontal: 40, vertical: 24), Clip clipBehavior = Clip.none, ShapeBorder? shape, Color barrierColor = Colors.black12, bool barrierDismissible = true, String? barrierLabel, bool useSafeArea = true, RouteSettings? routeSettings, Offset? anchorPoint, RouteTransitionsBuilder? transitionBuilder, Duration transitionDuration = const Duration(milliseconds: 200), BoxConstraints? constraints}) → Future<bool>
Show the defined ColorPicker in a custom alert dialog.
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

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