Feat/support latest stable flutter (#1874)
* fix: temporarily remove flutter_colorpicker from pub.dev * chore: clone flutter_colorpicker from Github, add a TODO with it * fix: update color_dialog.dart to use color picker package from the lib/src/packages/flutter_colorpicker * refactor(example): remove the old android example and recreate it to get it working with the latest stable version without any warrnings * fix: format flutter_colorpicker to fix CI failure, update the android example project to use latest version of Kotlin, fix AndroidManifest string resources * fix: update the linux example to fix CI failure * ci: update build.yml as an attemp to fix building the Linux application * ci: add a todo in build.yml, remove flutter doctor check * ci: fix a typo * ci: update the name of each steppull/1875/head v9.3.12
Ellet
11 months ago
committed by
GitHub
parent
9599f4b82b
commit
dd23f7aace
22 changed files with 3499 additions and 138 deletions
@ -1,4 +0,0 @@ |
||||
<?xml version="1.0" encoding="utf-8"?> |
||||
<resources> |
||||
<string name="app_name">Flutter Quill Demo</string> |
||||
</resources> |
||||
@ -1 +0,0 @@ |
||||
extensions: |
||||
@ -0,0 +1,9 @@ |
||||
library flutter_colorpicker; |
||||
|
||||
// TODO: temporarily clone https://pub.dev/packages/flutter_colorpicker as it's hasn't been published on pub.dev for a while |
||||
|
||||
export 'src/block_picker.dart'; |
||||
export 'src/colorpicker.dart'; |
||||
export 'src/material_picker.dart'; |
||||
export 'src/palette.dart'; |
||||
export 'src/utils.dart'; |
||||
@ -0,0 +1,211 @@ |
||||
// ignore_for_file: type=lint |
||||
|
||||
/// Blocky Color Picker |
||||
|
||||
library block_colorpicker; |
||||
|
||||
import 'package:flutter/material.dart'; |
||||
import 'utils.dart'; |
||||
|
||||
/// Child widget for layout builder. |
||||
typedef PickerItem = Widget Function(Color color); |
||||
|
||||
/// Customize the layout. |
||||
typedef PickerLayoutBuilder = Widget Function( |
||||
BuildContext context, List<Color> colors, PickerItem child); |
||||
|
||||
/// Customize the item shape. |
||||
typedef PickerItemBuilder = Widget Function( |
||||
Color color, bool isCurrentColor, void Function() changeColor); |
||||
|
||||
// Provide a list of colors for block color picker. |
||||
const List<Color> _defaultColors = [ |
||||
Colors.red, |
||||
Colors.pink, |
||||
Colors.purple, |
||||
Colors.deepPurple, |
||||
Colors.indigo, |
||||
Colors.blue, |
||||
Colors.lightBlue, |
||||
Colors.cyan, |
||||
Colors.teal, |
||||
Colors.green, |
||||
Colors.lightGreen, |
||||
Colors.lime, |
||||
Colors.yellow, |
||||
Colors.amber, |
||||
Colors.orange, |
||||
Colors.deepOrange, |
||||
Colors.brown, |
||||
Colors.grey, |
||||
Colors.blueGrey, |
||||
Colors.black, |
||||
]; |
||||
|
||||
// Provide a layout for [BlockPicker]. |
||||
Widget _defaultLayoutBuilder( |
||||
BuildContext context, List<Color> colors, PickerItem child) { |
||||
Orientation orientation = MediaQuery.of(context).orientation; |
||||
|
||||
return SizedBox( |
||||
width: 300, |
||||
height: orientation == Orientation.portrait ? 360 : 200, |
||||
child: GridView.count( |
||||
crossAxisCount: orientation == Orientation.portrait ? 4 : 6, |
||||
crossAxisSpacing: 5, |
||||
mainAxisSpacing: 5, |
||||
children: [for (Color color in colors) child(color)], |
||||
), |
||||
); |
||||
} |
||||
|
||||
// Provide a shape for [BlockPicker]. |
||||
Widget _defaultItemBuilder( |
||||
Color color, bool isCurrentColor, void Function() changeColor) { |
||||
return Container( |
||||
margin: const EdgeInsets.all(7), |
||||
decoration: BoxDecoration( |
||||
shape: BoxShape.circle, |
||||
color: color, |
||||
boxShadow: [ |
||||
BoxShadow( |
||||
color: color.withOpacity(0.8), |
||||
offset: const Offset(1, 2), |
||||
blurRadius: 5) |
||||
], |
||||
), |
||||
child: Material( |
||||
color: Colors.transparent, |
||||
child: InkWell( |
||||
onTap: changeColor, |
||||
borderRadius: BorderRadius.circular(50), |
||||
child: AnimatedOpacity( |
||||
duration: const Duration(milliseconds: 210), |
||||
opacity: isCurrentColor ? 1 : 0, |
||||
child: Icon(Icons.done, |
||||
color: useWhiteForeground(color) ? Colors.white : Colors.black), |
||||
), |
||||
), |
||||
), |
||||
); |
||||
} |
||||
|
||||
// The blocky color picker you can alter the layout and shape. |
||||
class BlockPicker extends StatefulWidget { |
||||
const BlockPicker({ |
||||
Key? key, |
||||
required this.pickerColor, |
||||
required this.onColorChanged, |
||||
this.availableColors = _defaultColors, |
||||
this.useInShowDialog = true, |
||||
this.layoutBuilder = _defaultLayoutBuilder, |
||||
this.itemBuilder = _defaultItemBuilder, |
||||
}) : super(key: key); |
||||
|
||||
final Color? pickerColor; |
||||
final ValueChanged<Color> onColorChanged; |
||||
final List<Color> availableColors; |
||||
final bool useInShowDialog; |
||||
final PickerLayoutBuilder layoutBuilder; |
||||
final PickerItemBuilder itemBuilder; |
||||
|
||||
@override |
||||
State<StatefulWidget> createState() => _BlockPickerState(); |
||||
} |
||||
|
||||
class _BlockPickerState extends State<BlockPicker> { |
||||
Color? _currentColor; |
||||
|
||||
@override |
||||
void initState() { |
||||
_currentColor = widget.pickerColor; |
||||
super.initState(); |
||||
} |
||||
|
||||
void changeColor(Color color) { |
||||
setState(() => _currentColor = color); |
||||
widget.onColorChanged(color); |
||||
} |
||||
|
||||
@override |
||||
Widget build(BuildContext context) { |
||||
return widget.layoutBuilder( |
||||
context, |
||||
widget.availableColors, |
||||
(Color color) => widget.itemBuilder( |
||||
color, |
||||
(_currentColor != null && |
||||
(widget.useInShowDialog ? true : widget.pickerColor != null)) |
||||
? (_currentColor?.value == color.value) && |
||||
(widget.useInShowDialog |
||||
? true |
||||
: widget.pickerColor?.value == color.value) |
||||
: false, |
||||
() => changeColor(color), |
||||
), |
||||
); |
||||
} |
||||
} |
||||
|
||||
// The blocky color picker you can alter the layout and shape with multiple choice. |
||||
class MultipleChoiceBlockPicker extends StatefulWidget { |
||||
const MultipleChoiceBlockPicker({ |
||||
Key? key, |
||||
required this.pickerColors, |
||||
required this.onColorsChanged, |
||||
this.availableColors = _defaultColors, |
||||
this.useInShowDialog = true, |
||||
this.layoutBuilder = _defaultLayoutBuilder, |
||||
this.itemBuilder = _defaultItemBuilder, |
||||
}) : super(key: key); |
||||
|
||||
final List<Color>? pickerColors; |
||||
final ValueChanged<List<Color>> onColorsChanged; |
||||
final List<Color> availableColors; |
||||
final bool useInShowDialog; |
||||
final PickerLayoutBuilder layoutBuilder; |
||||
final PickerItemBuilder itemBuilder; |
||||
|
||||
@override |
||||
State<StatefulWidget> createState() => _MultipleChoiceBlockPickerState(); |
||||
} |
||||
|
||||
class _MultipleChoiceBlockPickerState extends State<MultipleChoiceBlockPicker> { |
||||
List<Color>? _currentColors; |
||||
|
||||
@override |
||||
void initState() { |
||||
_currentColors = widget.pickerColors; |
||||
super.initState(); |
||||
} |
||||
|
||||
void toggleColor(Color color) { |
||||
setState(() { |
||||
if (_currentColors != null) { |
||||
_currentColors!.contains(color) |
||||
? _currentColors!.remove(color) |
||||
: _currentColors!.add(color); |
||||
} |
||||
}); |
||||
widget.onColorsChanged(_currentColors ?? []); |
||||
} |
||||
|
||||
@override |
||||
Widget build(BuildContext context) { |
||||
return widget.layoutBuilder( |
||||
context, |
||||
widget.availableColors, |
||||
(Color color) => widget.itemBuilder( |
||||
color, |
||||
(_currentColors != null && |
||||
(widget.useInShowDialog ? true : widget.pickerColors != null)) |
||||
? _currentColors!.contains(color) && |
||||
(widget.useInShowDialog |
||||
? true |
||||
: widget.pickerColors!.contains(color)) |
||||
: false, |
||||
() => toggleColor(color), |
||||
), |
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,891 @@ |
||||
// ignore_for_file: type=lint |
||||
|
||||
/// HSV(HSB)/HSL Color Picker example |
||||
/// |
||||
/// You can create your own layout by importing `picker.dart`. |
||||
|
||||
library hsv_picker; |
||||
|
||||
import 'package:flutter/material.dart'; |
||||
import 'palette.dart'; |
||||
import 'utils.dart'; |
||||
|
||||
/// The default layout of Color Picker. |
||||
class ColorPicker extends StatefulWidget { |
||||
const ColorPicker({ |
||||
Key? key, |
||||
required this.pickerColor, |
||||
required this.onColorChanged, |
||||
this.pickerHsvColor, |
||||
this.onHsvColorChanged, |
||||
this.paletteType = PaletteType.hsvWithHue, |
||||
this.enableAlpha = true, |
||||
@Deprecated('Use empty list in [labelTypes] to disable label.') |
||||
this.showLabel = true, |
||||
this.labelTypes = const [ |
||||
ColorLabelType.rgb, |
||||
ColorLabelType.hsv, |
||||
ColorLabelType.hsl |
||||
], |
||||
@Deprecated( |
||||
'Use Theme.of(context).textTheme.bodyText1 & 2 to alter text style.') |
||||
this.labelTextStyle, |
||||
this.displayThumbColor = false, |
||||
this.portraitOnly = false, |
||||
this.colorPickerWidth = 300.0, |
||||
this.pickerAreaHeightPercent = 1.0, |
||||
this.pickerAreaBorderRadius = const BorderRadius.all(Radius.zero), |
||||
this.hexInputBar = false, |
||||
this.hexInputController, |
||||
this.colorHistory, |
||||
this.onHistoryChanged, |
||||
}) : super(key: key); |
||||
|
||||
final Color pickerColor; |
||||
final ValueChanged<Color> onColorChanged; |
||||
final HSVColor? pickerHsvColor; |
||||
final ValueChanged<HSVColor>? onHsvColorChanged; |
||||
final PaletteType paletteType; |
||||
final bool enableAlpha; |
||||
final bool showLabel; |
||||
final List<ColorLabelType> labelTypes; |
||||
final TextStyle? labelTextStyle; |
||||
final bool displayThumbColor; |
||||
final bool portraitOnly; |
||||
final double colorPickerWidth; |
||||
final double pickerAreaHeightPercent; |
||||
final BorderRadius pickerAreaBorderRadius; |
||||
final bool hexInputBar; |
||||
|
||||
/// Allows setting the color using text input, via [TextEditingController]. |
||||
/// |
||||
/// Listens to [String] input and trying to convert it to the valid [Color]. |
||||
/// Contains basic validator, that requires final input to be provided |
||||
/// in one of those formats: |
||||
/// |
||||
/// * RGB |
||||
/// * #RGB |
||||
/// * RRGGBB |
||||
/// * #RRGGBB |
||||
/// * AARRGGBB |
||||
/// * #AARRGGBB |
||||
/// |
||||
/// Where: A stands for Alpha, R for Red, G for Green, and B for blue color. |
||||
/// It will only accept 3/6/8 long HEXs with an optional hash (`#`) at the beginning. |
||||
/// Allowed characters are Latin A-F case insensitive and numbers 0-9. |
||||
/// It does respect the [enableAlpha] flag, so if alpha is disabled, all inputs |
||||
/// with transparency are also converted to non-transparent color values. |
||||
/// ```dart |
||||
/// MaterialButton( |
||||
/// elevation: 3.0, |
||||
/// onPressed: () { |
||||
/// // The initial value can be provided directly to the controller. |
||||
/// final textController = |
||||
/// TextEditingController(text: '#2F19DB'); |
||||
/// showDialog( |
||||
/// context: context, |
||||
/// builder: (BuildContext context) { |
||||
/// return AlertDialog( |
||||
/// scrollable: true, |
||||
/// titlePadding: const EdgeInsets.all(0.0), |
||||
/// contentPadding: const EdgeInsets.all(0.0), |
||||
/// content: Column( |
||||
/// children: [ |
||||
/// ColorPicker( |
||||
/// pickerColor: currentColor, |
||||
/// onColorChanged: changeColor, |
||||
/// colorPickerWidth: 300.0, |
||||
/// pickerAreaHeightPercent: 0.7, |
||||
/// enableAlpha: |
||||
/// true, // hexInputController will respect it too. |
||||
/// displayThumbColor: true, |
||||
/// showLabel: true, |
||||
/// paletteType: PaletteType.hsv, |
||||
/// pickerAreaBorderRadius: const BorderRadius.only( |
||||
/// topLeft: const Radius.circular(2.0), |
||||
/// topRight: const Radius.circular(2.0), |
||||
/// ), |
||||
/// hexInputController: textController, // <- here |
||||
/// portraitOnly: true, |
||||
/// ), |
||||
/// Padding( |
||||
/// padding: const EdgeInsets.all(16), |
||||
/// /* It can be any text field, for example: |
||||
/// * TextField |
||||
/// * TextFormField |
||||
/// * CupertinoTextField |
||||
/// * EditableText |
||||
/// * any text field from 3-rd party package |
||||
/// * your own text field |
||||
/// so basically anything that supports/uses |
||||
/// a TextEditingController for an editable text. |
||||
/// */ |
||||
/// child: CupertinoTextField( |
||||
/// controller: textController, |
||||
/// // Everything below is purely optional. |
||||
/// prefix: Padding( |
||||
/// padding: const EdgeInsets.only(left: 8), |
||||
/// child: const Icon(Icons.tag), |
||||
/// ), |
||||
/// suffix: IconButton( |
||||
/// icon: |
||||
/// const Icon(Icons.content_paste_rounded), |
||||
/// onPressed: () async => |
||||
/// copyToClipboard(textController.text), |
||||
/// ), |
||||
/// autofocus: true, |
||||
/// maxLength: 9, |
||||
/// inputFormatters: [ |
||||
/// // Any custom input formatter can be passed |
||||
/// // here or use any Form validator you want. |
||||
/// UpperCaseTextFormatter(), |
||||
/// FilteringTextInputFormatter.allow( |
||||
/// RegExp(kValidHexPattern)), |
||||
/// ], |
||||
/// ), |
||||
/// ) |
||||
/// ], |
||||
/// ), |
||||
/// ); |
||||
/// }, |
||||
/// ); |
||||
/// }, |
||||
/// child: const Text('Change me via text input'), |
||||
/// color: currentColor, |
||||
/// textColor: useWhiteForeground(currentColor) |
||||
/// ? const Color(0xffffffff) |
||||
/// : const Color(0xff000000), |
||||
/// ), |
||||
/// ``` |
||||
/// |
||||
/// Do not forget to `dispose()` your [TextEditingController] if you creating |
||||
/// it inside any kind of [StatefulWidget]'s [State]. |
||||
/// Reference: https://en.wikipedia.org/wiki/Web_colors#Hex_triplet |
||||
final TextEditingController? hexInputController; |
||||
final List<Color>? colorHistory; |
||||
final ValueChanged<List<Color>>? onHistoryChanged; |
||||
|
||||
@override |
||||
_ColorPickerState createState() => _ColorPickerState(); |
||||
} |
||||
|
||||
class _ColorPickerState extends State<ColorPicker> { |
||||
HSVColor currentHsvColor = const HSVColor.fromAHSV(0.0, 0.0, 0.0, 0.0); |
||||
List<Color> colorHistory = []; |
||||
|
||||
@override |
||||
void initState() { |
||||
currentHsvColor = (widget.pickerHsvColor != null) |
||||
? widget.pickerHsvColor as HSVColor |
||||
: HSVColor.fromColor(widget.pickerColor); |
||||
// If there's no initial text in `hexInputController`, |
||||
if (widget.hexInputController?.text.isEmpty == true) { |
||||
// set it to the current's color HEX value. |
||||
widget.hexInputController?.text = colorToHex( |
||||
currentHsvColor.toColor(), |
||||
enableAlpha: widget.enableAlpha, |
||||
); |
||||
} |
||||
// Listen to the text input, If there is an `hexInputController` provided. |
||||
widget.hexInputController?.addListener(colorPickerTextInputListener); |
||||
if (widget.colorHistory != null && widget.onHistoryChanged != null) { |
||||
colorHistory = widget.colorHistory ?? []; |
||||
} |
||||
super.initState(); |
||||
} |
||||
|
||||
@override |
||||
void didUpdateWidget(ColorPicker oldWidget) { |
||||
super.didUpdateWidget(oldWidget); |
||||
currentHsvColor = (widget.pickerHsvColor != null) |
||||
? widget.pickerHsvColor as HSVColor |
||||
: HSVColor.fromColor(widget.pickerColor); |
||||
} |
||||
|
||||
void colorPickerTextInputListener() { |
||||
// It can't be null really, since it's only listening if the controller |
||||
// is provided, but it may help to calm the Dart analyzer in the future. |
||||
if (widget.hexInputController == null) return; |
||||
// If a user is inserting/typing any text — try to get the color value from it, |
||||
// and interpret its transparency, dependent on the widget's settings. |
||||
final Color? color = colorFromHex(widget.hexInputController!.text, |
||||
enableAlpha: widget.enableAlpha); |
||||
// If it's the valid color: |
||||
if (color != null) { |
||||
// set it as the current color and |
||||
setState(() => currentHsvColor = HSVColor.fromColor(color)); |
||||
// notify with a callback. |
||||
widget.onColorChanged(color); |
||||
if (widget.onHsvColorChanged != null) |
||||
widget.onHsvColorChanged!(currentHsvColor); |
||||
} |
||||
} |
||||
|
||||
@override |
||||
void dispose() { |
||||
widget.hexInputController?.removeListener(colorPickerTextInputListener); |
||||
super.dispose(); |
||||
} |
||||
|
||||
Widget colorPickerSlider(TrackType trackType) { |
||||
return ColorPickerSlider( |
||||
trackType, |
||||
currentHsvColor, |
||||
(HSVColor color) { |
||||
// Update text in `hexInputController` if provided. |
||||
widget.hexInputController?.text = |
||||
colorToHex(color.toColor(), enableAlpha: widget.enableAlpha); |
||||
setState(() => currentHsvColor = color); |
||||
widget.onColorChanged(currentHsvColor.toColor()); |
||||
if (widget.onHsvColorChanged != null) |
||||
widget.onHsvColorChanged!(currentHsvColor); |
||||
}, |
||||
displayThumbColor: widget.displayThumbColor, |
||||
); |
||||
} |
||||
|
||||
void onColorChanging(HSVColor color) { |
||||
// Update text in `hexInputController` if provided. |
||||
widget.hexInputController?.text = |
||||
colorToHex(color.toColor(), enableAlpha: widget.enableAlpha); |
||||
setState(() => currentHsvColor = color); |
||||
widget.onColorChanged(currentHsvColor.toColor()); |
||||
if (widget.onHsvColorChanged != null) |
||||
widget.onHsvColorChanged!(currentHsvColor); |
||||
} |
||||
|
||||
Widget colorPicker() { |
||||
return ClipRRect( |
||||
borderRadius: widget.pickerAreaBorderRadius, |
||||
child: Padding( |
||||
padding: |
||||
EdgeInsets.all(widget.paletteType == PaletteType.hueWheel ? 10 : 0), |
||||
child: ColorPickerArea( |
||||
currentHsvColor, onColorChanging, widget.paletteType), |
||||
), |
||||
); |
||||
} |
||||
|
||||
Widget sliderByPaletteType() { |
||||
switch (widget.paletteType) { |
||||
case PaletteType.hsv: |
||||
case PaletteType.hsvWithHue: |
||||
case PaletteType.hsl: |
||||
case PaletteType.hslWithHue: |
||||
return colorPickerSlider(TrackType.hue); |
||||
case PaletteType.hsvWithValue: |
||||
case PaletteType.hueWheel: |
||||
return colorPickerSlider(TrackType.value); |
||||
case PaletteType.hsvWithSaturation: |
||||
return colorPickerSlider(TrackType.saturation); |
||||
case PaletteType.hslWithLightness: |
||||
return colorPickerSlider(TrackType.lightness); |
||||
case PaletteType.hslWithSaturation: |
||||
return colorPickerSlider(TrackType.saturationForHSL); |
||||
case PaletteType.rgbWithBlue: |
||||
return colorPickerSlider(TrackType.blue); |
||||
case PaletteType.rgbWithGreen: |
||||
return colorPickerSlider(TrackType.green); |
||||
case PaletteType.rgbWithRed: |
||||
return colorPickerSlider(TrackType.red); |
||||
default: |
||||
return const SizedBox(); |
||||
} |
||||
} |
||||
|
||||
@override |
||||
Widget build(BuildContext context) { |
||||
if (MediaQuery.of(context).orientation == Orientation.portrait || |
||||
widget.portraitOnly) { |
||||
return Column( |
||||
children: <Widget>[ |
||||
SizedBox( |
||||
width: widget.colorPickerWidth, |
||||
height: widget.colorPickerWidth * widget.pickerAreaHeightPercent, |
||||
child: colorPicker(), |
||||
), |
||||
Padding( |
||||
padding: const EdgeInsets.fromLTRB(15.0, 5.0, 10.0, 5.0), |
||||
child: Row( |
||||
mainAxisAlignment: MainAxisAlignment.center, |
||||
children: <Widget>[ |
||||
GestureDetector( |
||||
onTap: () => setState(() { |
||||
if (widget.onHistoryChanged != null && |
||||
!colorHistory.contains(currentHsvColor.toColor())) { |
||||
colorHistory.add(currentHsvColor.toColor()); |
||||
widget.onHistoryChanged!(colorHistory); |
||||
} |
||||
}), |
||||
child: ColorIndicator(currentHsvColor), |
||||
), |
||||
Expanded( |
||||
child: Column( |
||||
children: <Widget>[ |
||||
SizedBox( |
||||
height: 40.0, |
||||
width: widget.colorPickerWidth - 75.0, |
||||
child: sliderByPaletteType()), |
||||
if (widget.enableAlpha) |
||||
SizedBox( |
||||
height: 40.0, |
||||
width: widget.colorPickerWidth - 75.0, |
||||
child: colorPickerSlider(TrackType.alpha), |
||||
), |
||||
], |
||||
), |
||||
), |
||||
], |
||||
), |
||||
), |
||||
if (colorHistory.isNotEmpty) |
||||
SizedBox( |
||||
width: widget.colorPickerWidth, |
||||
height: 50, |
||||
child: |
||||
ListView(scrollDirection: Axis.horizontal, children: <Widget>[ |
||||
for (Color color in colorHistory) |
||||
Padding( |
||||
key: Key(color.hashCode.toString()), |
||||
padding: const EdgeInsets.fromLTRB(15, 0, 0, 10), |
||||
child: Center( |
||||
child: GestureDetector( |
||||
onTap: () => onColorChanging(HSVColor.fromColor(color)), |
||||
child: ColorIndicator(HSVColor.fromColor(color), |
||||
width: 30, height: 30), |
||||
), |
||||
), |
||||
), |
||||
const SizedBox(width: 15), |
||||
]), |
||||
), |
||||
if (widget.showLabel && widget.labelTypes.isNotEmpty) |
||||
FittedBox( |
||||
child: ColorPickerLabel( |
||||
currentHsvColor, |
||||
enableAlpha: widget.enableAlpha, |
||||
textStyle: widget.labelTextStyle, |
||||
colorLabelTypes: widget.labelTypes, |
||||
), |
||||
), |
||||
if (widget.hexInputBar) |
||||
ColorPickerInput( |
||||
currentHsvColor.toColor(), |
||||
(Color color) { |
||||
setState(() => currentHsvColor = HSVColor.fromColor(color)); |
||||
widget.onColorChanged(currentHsvColor.toColor()); |
||||
if (widget.onHsvColorChanged != null) |
||||
widget.onHsvColorChanged!(currentHsvColor); |
||||
}, |
||||
enableAlpha: widget.enableAlpha, |
||||
embeddedText: false, |
||||
), |
||||
const SizedBox(height: 20.0), |
||||
], |
||||
); |
||||
} else { |
||||
return Row( |
||||
children: <Widget>[ |
||||
SizedBox( |
||||
width: widget.colorPickerWidth, |
||||
height: widget.colorPickerWidth * widget.pickerAreaHeightPercent, |
||||
child: colorPicker()), |
||||
Column( |
||||
children: <Widget>[ |
||||
Row( |
||||
children: <Widget>[ |
||||
const SizedBox(width: 20.0), |
||||
GestureDetector( |
||||
onTap: () => setState(() { |
||||
if (widget.onHistoryChanged != null && |
||||
!colorHistory.contains(currentHsvColor.toColor())) { |
||||
colorHistory.add(currentHsvColor.toColor()); |
||||
widget.onHistoryChanged!(colorHistory); |
||||
} |
||||
}), |
||||
child: ColorIndicator(currentHsvColor), |
||||
), |
||||
Column( |
||||
children: <Widget>[ |
||||
SizedBox( |
||||
height: 40.0, |
||||
width: 260.0, |
||||
child: sliderByPaletteType()), |
||||
if (widget.enableAlpha) |
||||
SizedBox( |
||||
height: 40.0, |
||||
width: 260.0, |
||||
child: colorPickerSlider(TrackType.alpha)), |
||||
], |
||||
), |
||||
const SizedBox(width: 10.0), |
||||
], |
||||
), |
||||
if (colorHistory.isNotEmpty) |
||||
SizedBox( |
||||
width: widget.colorPickerWidth, |
||||
height: 50, |
||||
child: ListView( |
||||
scrollDirection: Axis.horizontal, |
||||
children: <Widget>[ |
||||
for (Color color in colorHistory) |
||||
Padding( |
||||
key: Key(color.hashCode.toString()), |
||||
padding: const EdgeInsets.fromLTRB(15, 18, 0, 0), |
||||
child: Center( |
||||
child: GestureDetector( |
||||
onTap: () => |
||||
onColorChanging(HSVColor.fromColor(color)), |
||||
onLongPress: () { |
||||
if (colorHistory.remove(color)) { |
||||
widget.onHistoryChanged!(colorHistory); |
||||
setState(() {}); |
||||
} |
||||
}, |
||||
child: ColorIndicator(HSVColor.fromColor(color), |
||||
width: 30, height: 30), |
||||
), |
||||
), |
||||
), |
||||
const SizedBox(width: 15), |
||||
]), |
||||
), |
||||
const SizedBox(height: 20.0), |
||||
if (widget.showLabel && widget.labelTypes.isNotEmpty) |
||||
FittedBox( |
||||
child: ColorPickerLabel( |
||||
currentHsvColor, |
||||
enableAlpha: widget.enableAlpha, |
||||
textStyle: widget.labelTextStyle, |
||||
colorLabelTypes: widget.labelTypes, |
||||
), |
||||
), |
||||
if (widget.hexInputBar) |
||||
ColorPickerInput( |
||||
currentHsvColor.toColor(), |
||||
(Color color) { |
||||
setState(() => currentHsvColor = HSVColor.fromColor(color)); |
||||
widget.onColorChanged(currentHsvColor.toColor()); |
||||
if (widget.onHsvColorChanged != null) |
||||
widget.onHsvColorChanged!(currentHsvColor); |
||||
}, |
||||
enableAlpha: widget.enableAlpha, |
||||
embeddedText: false, |
||||
), |
||||
const SizedBox(height: 5), |
||||
], |
||||
), |
||||
], |
||||
); |
||||
} |
||||
} |
||||
} |
||||
|
||||
/// The Color Picker with sliders only. Support HSV, HSL and RGB color model. |
||||
class SlidePicker extends StatefulWidget { |
||||
const SlidePicker({ |
||||
Key? key, |
||||
required this.pickerColor, |
||||
required this.onColorChanged, |
||||
this.colorModel = ColorModel.rgb, |
||||
this.enableAlpha = true, |
||||
this.sliderSize = const Size(260, 40), |
||||
this.showSliderText = true, |
||||
@Deprecated( |
||||
'Use Theme.of(context).textTheme.bodyText1 & 2 to alter text style.') |
||||
this.sliderTextStyle, |
||||
this.showParams = true, |
||||
@Deprecated('Use empty list in [labelTypes] to disable label.') |
||||
this.showLabel = true, |
||||
this.labelTypes = const [], |
||||
@Deprecated( |
||||
'Use Theme.of(context).textTheme.bodyText1 & 2 to alter text style.') |
||||
this.labelTextStyle, |
||||
this.showIndicator = true, |
||||
this.indicatorSize = const Size(280, 50), |
||||
this.indicatorAlignmentBegin = const Alignment(-1.0, -3.0), |
||||
this.indicatorAlignmentEnd = const Alignment(1.0, 3.0), |
||||
this.displayThumbColor = true, |
||||
this.indicatorBorderRadius = const BorderRadius.all(Radius.zero), |
||||
}) : super(key: key); |
||||
|
||||
final Color pickerColor; |
||||
final ValueChanged<Color> onColorChanged; |
||||
final ColorModel colorModel; |
||||
final bool enableAlpha; |
||||
final Size sliderSize; |
||||
final bool showSliderText; |
||||
final TextStyle? sliderTextStyle; |
||||
final bool showLabel; |
||||
final bool showParams; |
||||
final List<ColorLabelType> labelTypes; |
||||
final TextStyle? labelTextStyle; |
||||
final bool showIndicator; |
||||
final Size indicatorSize; |
||||
final AlignmentGeometry indicatorAlignmentBegin; |
||||
final AlignmentGeometry indicatorAlignmentEnd; |
||||
final bool displayThumbColor; |
||||
final BorderRadius indicatorBorderRadius; |
||||
|
||||
@override |
||||
State<StatefulWidget> createState() => _SlidePickerState(); |
||||
} |
||||
|
||||
class _SlidePickerState extends State<SlidePicker> { |
||||
HSVColor currentHsvColor = const HSVColor.fromAHSV(0.0, 0.0, 0.0, 0.0); |
||||
|
||||
@override |
||||
void initState() { |
||||
super.initState(); |
||||
currentHsvColor = HSVColor.fromColor(widget.pickerColor); |
||||
} |
||||
|
||||
@override |
||||
void didUpdateWidget(SlidePicker oldWidget) { |
||||
super.didUpdateWidget(oldWidget); |
||||
currentHsvColor = HSVColor.fromColor(widget.pickerColor); |
||||
} |
||||
|
||||
Widget colorPickerSlider(TrackType trackType) { |
||||
return ColorPickerSlider( |
||||
trackType, |
||||
currentHsvColor, |
||||
(HSVColor color) { |
||||
setState(() => currentHsvColor = color); |
||||
widget.onColorChanged(currentHsvColor.toColor()); |
||||
}, |
||||
displayThumbColor: widget.displayThumbColor, |
||||
fullThumbColor: true, |
||||
); |
||||
} |
||||
|
||||
Widget indicator() { |
||||
return ClipRRect( |
||||
borderRadius: widget.indicatorBorderRadius, |
||||
clipBehavior: Clip.antiAliasWithSaveLayer, |
||||
child: GestureDetector( |
||||
onTap: () { |
||||
setState( |
||||
() => currentHsvColor = HSVColor.fromColor(widget.pickerColor)); |
||||
widget.onColorChanged(currentHsvColor.toColor()); |
||||
}, |
||||
child: Container( |
||||
width: widget.indicatorSize.width, |
||||
height: widget.indicatorSize.height, |
||||
margin: const EdgeInsets.only(bottom: 15.0), |
||||
foregroundDecoration: BoxDecoration( |
||||
gradient: LinearGradient( |
||||
colors: [ |
||||
widget.pickerColor, |
||||
widget.pickerColor, |
||||
currentHsvColor.toColor(), |
||||
currentHsvColor.toColor(), |
||||
], |
||||
begin: widget.indicatorAlignmentBegin, |
||||
end: widget.indicatorAlignmentEnd, |
||||
stops: const [0.0, 0.5, 0.5, 1.0], |
||||
), |
||||
), |
||||
child: const CustomPaint(painter: CheckerPainter()), |
||||
), |
||||
), |
||||
); |
||||
} |
||||
|
||||
String getColorParams(int pos) { |
||||
assert(pos >= 0 && pos < 4); |
||||
if (widget.colorModel == ColorModel.rgb) { |
||||
final Color color = currentHsvColor.toColor(); |
||||
return [ |
||||
color.red.toString(), |
||||
color.green.toString(), |
||||
color.blue.toString(), |
||||
'${(color.opacity * 100).round()}', |
||||
][pos]; |
||||
} else if (widget.colorModel == ColorModel.hsv) { |
||||
return [ |
||||
currentHsvColor.hue.round().toString(), |
||||
(currentHsvColor.saturation * 100).round().toString(), |
||||
(currentHsvColor.value * 100).round().toString(), |
||||
(currentHsvColor.alpha * 100).round().toString(), |
||||
][pos]; |
||||
} else if (widget.colorModel == ColorModel.hsl) { |
||||
HSLColor hslColor = hsvToHsl(currentHsvColor); |
||||
return [ |
||||
hslColor.hue.round().toString(), |
||||
(hslColor.saturation * 100).round().toString(), |
||||
(hslColor.lightness * 100).round().toString(), |
||||
(currentHsvColor.alpha * 100).round().toString(), |
||||
][pos]; |
||||
} else { |
||||
return '??'; |
||||
} |
||||
} |
||||
|
||||
@override |
||||
Widget build(BuildContext context) { |
||||
double fontSize = 14; |
||||
if (widget.labelTextStyle != null && |
||||
widget.labelTextStyle?.fontSize != null) { |
||||
fontSize = widget.labelTextStyle?.fontSize ?? 14; |
||||
} |
||||
final List<TrackType> trackTypes = [ |
||||
if (widget.colorModel == ColorModel.hsv) ...[ |
||||
TrackType.hue, |
||||
TrackType.saturation, |
||||
TrackType.value |
||||
], |
||||
if (widget.colorModel == ColorModel.hsl) ...[ |
||||
TrackType.hue, |
||||
TrackType.saturationForHSL, |
||||
TrackType.lightness |
||||
], |
||||
if (widget.colorModel == ColorModel.rgb) ...[ |
||||
TrackType.red, |
||||
TrackType.green, |
||||
TrackType.blue |
||||
], |
||||
if (widget.enableAlpha) ...[TrackType.alpha], |
||||
]; |
||||
List<SizedBox> sliders = [ |
||||
for (TrackType trackType in trackTypes) |
||||
SizedBox( |
||||
width: widget.sliderSize.width, |
||||
height: widget.sliderSize.height, |
||||
child: Row( |
||||
children: <Widget>[ |
||||
if (widget.showSliderText) |
||||
Padding( |
||||
padding: const EdgeInsets.symmetric(horizontal: 10.0), |
||||
child: Text( |
||||
trackType.toString().split('.').last[0].toUpperCase(), |
||||
style: widget.sliderTextStyle ?? |
||||
Theme.of(context).textTheme.bodyLarge, |
||||
), |
||||
), |
||||
Expanded(child: colorPickerSlider(trackType)), |
||||
if (widget.showParams) |
||||
ConstrainedBox( |
||||
constraints: BoxConstraints(minWidth: fontSize * 2 + 5), |
||||
child: Text( |
||||
getColorParams(trackTypes.indexOf(trackType)), |
||||
style: widget.sliderTextStyle ?? |
||||
Theme.of(context).textTheme.bodyMedium, |
||||
textAlign: TextAlign.right, |
||||
), |
||||
), |
||||
], |
||||
), |
||||
), |
||||
]; |
||||
|
||||
return Column( |
||||
mainAxisAlignment: MainAxisAlignment.center, |
||||
crossAxisAlignment: CrossAxisAlignment.center, |
||||
children: <Widget>[ |
||||
if (widget.showIndicator) indicator(), |
||||
if (!widget.showIndicator) const SizedBox(height: 20), |
||||
...sliders, |
||||
const SizedBox(height: 20.0), |
||||
if (widget.showLabel && widget.labelTypes.isNotEmpty) |
||||
Padding( |
||||
padding: const EdgeInsets.only(bottom: 20.0), |
||||
child: ColorPickerLabel( |
||||
currentHsvColor, |
||||
enableAlpha: widget.enableAlpha, |
||||
textStyle: widget.labelTextStyle, |
||||
colorLabelTypes: widget.labelTypes, |
||||
), |
||||
), |
||||
], |
||||
); |
||||
} |
||||
} |
||||
|
||||
/// The Color Picker with HUE Ring & HSV model. |
||||
class HueRingPicker extends StatefulWidget { |
||||
const HueRingPicker({ |
||||
Key? key, |
||||
required this.pickerColor, |
||||
required this.onColorChanged, |
||||
this.portraitOnly = false, |
||||
this.colorPickerHeight = 250.0, |
||||
this.hueRingStrokeWidth = 20.0, |
||||
this.enableAlpha = false, |
||||
this.displayThumbColor = true, |
||||
this.pickerAreaBorderRadius = const BorderRadius.all(Radius.zero), |
||||
}) : super(key: key); |
||||
|
||||
final Color pickerColor; |
||||
final ValueChanged<Color> onColorChanged; |
||||
final bool portraitOnly; |
||||
final double colorPickerHeight; |
||||
final double hueRingStrokeWidth; |
||||
final bool enableAlpha; |
||||
final bool displayThumbColor; |
||||
final BorderRadius pickerAreaBorderRadius; |
||||
|
||||
@override |
||||
_HueRingPickerState createState() => _HueRingPickerState(); |
||||
} |
||||
|
||||
class _HueRingPickerState extends State<HueRingPicker> { |
||||
HSVColor currentHsvColor = const HSVColor.fromAHSV(0.0, 0.0, 0.0, 0.0); |
||||
|
||||
@override |
||||
void initState() { |
||||
currentHsvColor = HSVColor.fromColor(widget.pickerColor); |
||||
super.initState(); |
||||
} |
||||
|
||||
@override |
||||
void didUpdateWidget(HueRingPicker oldWidget) { |
||||
super.didUpdateWidget(oldWidget); |
||||
currentHsvColor = HSVColor.fromColor(widget.pickerColor); |
||||
} |
||||
|
||||
void onColorChanging(HSVColor color) { |
||||
setState(() => currentHsvColor = color); |
||||
widget.onColorChanged(currentHsvColor.toColor()); |
||||
} |
||||
|
||||
@override |
||||
Widget build(BuildContext context) { |
||||
if (MediaQuery.of(context).orientation == Orientation.portrait || |
||||
widget.portraitOnly) { |
||||
return Column( |
||||
children: <Widget>[ |
||||
ClipRRect( |
||||
borderRadius: widget.pickerAreaBorderRadius, |
||||
child: Padding( |
||||
padding: const EdgeInsets.all(15), |
||||
child: Stack( |
||||
alignment: AlignmentDirectional.center, |
||||
children: <Widget>[ |
||||
SizedBox( |
||||
width: widget.colorPickerHeight, |
||||
height: widget.colorPickerHeight, |
||||
child: ColorPickerHueRing( |
||||
currentHsvColor, |
||||
onColorChanging, |
||||
displayThumbColor: widget.displayThumbColor, |
||||
strokeWidth: widget.hueRingStrokeWidth, |
||||
), |
||||
), |
||||
SizedBox( |
||||
width: widget.colorPickerHeight / 1.6, |
||||
height: widget.colorPickerHeight / 1.6, |
||||
child: ColorPickerArea( |
||||
currentHsvColor, onColorChanging, PaletteType.hsv), |
||||
) |
||||
]), |
||||
), |
||||
), |
||||
if (widget.enableAlpha) |
||||
SizedBox( |
||||
height: 40.0, |
||||
width: widget.colorPickerHeight, |
||||
child: ColorPickerSlider( |
||||
TrackType.alpha, |
||||
currentHsvColor, |
||||
onColorChanging, |
||||
displayThumbColor: widget.displayThumbColor, |
||||
), |
||||
), |
||||
Padding( |
||||
padding: const EdgeInsets.fromLTRB(15.0, 5.0, 10.0, 5.0), |
||||
child: Row( |
||||
mainAxisAlignment: MainAxisAlignment.center, |
||||
children: <Widget>[ |
||||
const SizedBox(width: 10), |
||||
ColorIndicator(currentHsvColor), |
||||
Expanded( |
||||
child: Padding( |
||||
padding: const EdgeInsets.fromLTRB(0, 5, 0, 20), |
||||
child: ColorPickerInput( |
||||
currentHsvColor.toColor(), |
||||
(Color color) { |
||||
setState( |
||||
() => currentHsvColor = HSVColor.fromColor(color)); |
||||
widget.onColorChanged(currentHsvColor.toColor()); |
||||
}, |
||||
enableAlpha: widget.enableAlpha, |
||||
embeddedText: true, |
||||
), |
||||
), |
||||
), |
||||
], |
||||
), |
||||
), |
||||
], |
||||
); |
||||
} else { |
||||
return Row( |
||||
children: <Widget>[ |
||||
Expanded( |
||||
child: SizedBox( |
||||
width: 300.0, |
||||
height: widget.colorPickerHeight, |
||||
child: ClipRRect( |
||||
borderRadius: widget.pickerAreaBorderRadius, |
||||
child: ColorPickerArea( |
||||
currentHsvColor, onColorChanging, PaletteType.hsv), |
||||
), |
||||
), |
||||
), |
||||
ClipRRect( |
||||
borderRadius: widget.pickerAreaBorderRadius, |
||||
child: Padding( |
||||
padding: const EdgeInsets.all(15), |
||||
child: Stack( |
||||
alignment: AlignmentDirectional.topCenter, |
||||
children: <Widget>[ |
||||
SizedBox( |
||||
width: widget.colorPickerHeight - |
||||
widget.hueRingStrokeWidth * 2, |
||||
height: widget.colorPickerHeight - |
||||
widget.hueRingStrokeWidth * 2, |
||||
child: ColorPickerHueRing( |
||||
currentHsvColor, onColorChanging, |
||||
strokeWidth: widget.hueRingStrokeWidth), |
||||
), |
||||
Column( |
||||
children: [ |
||||
SizedBox(height: widget.colorPickerHeight / 8.5), |
||||
ColorIndicator(currentHsvColor), |
||||
const SizedBox(height: 10), |
||||
ColorPickerInput( |
||||
currentHsvColor.toColor(), |
||||
(Color color) { |
||||
setState(() => |
||||
currentHsvColor = HSVColor.fromColor(color)); |
||||
widget.onColorChanged(currentHsvColor.toColor()); |
||||
}, |
||||
enableAlpha: widget.enableAlpha, |
||||
embeddedText: true, |
||||
disable: true, |
||||
), |
||||
if (widget.enableAlpha) const SizedBox(height: 5), |
||||
if (widget.enableAlpha) |
||||
SizedBox( |
||||
height: 40.0, |
||||
width: (widget.colorPickerHeight - |
||||
widget.hueRingStrokeWidth * 2) / |
||||
2, |
||||
child: ColorPickerSlider( |
||||
TrackType.alpha, |
||||
currentHsvColor, |
||||
onColorChanging, |
||||
displayThumbColor: true, |
||||
), |
||||
), |
||||
], |
||||
), |
||||
]), |
||||
), |
||||
), |
||||
], |
||||
); |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,172 @@ |
||||
// ignore_for_file: type=lint |
||||
|
||||
import 'dart:ui'; |
||||
|
||||
/// X11 Colors |
||||
/// |
||||
/// https://en.wikipedia.org/wiki/X11_color_names |
||||
|
||||
const Map<String, Color> x11Colors = { |
||||
'aliceblue': Color(0xfff0f8ff), |
||||
'antiquewhite': Color(0xfffaebd7), |
||||
'aqua': Color(0xff00ffff), |
||||
'aquamarine': Color(0xff7fffd4), |
||||
'azure': Color(0xfff0ffff), |
||||
'beige': Color(0xfff5f5dc), |
||||
'bisque': Color(0xffffe4c4), |
||||
'black': Color(0xff000000), |
||||
'blanchedalmond': Color(0xffffebcd), |
||||
'blue': Color(0xff0000ff), |
||||
'blueviolet': Color(0xff8a2be2), |
||||
'brown': Color(0xffa52a2a), |
||||
'burlywood': Color(0xffdeb887), |
||||
'cadetblue': Color(0xff5f9ea0), |
||||
'chartreuse': Color(0xff7fff00), |
||||
'chocolate': Color(0xffd2691e), |
||||
'coral': Color(0xffff7f50), |
||||
'cornflower': Color(0xff6495ed), |
||||
'cornflowerblue': Color(0xff6495ed), |
||||
'cornsilk': Color(0xfffff8dc), |
||||
'crimson': Color(0xffdc143c), |
||||
'cyan': Color(0xff00ffff), |
||||
'darkblue': Color(0xff00008b), |
||||
'darkcyan': Color(0xff008b8b), |
||||
'darkgoldenrod': Color(0xffb8860b), |
||||
'darkgray': Color(0xffa9a9a9), |
||||
'darkgreen': Color(0xff006400), |
||||
'darkgrey': Color(0xffa9a9a9), |
||||
'darkkhaki': Color(0xffbdb76b), |
||||
'darkmagenta': Color(0xff8b008b), |
||||
'darkolivegreen': Color(0xff556b2f), |
||||
'darkorange': Color(0xffff8c00), |
||||
'darkorchid': Color(0xff9932cc), |
||||
'darkred': Color(0xff8b0000), |
||||
'darksalmon': Color(0xffe9967a), |
||||
'darkseagreen': Color(0xff8fbc8f), |
||||
'darkslateblue': Color(0xff483d8b), |
||||
'darkslategray': Color(0xff2f4f4f), |
||||
'darkslategrey': Color(0xff2f4f4f), |
||||
'darkturquoise': Color(0xff00ced1), |
||||
'darkviolet': Color(0xff9400d3), |
||||
'deeppink': Color(0xffff1493), |
||||
'deepskyblue': Color(0xff00bfff), |
||||
'dimgray': Color(0xff696969), |
||||
'dimgrey': Color(0xff696969), |
||||
'dodgerblue': Color(0xff1e90ff), |
||||
'firebrick': Color(0xffb22222), |
||||
'floralwhite': Color(0xfffffaf0), |
||||
'forestgreen': Color(0xff228b22), |
||||
'fuchsia': Color(0xffff00ff), |
||||
'gainsboro': Color(0xffdcdcdc), |
||||
'ghostwhite': Color(0xfff8f8ff), |
||||
'gold': Color(0xffffd700), |
||||
'goldenrod': Color(0xffdaa520), |
||||
'gray': Color(0xff808080), |
||||
'green': Color(0xff008000), |
||||
'greenyellow': Color(0xffadff2f), |
||||
'grey': Color(0xff808080), |
||||
'honeydew': Color(0xfff0fff0), |
||||
'hotpink': Color(0xffff69b4), |
||||
'indianred': Color(0xffcd5c5c), |
||||
'indigo': Color(0xff4b0082), |
||||
'ivory': Color(0xfffffff0), |
||||
'khaki': Color(0xfff0e68c), |
||||
'laserlemon': Color(0xffffff54), |
||||
'lavender': Color(0xffe6e6fa), |
||||
'lavenderblush': Color(0xfffff0f5), |
||||
'lawngreen': Color(0xff7cfc00), |
||||
'lemonchiffon': Color(0xfffffacd), |
||||
'lightblue': Color(0xffadd8e6), |
||||
'lightcoral': Color(0xfff08080), |
||||
'lightcyan': Color(0xffe0ffff), |
||||
'lightgoldenrod': Color(0xfffafad2), |
||||
'lightgoldenrodyellow': Color(0xfffafad2), |
||||
'lightgray': Color(0xffd3d3d3), |
||||
'lightgreen': Color(0xff90ee90), |
||||
'lightgrey': Color(0xffd3d3d3), |
||||
'lightpink': Color(0xffffb6c1), |
||||
'lightsalmon': Color(0xffffa07a), |
||||
'lightseagreen': Color(0xff20b2aa), |
||||
'lightskyblue': Color(0xff87cefa), |
||||
'lightslategray': Color(0xff778899), |
||||
'lightslategrey': Color(0xff778899), |
||||
'lightsteelblue': Color(0xffb0c4de), |
||||
'lightyellow': Color(0xffffffe0), |
||||
'lime': Color(0xff00ff00), |
||||
'limegreen': Color(0xff32cd32), |
||||
'linen': Color(0xfffaf0e6), |
||||
'magenta': Color(0xffff00ff), |
||||
'maroon': Color(0xff800000), |
||||
'maroon2': Color(0xff7f0000), |
||||
'maroon3': Color(0xffb03060), |
||||
'mediumaquamarine': Color(0xff66cdaa), |
||||
'mediumblue': Color(0xff0000cd), |
||||
'mediumorchid': Color(0xffba55d3), |
||||
'mediumpurple': Color(0xff9370db), |
||||
'mediumseagreen': Color(0xff3cb371), |
||||
'mediumslateblue': Color(0xff7b68ee), |
||||
'mediumspringgreen': Color(0xff00fa9a), |
||||
'mediumturquoise': Color(0xff48d1cc), |
||||
'mediumvioletred': Color(0xffc71585), |
||||
'midnightblue': Color(0xff191970), |
||||
'mintcream': Color(0xfff5fffa), |
||||
'mistyrose': Color(0xffffe4e1), |
||||
'moccasin': Color(0xffffe4b5), |
||||
'navajowhite': Color(0xffffdead), |
||||
'navy': Color(0xff000080), |
||||
'oldlace': Color(0xfffdf5e6), |
||||
'olive': Color(0xff808000), |
||||
'olivedrab': Color(0xff6b8e23), |
||||
'orange': Color(0xffffa500), |
||||
'orangered': Color(0xffff4500), |
||||
'orchid': Color(0xffda70d6), |
||||
'palegoldenrod': Color(0xffeee8aa), |
||||
'palegreen': Color(0xff98fb98), |
||||
'paleturquoise': Color(0xffafeeee), |
||||
'palevioletred': Color(0xffdb7093), |
||||
'papayawhip': Color(0xffffefd5), |
||||
'peachpuff': Color(0xffffdab9), |
||||
'peru': Color(0xffcd853f), |
||||
'pink': Color(0xffffc0cb), |
||||
'plum': Color(0xffdda0dd), |
||||
'powderblue': Color(0xffb0e0e6), |
||||
'purple': Color(0xff800080), |
||||
'purple2': Color(0xff7f007f), |
||||
'purple3': Color(0xffa020f0), |
||||
'rebeccapurple': Color(0xff663399), |
||||
'red': Color(0xffff0000), |
||||
'rosybrown': Color(0xffbc8f8f), |
||||
'royalblue': Color(0xff4169e1), |
||||
'saddlebrown': Color(0xff8b4513), |
||||
'salmon': Color(0xfffa8072), |
||||
'sandybrown': Color(0xfff4a460), |
||||
'seagreen': Color(0xff2e8b57), |
||||
'seashell': Color(0xfffff5ee), |
||||
'sienna': Color(0xffa0522d), |
||||
'silver': Color(0xffc0c0c0), |
||||
'skyblue': Color(0xff87ceeb), |
||||
'slateblue': Color(0xff6a5acd), |
||||
'slategray': Color(0xff708090), |
||||
'slategrey': Color(0xff708090), |
||||
'snow': Color(0xfffffafa), |
||||
'springgreen': Color(0xff00ff7f), |
||||
'steelblue': Color(0xff4682b4), |
||||
'tan': Color(0xffd2b48c), |
||||
'teal': Color(0xff008080), |
||||
'thistle': Color(0xffd8bfd8), |
||||
'tomato': Color(0xffff6347), |
||||
'turquoise': Color(0xff40e0d0), |
||||
'violet': Color(0xffee82ee), |
||||
'wheat': Color(0xfff5deb3), |
||||
'white': Color(0xffffffff), |
||||
'whitesmoke': Color(0xfff5f5f5), |
||||
'yellow': Color(0xffffff00), |
||||
'yellowgreen': Color(0xff9acd32), |
||||
}; |
||||
|
||||
Color? colorFromName(String val) => |
||||
x11Colors[val.trim().replaceAll(' ', '').toLowerCase()]; |
||||
|
||||
extension ColorExtension on String { |
||||
Color? toColor() => colorFromName(this); |
||||
} |
||||
@ -0,0 +1,384 @@ |
||||
// ignore_for_file: type=lint |
||||
|
||||
/// Material Color Picker |
||||
|
||||
library material_colorpicker; |
||||
|
||||
import 'package:flutter/gestures.dart'; |
||||
import 'package:flutter/material.dart'; |
||||
import 'utils.dart'; |
||||
|
||||
// The Color Picker which contains Material Design Color Palette. |
||||
class MaterialPicker extends StatefulWidget { |
||||
const MaterialPicker({ |
||||
Key? key, |
||||
required this.pickerColor, |
||||
required this.onColorChanged, |
||||
this.onPrimaryChanged, |
||||
this.enableLabel = false, |
||||
this.portraitOnly = false, |
||||
}) : super(key: key); |
||||
|
||||
final Color pickerColor; |
||||
final ValueChanged<Color> onColorChanged; |
||||
final ValueChanged<Color>? onPrimaryChanged; |
||||
final bool enableLabel; |
||||
final bool portraitOnly; |
||||
|
||||
@override |
||||
State<StatefulWidget> createState() => _MaterialPickerState(); |
||||
} |
||||
|
||||
class _MaterialPickerState extends State<MaterialPicker> { |
||||
final List<List<Color>> _colorTypes = [ |
||||
[Colors.red, Colors.redAccent], |
||||
[Colors.pink, Colors.pinkAccent], |
||||
[Colors.purple, Colors.purpleAccent], |
||||
[Colors.deepPurple, Colors.deepPurpleAccent], |
||||
[Colors.indigo, Colors.indigoAccent], |
||||
[Colors.blue, Colors.blueAccent], |
||||
[Colors.lightBlue, Colors.lightBlueAccent], |
||||
[Colors.cyan, Colors.cyanAccent], |
||||
[Colors.teal, Colors.tealAccent], |
||||
[Colors.green, Colors.greenAccent], |
||||
[Colors.lightGreen, Colors.lightGreenAccent], |
||||
[Colors.lime, Colors.limeAccent], |
||||
[Colors.yellow, Colors.yellowAccent], |
||||
[Colors.amber, Colors.amberAccent], |
||||
[Colors.orange, Colors.orangeAccent], |
||||
[Colors.deepOrange, Colors.deepOrangeAccent], |
||||
[Colors.brown], |
||||
[Colors.grey], |
||||
[Colors.blueGrey], |
||||
[Colors.black], |
||||
]; |
||||
|
||||
List<Color> _currentColorType = [Colors.red, Colors.redAccent]; |
||||
Color _currentShading = Colors.transparent; |
||||
|
||||
List<Map<Color, String>> _shadingTypes(List<Color> colors) { |
||||
List<Map<Color, String>> result = []; |
||||
|
||||
for (Color colorType in colors) { |
||||
if (colorType == Colors.grey) { |
||||
result.addAll([ |
||||
50, |
||||
100, |
||||
200, |
||||
300, |
||||
350, |
||||
400, |
||||
500, |
||||
600, |
||||
700, |
||||
800, |
||||
850, |
||||
900 |
||||
].map((int shade) => {Colors.grey[shade]!: shade.toString()}).toList()); |
||||
} else if (colorType == Colors.black || colorType == Colors.white) { |
||||
result.addAll([ |
||||
{Colors.black: ''}, |
||||
{Colors.white: ''} |
||||
]); |
||||
} else if (colorType is MaterialAccentColor) { |
||||
result.addAll([100, 200, 400, 700] |
||||
.map((int shade) => {colorType[shade]!: 'A$shade'}) |
||||
.toList()); |
||||
} else if (colorType is MaterialColor) { |
||||
result.addAll([50, 100, 200, 300, 400, 500, 600, 700, 800, 900] |
||||
.map((int shade) => {colorType[shade]!: shade.toString()}) |
||||
.toList()); |
||||
} else { |
||||
result.add({const Color(0x00000000): ''}); |
||||
} |
||||
} |
||||
|
||||
return result; |
||||
} |
||||
|
||||
@override |
||||
void initState() { |
||||
for (List<Color> _colors in _colorTypes) { |
||||
_shadingTypes(_colors).forEach((Map<Color, String> color) { |
||||
if (widget.pickerColor.value == color.keys.first.value) { |
||||
return setState(() { |
||||
_currentColorType = _colors; |
||||
_currentShading = color.keys.first; |
||||
}); |
||||
} |
||||
}); |
||||
} |
||||
super.initState(); |
||||
} |
||||
|
||||
@override |
||||
Widget build(BuildContext context) { |
||||
bool _isPortrait = |
||||
MediaQuery.of(context).orientation == Orientation.portrait || |
||||
widget.portraitOnly; |
||||
|
||||
Widget _colorList() { |
||||
return Container( |
||||
clipBehavior: Clip.hardEdge, |
||||
decoration: const BoxDecoration(), |
||||
child: Container( |
||||
margin: _isPortrait |
||||
? const EdgeInsets.only(right: 10) |
||||
: const EdgeInsets.only(bottom: 10), |
||||
width: _isPortrait ? 60 : null, |
||||
height: _isPortrait ? null : 60, |
||||
decoration: BoxDecoration( |
||||
color: Theme.of(context).cardColor, |
||||
boxShadow: [ |
||||
BoxShadow( |
||||
color: (Theme.of(context).brightness == Brightness.light) |
||||
? (Theme.of(context).brightness == Brightness.light) |
||||
? Colors.grey[300]! |
||||
: Colors.black38 |
||||
: Colors.black38, |
||||
blurRadius: 10) |
||||
], |
||||
border: _isPortrait |
||||
? Border( |
||||
right: BorderSide( |
||||
color: |
||||
(Theme.of(context).brightness == Brightness.light) |
||||
? Colors.grey[300]! |
||||
: Colors.black38, |
||||
width: 1)) |
||||
: Border( |
||||
top: BorderSide( |
||||
color: |
||||
(Theme.of(context).brightness == Brightness.light) |
||||
? Colors.grey[300]! |
||||
: Colors.black38, |
||||
width: 1)), |
||||
), |
||||
child: ScrollConfiguration( |
||||
behavior: ScrollConfiguration.of(context) |
||||
.copyWith(dragDevices: PointerDeviceKind.values.toSet()), |
||||
child: ListView( |
||||
scrollDirection: _isPortrait ? Axis.vertical : Axis.horizontal, |
||||
children: [ |
||||
_isPortrait |
||||
? const Padding(padding: EdgeInsets.only(top: 7)) |
||||
: const Padding(padding: EdgeInsets.only(left: 7)), |
||||
..._colorTypes.map((List<Color> _colors) { |
||||
Color _colorType = _colors[0]; |
||||
return GestureDetector( |
||||
onTap: () { |
||||
if (widget.onPrimaryChanged != null) |
||||
widget.onPrimaryChanged!(_colorType); |
||||
setState(() => _currentColorType = _colors); |
||||
}, |
||||
child: Container( |
||||
color: const Color(0x00000000), |
||||
padding: _isPortrait |
||||
? const EdgeInsets.fromLTRB(0, 7, 0, 7) |
||||
: const EdgeInsets.fromLTRB(7, 0, 7, 0), |
||||
child: Align( |
||||
child: AnimatedContainer( |
||||
duration: const Duration(milliseconds: 300), |
||||
width: 25, |
||||
height: 25, |
||||
decoration: BoxDecoration( |
||||
color: _colorType, |
||||
shape: BoxShape.circle, |
||||
boxShadow: _currentColorType == _colors |
||||
? [ |
||||
_colorType == Theme.of(context).cardColor |
||||
? BoxShadow( |
||||
color: |
||||
(Theme.of(context).brightness == |
||||
Brightness.light) |
||||
? Colors.grey[300]! |
||||
: Colors.black38, |
||||
blurRadius: 10, |
||||
) |
||||
: BoxShadow( |
||||
color: _colorType, |
||||
blurRadius: 10, |
||||
), |
||||
] |
||||
: null, |
||||
border: _colorType == Theme.of(context).cardColor |
||||
? Border.all( |
||||
color: (Theme.of(context).brightness == |
||||
Brightness.light) |
||||
? Colors.grey[300]! |
||||
: Colors.black38, |
||||
width: 1) |
||||
: null, |
||||
), |
||||
), |
||||
), |
||||
), |
||||
); |
||||
}), |
||||
_isPortrait |
||||
? const Padding(padding: EdgeInsets.only(top: 5)) |
||||
: const Padding(padding: EdgeInsets.only(left: 5)), |
||||
], |
||||
), |
||||
), |
||||
), |
||||
); |
||||
} |
||||
|
||||
Widget _shadingList() { |
||||
return ScrollConfiguration( |
||||
behavior: ScrollConfiguration.of(context) |
||||
.copyWith(dragDevices: PointerDeviceKind.values.toSet()), |
||||
child: ListView( |
||||
scrollDirection: _isPortrait ? Axis.vertical : Axis.horizontal, |
||||
children: [ |
||||
_isPortrait |
||||
? const Padding(padding: EdgeInsets.only(top: 15)) |
||||
: const Padding(padding: EdgeInsets.only(left: 15)), |
||||
..._shadingTypes(_currentColorType).map((Map<Color, String> color) { |
||||
final Color _color = color.keys.first; |
||||
return GestureDetector( |
||||
onTap: () { |
||||
setState(() => _currentShading = _color); |
||||
widget.onColorChanged(_color); |
||||
}, |
||||
child: Container( |
||||
color: const Color(0x00000000), |
||||
margin: _isPortrait |
||||
? const EdgeInsets.only(right: 10) |
||||
: const EdgeInsets.only(bottom: 10), |
||||
padding: _isPortrait |
||||
? const EdgeInsets.fromLTRB(0, 7, 0, 7) |
||||
: const EdgeInsets.fromLTRB(7, 0, 7, 0), |
||||
child: Align( |
||||
child: AnimatedContainer( |
||||
curve: Curves.fastOutSlowIn, |
||||
duration: const Duration(milliseconds: 500), |
||||
width: _isPortrait |
||||
? (_currentShading == _color ? 250 : 230) |
||||
: (_currentShading == _color ? 50 : 30), |
||||
height: _isPortrait ? 50 : 220, |
||||
decoration: BoxDecoration( |
||||
color: _color, |
||||
boxShadow: _currentShading == _color |
||||
? [ |
||||
(_color == Colors.white) || |
||||
(_color == Colors.black) |
||||
? BoxShadow( |
||||
color: (Theme.of(context).brightness == |
||||
Brightness.light) |
||||
? Colors.grey[300]! |
||||
: Colors.black38, |
||||
blurRadius: 10, |
||||
) |
||||
: BoxShadow( |
||||
color: _color, |
||||
blurRadius: 10, |
||||
), |
||||
] |
||||
: null, |
||||
border: |
||||
(_color == Colors.white) || (_color == Colors.black) |
||||
? Border.all( |
||||
color: (Theme.of(context).brightness == |
||||
Brightness.light) |
||||
? Colors.grey[300]! |
||||
: Colors.black38, |
||||
width: 1) |
||||
: null, |
||||
), |
||||
child: widget.enableLabel |
||||
? _isPortrait |
||||
? Row( |
||||
children: [ |
||||
Text( |
||||
' ${color.values.first}', |
||||
style: TextStyle( |
||||
color: useWhiteForeground(_color) |
||||
? Colors.white |
||||
: Colors.black), |
||||
), |
||||
Expanded( |
||||
child: Align( |
||||
alignment: Alignment.centerRight, |
||||
child: Text( |
||||
'#${(_color.toString().replaceFirst('Color(0xff', '').replaceFirst(')', '')).toUpperCase()} ', |
||||
style: TextStyle( |
||||
color: useWhiteForeground(_color) |
||||
? Colors.white |
||||
: Colors.black, |
||||
fontWeight: FontWeight.bold, |
||||
), |
||||
), |
||||
), |
||||
), |
||||
], |
||||
) |
||||
: AnimatedOpacity( |
||||
duration: const Duration(milliseconds: 300), |
||||
opacity: _currentShading == _color ? 1 : 0, |
||||
child: Container( |
||||
padding: const EdgeInsets.only(top: 16), |
||||
alignment: Alignment.topCenter, |
||||
child: Text( |
||||
color.values.first, |
||||
style: TextStyle( |
||||
color: useWhiteForeground(_color) |
||||
? Colors.white |
||||
: Colors.black, |
||||
fontWeight: FontWeight.bold, |
||||
fontSize: 14, |
||||
), |
||||
softWrap: false, |
||||
), |
||||
), |
||||
) |
||||
: const SizedBox(), |
||||
), |
||||
), |
||||
), |
||||
); |
||||
}), |
||||
_isPortrait |
||||
? const Padding(padding: EdgeInsets.only(top: 15)) |
||||
: const Padding(padding: EdgeInsets.only(left: 15)), |
||||
], |
||||
), |
||||
); |
||||
} |
||||
|
||||
if (_isPortrait) { |
||||
return SizedBox( |
||||
width: 350, |
||||
height: 500, |
||||
child: Row( |
||||
children: <Widget>[ |
||||
_colorList(), |
||||
Expanded( |
||||
child: Padding( |
||||
padding: const EdgeInsets.symmetric(horizontal: 12), |
||||
child: _shadingList(), |
||||
), |
||||
), |
||||
], |
||||
), |
||||
); |
||||
} else { |
||||
return SizedBox( |
||||
width: 500, |
||||
height: 300, |
||||
child: Column( |
||||
children: <Widget>[ |
||||
_colorList(), |
||||
Expanded( |
||||
child: Padding( |
||||
padding: const EdgeInsets.symmetric(vertical: 12), |
||||
child: _shadingList(), |
||||
), |
||||
), |
||||
], |
||||
), |
||||
); |
||||
} |
||||
} |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,224 @@ |
||||
// ignore_for_file: type=lint |
||||
|
||||
/// Common function lib |
||||
|
||||
import 'dart:math'; |
||||
import 'package:flutter/painting.dart'; |
||||
import 'colors.dart'; |
||||
|
||||
/// Check if is good condition to use white foreground color by passing |
||||
/// the background color, and optional bias. |
||||
/// |
||||
/// Reference: |
||||
/// |
||||
/// Old: https://www.w3.org/TR/WCAG20-TECHS/G18.html |
||||
/// |
||||
/// New: https://github.com/mchome/flutter_statusbarcolor/issues/40 |
||||
bool useWhiteForeground(Color backgroundColor, {double bias = 0.0}) { |
||||
// Old: |
||||
// return 1.05 / (color.computeLuminance() + 0.05) > 4.5; |
||||
|
||||
// New: |
||||
int v = sqrt(pow(backgroundColor.red, 2) * 0.299 + |
||||
pow(backgroundColor.green, 2) * 0.587 + |
||||
pow(backgroundColor.blue, 2) * 0.114) |
||||
.round(); |
||||
return v < 130 + bias ? true : false; |
||||
} |
||||
|
||||
/// Convert HSV to HSL |
||||
/// |
||||
/// Reference: https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_HSL |
||||
HSLColor hsvToHsl(HSVColor color) { |
||||
double s = 0.0; |
||||
double l = 0.0; |
||||
l = (2 - color.saturation) * color.value / 2; |
||||
if (l != 0) { |
||||
if (l == 1) { |
||||
s = 0.0; |
||||
} else if (l < 0.5) { |
||||
s = color.saturation * color.value / (l * 2); |
||||
} else { |
||||
s = color.saturation * color.value / (2 - l * 2); |
||||
} |
||||
} |
||||
return HSLColor.fromAHSL( |
||||
color.alpha, |
||||
color.hue, |
||||
s.clamp(0.0, 1.0), |
||||
l.clamp(0.0, 1.0), |
||||
); |
||||
} |
||||
|
||||
/// Convert HSL to HSV |
||||
/// |
||||
/// Reference: https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_HSV |
||||
HSVColor hslToHsv(HSLColor color) { |
||||
double s = 0.0; |
||||
double v = 0.0; |
||||
|
||||
v = color.lightness + |
||||
color.saturation * |
||||
(color.lightness < 0.5 ? color.lightness : 1 - color.lightness); |
||||
if (v != 0) s = 2 - 2 * color.lightness / v; |
||||
|
||||
return HSVColor.fromAHSV( |
||||
color.alpha, |
||||
color.hue, |
||||
s.clamp(0.0, 1.0), |
||||
v.clamp(0.0, 1.0), |
||||
); |
||||
} |
||||
|
||||
/// [RegExp] pattern for validation HEX color [String] inputs, allows only: |
||||
/// |
||||
/// * exactly 1 to 8 digits in HEX format, |
||||
/// * only Latin A-F characters, case insensitive, |
||||
/// * and integer numbers 0,1,2,3,4,5,6,7,8,9, |
||||
/// * with optional hash (`#`) symbol at the beginning (not calculated in length). |
||||
/// |
||||
/// ```dart |
||||
/// final RegExp hexInputValidator = RegExp(kValidHexPattern); |
||||
/// if (hexInputValidator.hasMatch(hex)) print('$hex might be a valid HEX color'); |
||||
/// ``` |
||||
/// Reference: https://en.wikipedia.org/wiki/Web_colors#Hex_triplet |
||||
const String kValidHexPattern = r'^#?[0-9a-fA-F]{1,8}'; |
||||
|
||||
/// [RegExp] pattern for validation complete HEX color [String], allows only: |
||||
/// |
||||
/// * exactly 6 or 8 digits in HEX format, |
||||
/// * only Latin A-F characters, case insensitive, |
||||
/// * and integer numbers 0,1,2,3,4,5,6,7,8,9, |
||||
/// * with optional hash (`#`) symbol at the beginning (not calculated in length). |
||||
/// |
||||
/// ```dart |
||||
/// final RegExp hexCompleteValidator = RegExp(kCompleteValidHexPattern); |
||||
/// if (hexCompleteValidator.hasMatch(hex)) print('$hex is valid HEX color'); |
||||
/// ``` |
||||
/// Reference: https://en.wikipedia.org/wiki/Web_colors#Hex_triplet |
||||
const String kCompleteValidHexPattern = |
||||
r'^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$'; |
||||
|
||||
/// Try to convert text input or any [String] to valid [Color]. |
||||
/// The [String] must be provided in one of those formats: |
||||
/// |
||||
/// * RGB |
||||
/// * #RGB |
||||
/// * RRGGBB |
||||
/// * #RRGGBB |
||||
/// * AARRGGBB |
||||
/// * #AARRGGBB |
||||
/// |
||||
/// Where: A stands for Alpha, R for Red, G for Green, and B for blue color. |
||||
/// It will only accept 3/6/8 long HEXs with an optional hash (`#`) at the beginning. |
||||
/// Allowed characters are Latin A-F case insensitive and numbers 0-9. |
||||
/// Optional [enableAlpha] can be provided (it's `true` by default). If it's set |
||||
/// to `false` transparency information (alpha channel) will be removed. |
||||
/// ```dart |
||||
/// /// // Valid 3 digit HEXs: |
||||
/// colorFromHex('abc') == Color(0xffaabbcc) |
||||
/// colorFromHex('ABc') == Color(0xffaabbcc) |
||||
/// colorFromHex('ABC') == Color(0xffaabbcc) |
||||
/// colorFromHex('#Abc') == Color(0xffaabbcc) |
||||
/// colorFromHex('#abc') == Color(0xffaabbcc) |
||||
/// colorFromHex('#ABC') == Color(0xffaabbcc) |
||||
/// // Valid 6 digit HEXs: |
||||
/// colorFromHex('aabbcc') == Color(0xffaabbcc) |
||||
/// colorFromHex('AABbcc') == Color(0xffaabbcc) |
||||
/// colorFromHex('AABBCC') == Color(0xffaabbcc) |
||||
/// colorFromHex('#AABbcc') == Color(0xffaabbcc) |
||||
/// colorFromHex('#aabbcc') == Color(0xffaabbcc) |
||||
/// colorFromHex('#AABBCC') == Color(0xffaabbcc) |
||||
/// // Valid 8 digit HEXs: |
||||
/// colorFromHex('ffaabbcc') == Color(0xffaabbcc) |
||||
/// colorFromHex('ffAABbcc') == Color(0xffaabbcc) |
||||
/// colorFromHex('ffAABBCC') == Color(0xffaabbcc) |
||||
/// colorFromHex('ffaabbcc', enableAlpha: true) == Color(0xffaabbcc) |
||||
/// colorFromHex('FFAAbbcc', enableAlpha: true) == Color(0xffaabbcc) |
||||
/// colorFromHex('ffAABBCC', enableAlpha: true) == Color(0xffaabbcc) |
||||
/// colorFromHex('FFaabbcc', enableAlpha: true) == Color(0xffaabbcc) |
||||
/// colorFromHex('#ffaabbcc') == Color(0xffaabbcc) |
||||
/// colorFromHex('#ffAABbcc') == Color(0xffaabbcc) |
||||
/// colorFromHex('#FFAABBCC') == Color(0xffaabbcc) |
||||
/// colorFromHex('#ffaabbcc', enableAlpha: true) == Color(0xffaabbcc) |
||||
/// colorFromHex('#FFAAbbcc', enableAlpha: true) == Color(0xffaabbcc) |
||||
/// colorFromHex('#ffAABBCC', enableAlpha: true) == Color(0xffaabbcc) |
||||
/// colorFromHex('#FFaabbcc', enableAlpha: true) == Color(0xffaabbcc) |
||||
/// // Invalid HEXs: |
||||
/// colorFromHex('bc') == null // length 2 |
||||
/// colorFromHex('aabbc') == null // length 5 |
||||
/// colorFromHex('#ffaabbccd') == null // length 9 (+#) |
||||
/// colorFromHex('aabbcx') == null // x character |
||||
/// colorFromHex('#aabbвв') == null // в non-latin character |
||||
/// colorFromHex('') == null // empty |
||||
/// ``` |
||||
/// Reference: https://en.wikipedia.org/wiki/Web_colors#Hex_triplet |
||||
Color? colorFromHex(String inputString, {bool enableAlpha = true}) { |
||||
// Registers validator for exactly 6 or 8 digits long HEX (with optional #). |
||||
final RegExp hexValidator = RegExp(kCompleteValidHexPattern); |
||||
// Validating input, if it does not match — it's not proper HEX. |
||||
if (!hexValidator.hasMatch(inputString)) return null; |
||||
// Remove optional hash if exists and convert HEX to UPPER CASE. |
||||
String hexToParse = inputString.replaceFirst('#', '').toUpperCase(); |
||||
// It may allow HEXs with transparency information even if alpha is disabled, |
||||
if (!enableAlpha && hexToParse.length == 8) { |
||||
// but it will replace this info with 100% non-transparent value (FF). |
||||
hexToParse = 'FF${hexToParse.substring(2)}'; |
||||
} |
||||
// HEX may be provided in 3-digits format, let's just duplicate each letter. |
||||
if (hexToParse.length == 3) { |
||||
hexToParse = hexToParse.split('').expand((i) => [i * 2]).join(); |
||||
} |
||||
// We will need 8 digits to parse the color, let's add missing digits. |
||||
if (hexToParse.length == 6) hexToParse = 'FF$hexToParse'; |
||||
// HEX must be valid now, but as a precaution, it will just "try" to parse it. |
||||
final intColorValue = int.tryParse(hexToParse, radix: 16); |
||||
// If for some reason HEX is not valid — abort the operation, return nothing. |
||||
if (intColorValue == null) return null; |
||||
// Register output color for the last step. |
||||
final color = Color(intColorValue); |
||||
// Decide to return color with transparency information or not. |
||||
return enableAlpha ? color : color.withAlpha(255); |
||||
} |
||||
|
||||
/// Converts `dart:ui` [Color] to the 6/8 digits HEX [String]. |
||||
/// |
||||
/// Prefixes a hash (`#`) sign if [includeHashSign] is set to `true`. |
||||
/// The result will be provided as UPPER CASE, it can be changed via [toUpperCase] |
||||
/// flag set to `false` (default is `true`). Hex can be returned without alpha |
||||
/// channel information (transparency), with the [enableAlpha] flag set to `false`. |
||||
String colorToHex( |
||||
Color color, { |
||||
bool includeHashSign = false, |
||||
bool enableAlpha = true, |
||||
bool toUpperCase = true, |
||||
}) { |
||||
final String hex = (includeHashSign ? '#' : '') + |
||||
(enableAlpha ? _padRadix(color.alpha) : '') + |
||||
_padRadix(color.red) + |
||||
_padRadix(color.green) + |
||||
_padRadix(color.blue); |
||||
return toUpperCase ? hex.toUpperCase() : hex; |
||||
} |
||||
|
||||
// Shorthand for padLeft of RadixString, DRY. |
||||
String _padRadix(int value) => value.toRadixString(16).padLeft(2, '0'); |
||||
|
||||
// Extension for String |
||||
extension ColorExtension1 on String { |
||||
Color? toColor() { |
||||
Color? color = colorFromName(this); |
||||
if (color != null) return color; |
||||
return colorFromHex(this); |
||||
} |
||||
} |
||||
|
||||
// Extension from Color |
||||
extension ColorExtension2 on Color { |
||||
String toHexString( |
||||
{bool includeHashSign = false, |
||||
bool enableAlpha = true, |
||||
bool toUpperCase = true}) => |
||||
colorToHex(this, |
||||
includeHashSign: false, enableAlpha: true, toUpperCase: true); |
||||
} |
||||
Loading…
Reference in new issue