ColorPicker class Null safety

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.wheel : false}, bool enableShadesSelection = true, bool includeIndex850 = false, CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, EdgeInsetsGeometry padding = const EdgeInsets.all(16), double columnSpacing = 8, 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, double spacing = 4, double runSpacing = 4, double elevation = 0, bool hasBorder = false, double? borderRadius, Color? borderColor, double wheelDiameter = 190, double wheelWidth = 16, bool wheelHasBorder = false, Widget? title, Widget? heading, Widget? subheading, 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.wheel : _selectWheelAnyLabel}, Map<ColorSwatch<Object>, String> customColorSwatchesAndNames = 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
@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.'), 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
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
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. [...]
@nonVirtual, read-only, inherited
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. [...]
final, inherited
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.
read-only, inherited
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
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
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
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() → _ColorPickerState
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. [...]
@protected, inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node. [...]
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed. [...]
inherited
showPickerDialog(BuildContext context, {Widget? title, EdgeInsetsGeometry titlePadding = EdgeInsets.zero, TextStyle? titleTextStyle, EdgeInsetsGeometry contentPadding = EdgeInsets.zero, EdgeInsetsGeometry actionsPadding = const EdgeInsets.symmetric(horizontal: 16), EdgeInsetsGeometry buttonPadding = const EdgeInsets.all(16), Color? backgroundColor, double? elevation, String? semanticLabel, EdgeInsets insetPadding = const EdgeInsets.symmetric(horizontal: 40, vertical: 24), Clip clipBehavior = Clip.none, ShapeBorder? shape, bool barrierDismissible = true, Color barrierColor = Colors.black12, bool useSafeArea = true, bool useRootNavigator = true, RouteSettings? routeSettings, 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. [...]
@nonVirtual, inherited