From 3adf1b69e14be6df115c7a227fc6d210b34bebb7 Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Tue, 4 Jul 2023 04:09:53 +0200 Subject: [PATCH 01/23] Add list of color samples to color picker --- .../color_field_configurator.dart | 113 +++++++++++++++++- 1 file changed, 108 insertions(+), 5 deletions(-) diff --git a/lib/src/field_configurators/color_field_configurator.dart b/lib/src/field_configurators/color_field_configurator.dart index b8dce54..aae422a 100644 --- a/lib/src/field_configurators/color_field_configurator.dart +++ b/lib/src/field_configurators/color_field_configurator.dart @@ -6,8 +6,11 @@ class ColorFieldConfigurator extends FieldConfigurator { ColorFieldConfigurator({ required super.value, required super.name, + this.colorSamples, }); + final List? colorSamples; + @override Widget build(BuildContext context) { return ColorConfigurationWidget( @@ -24,13 +27,17 @@ class ColorFieldConfiguratorNullable extends FieldConfigurator { ColorFieldConfiguratorNullable({ required super.value, required super.name, + this.colorSamples, }); + final List? colorSamples; + @override Widget build(BuildContext context) { return ColorConfigurationWidget( configurator: this, updateValue: updateValue, + colorSamples: colorSamples, ); } } @@ -40,14 +47,18 @@ class ColorConfigurationWidget extends StatefulConfigurationWidget { super.key, required super.configurator, required super.updateValue, + this.colorSamples, }); + final List? colorSamples; + @override State createState() => _ColorConfigurationFieldState(); } class _ColorConfigurationFieldState extends State { late Color? color = widget.configurator.value; + late Color? initialColor = widget.configurator.value; @override Widget build(BuildContext context) { @@ -59,17 +70,21 @@ class _ColorConfigurationFieldState extends State { return AlertDialog( title: const Text('Pick a color!'), content: SingleChildScrollView( - child: ColorPicker( - pickerColor: color ?? Colors.white, - onColorChanged: (newColor) { - color = newColor; - }, + child: Column( + children: [ + SampleColorPicker( + initialColor: color ?? Colors.white, + sampleColors: widget.colorSamples, + onColorChanged: (newColor) => color = newColor, + ) + ], ), ), actions: [ ElevatedButton( child: const Text('Abort'), onPressed: () { + color = initialColor; Navigator.of(context).pop(); }, ), @@ -160,3 +175,91 @@ class ChessBoardPainter extends CustomPainter { return true; } } + +class SampleColorPicker extends StatefulWidget { + const SampleColorPicker({ + super.key, + this.sampleColors, + this.initialColor, + required this.onColorChanged, + }); + + final List? sampleColors; + final Color? initialColor; + final void Function(Color color) onColorChanged; + + @override + State createState() => _SampleColorPickerState(); +} + +class _SampleColorPickerState extends State { + late Color selectedColor; + + @override + void initState() { + super.initState(); + selectedColor = widget.initialColor ?? Colors.white; + } + + @override + void didUpdateWidget(SampleColorPicker oldWidget) { + super.didUpdateWidget(oldWidget); + if (oldWidget.initialColor != widget.initialColor) { + setState(() { + selectedColor = widget.initialColor ?? Colors.white; + }); + } + } + + @override + Widget build(BuildContext context) { + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + ColorPicker( + pickerColor: selectedColor, + onColorChanged: (newColor) { + widget.onColorChanged(newColor); + setState(() { + selectedColor = newColor; + }); + }, + ), + if (widget.sampleColors?.isNotEmpty == true) ...[ + const SizedBox(height: 32.0), + Text('Color Samples'), + const SizedBox(height: 8.0), + Row( + mainAxisSize: MainAxisSize.min, + children: widget.sampleColors!.map( + (sampleColor) { + return Padding( + padding: const EdgeInsets.only(right: 8.0, bottom: 8.0), + child: MouseRegion( + cursor: SystemMouseCursors.click, + child: GestureDetector( + onTap: () { + widget.onColorChanged(sampleColor); + setState(() { + selectedColor = sampleColor; + }); + }, + child: Container( + width: 30, + height: 30, + decoration: BoxDecoration( + color: sampleColor, + shape: BoxShape.circle, + ), + ), + ), + ), + ); + }, + ).toList(), + ), + ] + ], + ); + } +} From c331ad9e9aa7bdc63d6285520911973fd59398e9 Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Tue, 4 Jul 2023 12:24:30 +0200 Subject: [PATCH 02/23] Use StatefulBuilder --- .../color_field_configurator.dart | 197 +++++++++++------- 1 file changed, 120 insertions(+), 77 deletions(-) diff --git a/lib/src/field_configurators/color_field_configurator.dart b/lib/src/field_configurators/color_field_configurator.dart index aae422a..3d5a34a 100644 --- a/lib/src/field_configurators/color_field_configurator.dart +++ b/lib/src/field_configurators/color_field_configurator.dart @@ -14,7 +14,7 @@ class ColorFieldConfigurator extends FieldConfigurator { @override Widget build(BuildContext context) { return ColorConfigurationWidget( - configurator: this, + value: value, updateValue: (Color? color) { updateValue(color ?? Colors.transparent); }, @@ -35,13 +35,95 @@ class ColorFieldConfiguratorNullable extends FieldConfigurator { @override Widget build(BuildContext context) { return ColorConfigurationWidget( - configurator: this, + value: value, updateValue: updateValue, colorSamples: colorSamples, ); } } +class ColorConfigurationWidget extends ConfigurationWidget { + const ColorConfigurationWidget({ + super.key, + required super.value, + required super.updateValue, + this.colorSamples, + }); + + final List? colorSamples; + + @override + Widget build(BuildContext context) { + return GestureDetector( + onTap: () async { + showDialog( + context: context, + builder: (BuildContext context) { + Color? color = value; + return StatefulBuilder( + builder: (context, setState) { + return AlertDialog( + title: const Text('Pick a color!'), + content: SingleChildScrollView( + child: _ColorPicker( + color: color ?? Colors.white, + sampleColors: colorSamples, + onColorChanged: (newColor) => setState(() => color = newColor), + ), + ), + actions: [ + ElevatedButton( + child: const Text('Abort'), + onPressed: () => Navigator.of(context).pop(), + ), + ElevatedButton( + child: const Text('Accept'), + onPressed: () { + updateValue(color); + Navigator.of(context).pop(); + }, + ), + ], + ); + }, + ); + }, + ); + }, + child: Align( + alignment: Alignment.centerRight, + child: MouseRegion( + cursor: SystemMouseCursors.click, + child: ClipRRect( + borderRadius: BorderRadius.circular(8), + child: Container( + height: 38, + width: 38, + foregroundDecoration: BoxDecoration( + // The actual color drawn over the chessboard pattern + color: value, + ), + // The chessboard pattern + child: const CustomPaint( + foregroundPainter: ChessBoardPainter( + boxSize: 8, + // The color of the chessboard pattern + color: Colors.grey, + ), + child: ColoredBox( + // Background of the chessboard pattern + color: Colors.white, + ), + ), + ), + ), + ), + ), + ); + } +} + +/* class ColorConfigurationWidget extends StatefulConfigurationWidget { const ColorConfigurationWidget({ super.key, @@ -57,9 +139,6 @@ class ColorConfigurationWidget extends StatefulConfigurationWidget { } class _ColorConfigurationFieldState extends State { - late Color? color = widget.configurator.value; - late Color? initialColor = widget.configurator.value; - @override Widget build(BuildContext context) { return GestureDetector( @@ -67,35 +146,33 @@ class _ColorConfigurationFieldState extends State { showDialog( context: context, builder: (BuildContext context) { - return AlertDialog( - title: const Text('Pick a color!'), - content: SingleChildScrollView( - child: Column( - children: [ - SampleColorPicker( - initialColor: color ?? Colors.white, + Color? color = widget.configurator.value; + return StatefulBuilder( + builder: (context, setState) { + return AlertDialog( + title: const Text('Pick a color!'), + content: SingleChildScrollView( + child: _ColorPicker( + color: color ?? Colors.white, sampleColors: widget.colorSamples, - onColorChanged: (newColor) => color = newColor, - ) + onColorChanged: (newColor) => setState(() => color = newColor), + ), + ), + actions: [ + ElevatedButton( + child: const Text('Abort'), + onPressed: () => Navigator.of(context).pop(), + ), + ElevatedButton( + child: const Text('Accept'), + onPressed: () { + widget.updateValue(color); + Navigator.of(context).pop(); + }, + ), ], - ), - ), - actions: [ - ElevatedButton( - child: const Text('Abort'), - onPressed: () { - color = initialColor; - Navigator.of(context).pop(); - }, - ), - ElevatedButton( - child: const Text('Accept'), - onPressed: () { - widget.updateValue(color); - Navigator.of(context).pop(); - }, - ), - ], + ); + }, ); }, ); @@ -132,7 +209,7 @@ class _ColorConfigurationFieldState extends State { ); } } - +*/ class ChessBoardPainter extends CustomPainter { const ChessBoardPainter({ required this.color, @@ -176,74 +253,40 @@ class ChessBoardPainter extends CustomPainter { } } -class SampleColorPicker extends StatefulWidget { - const SampleColorPicker({ - super.key, +class _ColorPicker extends StatelessWidget { + const _ColorPicker({ this.sampleColors, - this.initialColor, + this.color, required this.onColorChanged, }); final List? sampleColors; - final Color? initialColor; + final Color? color; final void Function(Color color) onColorChanged; - @override - State createState() => _SampleColorPickerState(); -} - -class _SampleColorPickerState extends State { - late Color selectedColor; - - @override - void initState() { - super.initState(); - selectedColor = widget.initialColor ?? Colors.white; - } - - @override - void didUpdateWidget(SampleColorPicker oldWidget) { - super.didUpdateWidget(oldWidget); - if (oldWidget.initialColor != widget.initialColor) { - setState(() { - selectedColor = widget.initialColor ?? Colors.white; - }); - } - } - @override Widget build(BuildContext context) { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ ColorPicker( - pickerColor: selectedColor, - onColorChanged: (newColor) { - widget.onColorChanged(newColor); - setState(() { - selectedColor = newColor; - }); - }, + pickerColor: color ?? Colors.white, + onColorChanged: onColorChanged, ), - if (widget.sampleColors?.isNotEmpty == true) ...[ + if (sampleColors?.isNotEmpty == true) ...[ const SizedBox(height: 32.0), - Text('Color Samples'), + const Text('Color Samples'), const SizedBox(height: 8.0), Row( mainAxisSize: MainAxisSize.min, - children: widget.sampleColors!.map( + children: sampleColors!.map( (sampleColor) { return Padding( padding: const EdgeInsets.only(right: 8.0, bottom: 8.0), child: MouseRegion( cursor: SystemMouseCursors.click, child: GestureDetector( - onTap: () { - widget.onColorChanged(sampleColor); - setState(() { - selectedColor = sampleColor; - }); - }, + onTap: () => onColorChanged(sampleColor), child: Container( width: 30, height: 30, From 00df3a8161cc1436e34f45dcd0803158c74ad489 Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Tue, 4 Jul 2023 12:25:04 +0200 Subject: [PATCH 03/23] Rm comment --- .../color_field_configurator.dart | 87 ------------------- 1 file changed, 87 deletions(-) diff --git a/lib/src/field_configurators/color_field_configurator.dart b/lib/src/field_configurators/color_field_configurator.dart index 3d5a34a..fbff036 100644 --- a/lib/src/field_configurators/color_field_configurator.dart +++ b/lib/src/field_configurators/color_field_configurator.dart @@ -123,93 +123,6 @@ class ColorConfigurationWidget extends ConfigurationWidget { } } -/* -class ColorConfigurationWidget extends StatefulConfigurationWidget { - const ColorConfigurationWidget({ - super.key, - required super.configurator, - required super.updateValue, - this.colorSamples, - }); - - final List? colorSamples; - - @override - State createState() => _ColorConfigurationFieldState(); -} - -class _ColorConfigurationFieldState extends State { - @override - Widget build(BuildContext context) { - return GestureDetector( - onTap: () async { - showDialog( - context: context, - builder: (BuildContext context) { - Color? color = widget.configurator.value; - return StatefulBuilder( - builder: (context, setState) { - return AlertDialog( - title: const Text('Pick a color!'), - content: SingleChildScrollView( - child: _ColorPicker( - color: color ?? Colors.white, - sampleColors: widget.colorSamples, - onColorChanged: (newColor) => setState(() => color = newColor), - ), - ), - actions: [ - ElevatedButton( - child: const Text('Abort'), - onPressed: () => Navigator.of(context).pop(), - ), - ElevatedButton( - child: const Text('Accept'), - onPressed: () { - widget.updateValue(color); - Navigator.of(context).pop(); - }, - ), - ], - ); - }, - ); - }, - ); - }, - child: Align( - alignment: Alignment.centerRight, - child: MouseRegion( - cursor: SystemMouseCursors.click, - child: ClipRRect( - borderRadius: BorderRadius.circular(8), - child: Container( - height: 38, - width: 38, - foregroundDecoration: BoxDecoration( - // The actual color drawn over the chessboard pattern - color: widget.configurator.value, - ), - // The chessboard pattern - child: const CustomPaint( - foregroundPainter: ChessBoardPainter( - boxSize: 8, - // The color of the chessboard pattern - color: Colors.grey, - ), - child: ColoredBox( - // Background of the chessboard pattern - color: Colors.white, - ), - ), - ), - ), - ), - ), - ); - } -} -*/ class ChessBoardPainter extends CustomPainter { const ChessBoardPainter({ required this.color, From e0f267a85b3b05e6cc6a59cabff7f907bf410233 Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Tue, 4 Jul 2023 12:30:46 +0200 Subject: [PATCH 04/23] Sort pub deps --- example/pubspec.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/pubspec.yaml b/example/pubspec.yaml index a97b737..c56235f 100644 --- a/example/pubspec.yaml +++ b/example/pubspec.yaml @@ -17,9 +17,9 @@ dependencies: dev_dependencies: - lint: ^2.1.2 flutter_test: sdk: flutter + lint: ^2.1.2 flutter: From c28641f340b1cfe0a7e99bb278a1932e68d40217 Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Tue, 4 Jul 2023 12:47:40 +0200 Subject: [PATCH 05/23] Rename sample color --- .../color_field_configurator.dart | 60 +++++++++++++------ .../field_configurator.dart | 1 - 2 files changed, 42 insertions(+), 19 deletions(-) diff --git a/lib/src/field_configurators/color_field_configurator.dart b/lib/src/field_configurators/color_field_configurator.dart index fbff036..3646ee2 100644 --- a/lib/src/field_configurators/color_field_configurator.dart +++ b/lib/src/field_configurators/color_field_configurator.dart @@ -30,7 +30,7 @@ class ColorFieldConfiguratorNullable extends FieldConfigurator { this.colorSamples, }); - final List? colorSamples; + final List? colorSamples; @override Widget build(BuildContext context) { @@ -50,7 +50,7 @@ class ColorConfigurationWidget extends ConfigurationWidget { this.colorSamples, }); - final List? colorSamples; + final List? colorSamples; @override Widget build(BuildContext context) { @@ -67,7 +67,7 @@ class ColorConfigurationWidget extends ConfigurationWidget { content: SingleChildScrollView( child: _ColorPicker( color: color ?? Colors.white, - sampleColors: colorSamples, + colorSamples: colorSamples, onColorChanged: (newColor) => setState(() => color = newColor), ), ), @@ -168,12 +168,12 @@ class ChessBoardPainter extends CustomPainter { class _ColorPicker extends StatelessWidget { const _ColorPicker({ - this.sampleColors, + this.colorSamples, this.color, required this.onColorChanged, }); - final List? sampleColors; + final List? colorSamples; final Color? color; final void Function(Color color) onColorChanged; @@ -186,27 +186,42 @@ class _ColorPicker extends StatelessWidget { pickerColor: color ?? Colors.white, onColorChanged: onColorChanged, ), - if (sampleColors?.isNotEmpty == true) ...[ + if (colorSamples?.isNotEmpty == true) ...[ const SizedBox(height: 32.0), const Text('Color Samples'), - const SizedBox(height: 8.0), - Row( - mainAxisSize: MainAxisSize.min, - children: sampleColors!.map( + const SizedBox(height: 16.0), + Wrap( + spacing: 18, + runSpacing: 10, + children: colorSamples!.map( (sampleColor) { return Padding( padding: const EdgeInsets.only(right: 8.0, bottom: 8.0), child: MouseRegion( cursor: SystemMouseCursors.click, child: GestureDetector( - onTap: () => onColorChanged(sampleColor), - child: Container( - width: 30, - height: 30, - decoration: BoxDecoration( - color: sampleColor, - shape: BoxShape.circle, - ), + onTap: () => onColorChanged(sampleColor.color), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Container( + width: 30, + height: 30, + decoration: BoxDecoration( + color: sampleColor.color, + shape: BoxShape.circle, + ), + ), + if (sampleColor.name != null) ...[ + const SizedBox(height: 6.0), + Text( + sampleColor.name!, + style: const TextStyle( + fontSize: 10, + ), + ), + ] + ], ), ), ), @@ -219,3 +234,12 @@ class _ColorPicker extends StatelessWidget { ); } } + +class ColorSample { + const ColorSample({ + required this.color, + this.name, + }); + final String? name; + final Color color; +} diff --git a/lib/src/field_configurators/field_configurator.dart b/lib/src/field_configurators/field_configurator.dart index 2143461..0488db1 100644 --- a/lib/src/field_configurators/field_configurator.dart +++ b/lib/src/field_configurators/field_configurator.dart @@ -1,6 +1,5 @@ import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; -import 'package:flutter/widgets.dart'; export 'bool_field_configurator.dart'; export 'color_field_configurator.dart'; From 7a56a1d5dffbf29aa60e788d3ebf2b2cd764f846 Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Tue, 4 Jul 2023 12:51:06 +0200 Subject: [PATCH 06/23] Use scrollable argument of dialog instead of SingleChildScrollView --- .../color_field_configurator.dart | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/lib/src/field_configurators/color_field_configurator.dart b/lib/src/field_configurators/color_field_configurator.dart index 3646ee2..13d79f3 100644 --- a/lib/src/field_configurators/color_field_configurator.dart +++ b/lib/src/field_configurators/color_field_configurator.dart @@ -63,13 +63,12 @@ class ColorConfigurationWidget extends ConfigurationWidget { return StatefulBuilder( builder: (context, setState) { return AlertDialog( + scrollable: true, title: const Text('Pick a color!'), - content: SingleChildScrollView( - child: _ColorPicker( - color: color ?? Colors.white, - colorSamples: colorSamples, - onColorChanged: (newColor) => setState(() => color = newColor), - ), + content: _ColorPicker( + color: color ?? Colors.white, + colorSamples: colorSamples, + onColorChanged: (newColor) => setState(() => color = newColor), ), actions: [ ElevatedButton( @@ -194,13 +193,13 @@ class _ColorPicker extends StatelessWidget { spacing: 18, runSpacing: 10, children: colorSamples!.map( - (sampleColor) { + (sample) { return Padding( padding: const EdgeInsets.only(right: 8.0, bottom: 8.0), child: MouseRegion( cursor: SystemMouseCursors.click, child: GestureDetector( - onTap: () => onColorChanged(sampleColor.color), + onTap: () => onColorChanged(sample.color), child: Column( mainAxisSize: MainAxisSize.min, children: [ @@ -208,14 +207,14 @@ class _ColorPicker extends StatelessWidget { width: 30, height: 30, decoration: BoxDecoration( - color: sampleColor.color, + color: sample.color, shape: BoxShape.circle, ), ), - if (sampleColor.name != null) ...[ + if (sample.name != null) ...[ const SizedBox(height: 6.0), Text( - sampleColor.name!, + sample.name!, style: const TextStyle( fontSize: 10, ), From fd74a5d9206851d957bb6c2c22e7013e25c572e8 Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Tue, 4 Jul 2023 12:55:45 +0200 Subject: [PATCH 07/23] Add example data class --- example/lib/stage_data/example_data.dart | 27 ++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 example/lib/stage_data/example_data.dart diff --git a/example/lib/stage_data/example_data.dart b/example/lib/stage_data/example_data.dart new file mode 100644 index 0000000..1f3f45b --- /dev/null +++ b/example/lib/stage_data/example_data.dart @@ -0,0 +1,27 @@ +import 'package:flutter/material.dart'; +import 'package:stage_craft/stage_craft.dart'; + +class ExampleData { + static const sampleColors = [ + ColorSample( + color: Colors.teal, + name: 'StgColors.teal', + ), + ColorSample( + color: Colors.amber, + name: 'StgColors.amber', + ), + ColorSample( + color: Colors.indigo, + name: 'StgColors.indigo', + ), + ColorSample( + color: Colors.blueAccent, + name: 'StgColors.blueAccent', + ), + ColorSample( + color: Colors.lime, + name: 'StgColors.lime', + ), + ]; +} From 1ec9803ee1f63115dc9e5218cd8cf70c317f6260 Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Tue, 4 Jul 2023 12:56:49 +0200 Subject: [PATCH 08/23] Add example data to MyListTileWidget --- example/lib/stage_data/my_list_tile_widget_stage.dart | 7 ++++++- lib/src/field_configurators/color_field_configurator.dart | 3 ++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/example/lib/stage_data/my_list_tile_widget_stage.dart b/example/lib/stage_data/my_list_tile_widget_stage.dart index ae5287a..0f4f6bc 100644 --- a/example/lib/stage_data/my_list_tile_widget_stage.dart +++ b/example/lib/stage_data/my_list_tile_widget_stage.dart @@ -1,3 +1,4 @@ +import 'package:example/stage_data/example_data.dart'; import 'package:flutter/material.dart'; import 'package:stage_craft/stage_craft.dart'; @@ -7,7 +8,11 @@ class MyListTileWidgetStage extends WidgetStageData { _listPadding = PaddingFieldConfigurator(value: EdgeInsets.zero, name: 'listPadding'), _title = StringFieldConfigurator(value: 'My List Tile', name: 'title'), _circleColor = ColorFieldConfigurator(value: Colors.purple, name: 'circleColor'), - _tileColor = ColorFieldConfiguratorNullable(value: Colors.cyan, name: 'tileColor'), + _tileColor = ColorFieldConfiguratorNullable( + value: Colors.cyan, + name: 'tileColor', + colorSamples: ExampleData.sampleColors, + ), _textColor = ColorFieldConfiguratorNullable(value: Colors.white, name: 'textColor'), _borderRadius = DoubleFieldConfiguratorNullable(value: 10, name: 'borderRadius'), _tileGap = DoubleFieldConfigurator(value: 0, name: 'tileSpace'); diff --git a/lib/src/field_configurators/color_field_configurator.dart b/lib/src/field_configurators/color_field_configurator.dart index 13d79f3..6863a38 100644 --- a/lib/src/field_configurators/color_field_configurator.dart +++ b/lib/src/field_configurators/color_field_configurator.dart @@ -9,7 +9,7 @@ class ColorFieldConfigurator extends FieldConfigurator { this.colorSamples, }); - final List? colorSamples; + final List? colorSamples; @override Widget build(BuildContext context) { @@ -18,6 +18,7 @@ class ColorFieldConfigurator extends FieldConfigurator { updateValue: (Color? color) { updateValue(color ?? Colors.transparent); }, + colorSamples: colorSamples, ); } } From ffdfa99fb5ad35a7248c39fb10b18aea32452c74 Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Tue, 4 Jul 2023 12:58:29 +0200 Subject: [PATCH 09/23] Rename variable --- example/lib/stage_data/example_data.dart | 2 +- example/lib/stage_data/my_list_tile_widget_stage.dart | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/example/lib/stage_data/example_data.dart b/example/lib/stage_data/example_data.dart index 1f3f45b..4f387f9 100644 --- a/example/lib/stage_data/example_data.dart +++ b/example/lib/stage_data/example_data.dart @@ -2,7 +2,7 @@ import 'package:flutter/material.dart'; import 'package:stage_craft/stage_craft.dart'; class ExampleData { - static const sampleColors = [ + static const colorSamples = [ ColorSample( color: Colors.teal, name: 'StgColors.teal', diff --git a/example/lib/stage_data/my_list_tile_widget_stage.dart b/example/lib/stage_data/my_list_tile_widget_stage.dart index 0f4f6bc..5cb2c76 100644 --- a/example/lib/stage_data/my_list_tile_widget_stage.dart +++ b/example/lib/stage_data/my_list_tile_widget_stage.dart @@ -11,7 +11,7 @@ class MyListTileWidgetStage extends WidgetStageData { _tileColor = ColorFieldConfiguratorNullable( value: Colors.cyan, name: 'tileColor', - colorSamples: ExampleData.sampleColors, + colorSamples: ExampleData.colorSamples, ), _textColor = ColorFieldConfiguratorNullable(value: Colors.white, name: 'textColor'), _borderRadius = DoubleFieldConfiguratorNullable(value: 10, name: 'borderRadius'), From 64c19447564f28964887e31014c27333977594ef Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Tue, 4 Jul 2023 13:01:50 +0200 Subject: [PATCH 10/23] Use spacing instead of padding --- .../color_field_configurator.dart | 51 +++++++++---------- 1 file changed, 24 insertions(+), 27 deletions(-) diff --git a/lib/src/field_configurators/color_field_configurator.dart b/lib/src/field_configurators/color_field_configurator.dart index 6863a38..a359bd0 100644 --- a/lib/src/field_configurators/color_field_configurator.dart +++ b/lib/src/field_configurators/color_field_configurator.dart @@ -191,38 +191,35 @@ class _ColorPicker extends StatelessWidget { const Text('Color Samples'), const SizedBox(height: 16.0), Wrap( - spacing: 18, + spacing: 24, runSpacing: 10, children: colorSamples!.map( (sample) { - return Padding( - padding: const EdgeInsets.only(right: 8.0, bottom: 8.0), - child: MouseRegion( - cursor: SystemMouseCursors.click, - child: GestureDetector( - onTap: () => onColorChanged(sample.color), - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - Container( - width: 30, - height: 30, - decoration: BoxDecoration( - color: sample.color, - shape: BoxShape.circle, - ), + return MouseRegion( + cursor: SystemMouseCursors.click, + child: GestureDetector( + onTap: () => onColorChanged(sample.color), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Container( + width: 30, + height: 30, + decoration: BoxDecoration( + color: sample.color, + shape: BoxShape.circle, ), - if (sample.name != null) ...[ - const SizedBox(height: 6.0), - Text( - sample.name!, - style: const TextStyle( - fontSize: 10, - ), + ), + if (sample.name != null) ...[ + const SizedBox(height: 6.0), + Text( + sample.name!, + style: const TextStyle( + fontSize: 10, ), - ] - ], - ), + ), + ] + ], ), ), ); From 8eb6f4284c009e597596a97bd31a102e785c2b5f Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Tue, 4 Jul 2023 13:04:01 +0200 Subject: [PATCH 11/23] Add call to callback --- lib/src/field_configurators/color_field_configurator.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/src/field_configurators/color_field_configurator.dart b/lib/src/field_configurators/color_field_configurator.dart index a359bd0..4f616c5 100644 --- a/lib/src/field_configurators/color_field_configurator.dart +++ b/lib/src/field_configurators/color_field_configurator.dart @@ -198,7 +198,7 @@ class _ColorPicker extends StatelessWidget { return MouseRegion( cursor: SystemMouseCursors.click, child: GestureDetector( - onTap: () => onColorChanged(sample.color), + onTap: () => onColorChanged.call(sample.color), child: Column( mainAxisSize: MainAxisSize.min, children: [ From 73a022712866f49f0c34dba0d8988b3c0efa9b61 Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Tue, 4 Jul 2023 13:05:13 +0200 Subject: [PATCH 12/23] Make configuration widget private --- .../field_configurators/color_field_configurator.dart | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/lib/src/field_configurators/color_field_configurator.dart b/lib/src/field_configurators/color_field_configurator.dart index 4f616c5..9686af5 100644 --- a/lib/src/field_configurators/color_field_configurator.dart +++ b/lib/src/field_configurators/color_field_configurator.dart @@ -13,7 +13,7 @@ class ColorFieldConfigurator extends FieldConfigurator { @override Widget build(BuildContext context) { - return ColorConfigurationWidget( + return _ColorConfigurationWidget( value: value, updateValue: (Color? color) { updateValue(color ?? Colors.transparent); @@ -35,7 +35,7 @@ class ColorFieldConfiguratorNullable extends FieldConfigurator { @override Widget build(BuildContext context) { - return ColorConfigurationWidget( + return _ColorConfigurationWidget( value: value, updateValue: updateValue, colorSamples: colorSamples, @@ -43,9 +43,8 @@ class ColorFieldConfiguratorNullable extends FieldConfigurator { } } -class ColorConfigurationWidget extends ConfigurationWidget { - const ColorConfigurationWidget({ - super.key, +class _ColorConfigurationWidget extends ConfigurationWidget { + const _ColorConfigurationWidget({ required super.value, required super.updateValue, this.colorSamples, From af5d6f409b70e2784ce17b80c64321824b42474c Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Tue, 4 Jul 2023 13:19:22 +0200 Subject: [PATCH 13/23] Use block body for onColorChanged --- .../field_configurators/color_field_configurator.dart | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/lib/src/field_configurators/color_field_configurator.dart b/lib/src/field_configurators/color_field_configurator.dart index 9686af5..89ec02d 100644 --- a/lib/src/field_configurators/color_field_configurator.dart +++ b/lib/src/field_configurators/color_field_configurator.dart @@ -68,19 +68,23 @@ class _ColorConfigurationWidget extends ConfigurationWidget { content: _ColorPicker( color: color ?? Colors.white, colorSamples: colorSamples, - onColorChanged: (newColor) => setState(() => color = newColor), + onColorChanged: (newColor) { + setState(() { + color = newColor; + }); + }, ), actions: [ ElevatedButton( + onPressed: Navigator.of(context).pop, child: const Text('Abort'), - onPressed: () => Navigator.of(context).pop(), ), ElevatedButton( - child: const Text('Accept'), onPressed: () { updateValue(color); Navigator.of(context).pop(); }, + child: const Text('Accept'), ), ], ); From 69958c1de87e4a0ff27f80090174e3288bdc3fbd Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Tue, 4 Jul 2023 13:31:17 +0200 Subject: [PATCH 14/23] Add documentation --- .../color_field_configurator.dart | 48 +++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/lib/src/field_configurators/color_field_configurator.dart b/lib/src/field_configurators/color_field_configurator.dart index 89ec02d..d5dfd3a 100644 --- a/lib/src/field_configurators/color_field_configurator.dart +++ b/lib/src/field_configurators/color_field_configurator.dart @@ -169,15 +169,45 @@ class ChessBoardPainter extends CustomPainter { } } +/// A `_ColorPicker` widget presents a color picking interface with two modes of color selection. +/// +/// The widget provides a complete color picker that allows free selection of any color. In addition, +/// it also presents a list of predefined color samples to quickly select from if [colorSamples] are provided. +/// +/// ``` +/// // Creating a _ColorPicker widget +/// _ColorPicker( +/// colorSamples: [ColorSample(color: Colors.blue, name: 'Blue')], +/// color: Colors.red, +/// onColorChanged: (color) { +/// print('Color changed to $color'); +/// }, +/// ); +/// ``` class _ColorPicker extends StatelessWidget { + /// Creates a `_ColorPicker`. + /// + /// The [colorSamples] parameter is a list of `ColorSample` objects, each representing a predefined color. + /// This parameter is optional, if it's null or empty, no color samples will be displayed. + /// + /// The [color] parameter represents the currently selected color in the [ColorPicker]. If not provided, + /// the color picker will default to white. + /// + /// The [onColorChanged] parameter is a callback that will be called when a new color is selected, either + /// from the [ColorPicker] or from the color samples. This parameter is required. const _ColorPicker({ this.colorSamples, this.color, required this.onColorChanged, }); + /// List of color samples. Can be null. final List? colorSamples; + + /// Currently selected color. Can be null, in which case the color picker defaults to white. final Color? color; + + /// Callback that is called when a new color is selected. final void Function(Color color) onColorChanged; @override @@ -235,11 +265,29 @@ class _ColorPicker extends StatelessWidget { } } +/// A ColorSample class represents a color sample with an optional name. +/// +/// It contains a `Color` and an optional `String` to represent its according name. +/// +/// Used as optional parameters in [ColorFieldConfigurator] and [ColorFieldConfiguratorNullable]. +/// ``` +/// // Creating a ColorSample +/// const ColorSample sample = ColorSample(color: Colors.blue, name: "MyColors.blue"); +/// ``` class ColorSample { + /// Creates a `ColorSample`. + /// + /// The [color] parameter is required, and it represents the actual color of the sample. + /// + /// The [name] parameter is optional. It can be used to assign a specific name to the sample. const ColorSample({ required this.color, this.name, }); + + /// The name of the color sample, can be null. final String? name; + + /// The color of the color sample. This property is required and cannot be null. final Color color; } From 09e715a96bb773ac7a6ebac42fbc82cf1510af9a Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Tue, 4 Jul 2023 13:33:06 +0200 Subject: [PATCH 15/23] Adjust doc --- lib/src/field_configurators/color_field_configurator.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/src/field_configurators/color_field_configurator.dart b/lib/src/field_configurators/color_field_configurator.dart index d5dfd3a..3c66ae1 100644 --- a/lib/src/field_configurators/color_field_configurator.dart +++ b/lib/src/field_configurators/color_field_configurator.dart @@ -175,7 +175,7 @@ class ChessBoardPainter extends CustomPainter { /// it also presents a list of predefined color samples to quickly select from if [colorSamples] are provided. /// /// ``` -/// // Creating a _ColorPicker widget +/// Creating a _ColorPicker widget /// _ColorPicker( /// colorSamples: [ColorSample(color: Colors.blue, name: 'Blue')], /// color: Colors.red, From 373055818c425ad15f3739bc7f447cb9e7aa28a1 Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Tue, 4 Jul 2023 13:33:41 +0200 Subject: [PATCH 16/23] Adjust color sample doc --- lib/src/field_configurators/color_field_configurator.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/src/field_configurators/color_field_configurator.dart b/lib/src/field_configurators/color_field_configurator.dart index 3c66ae1..e079236 100644 --- a/lib/src/field_configurators/color_field_configurator.dart +++ b/lib/src/field_configurators/color_field_configurator.dart @@ -271,7 +271,7 @@ class _ColorPicker extends StatelessWidget { /// /// Used as optional parameters in [ColorFieldConfigurator] and [ColorFieldConfiguratorNullable]. /// ``` -/// // Creating a ColorSample +/// Creating a ColorSample /// const ColorSample sample = ColorSample(color: Colors.blue, name: "MyColors.blue"); /// ``` class ColorSample { From 692b3c6b3b61df41df3534a894a2296c698fdbc1 Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Tue, 4 Jul 2023 13:47:49 +0200 Subject: [PATCH 17/23] Move into separate file --- .../color_field_configurator.dart | 126 +----------------- lib/src/widgets/color_picker.dart | 125 +++++++++++++++++ lib/stage_craft.dart | 1 + 3 files changed, 127 insertions(+), 125 deletions(-) create mode 100644 lib/src/widgets/color_picker.dart diff --git a/lib/src/field_configurators/color_field_configurator.dart b/lib/src/field_configurators/color_field_configurator.dart index e079236..d1ee5e4 100644 --- a/lib/src/field_configurators/color_field_configurator.dart +++ b/lib/src/field_configurators/color_field_configurator.dart @@ -1,5 +1,4 @@ import 'package:flutter/material.dart'; -import 'package:flutter_colorpicker/flutter_colorpicker.dart'; import 'package:stage_craft/stage_craft.dart'; class ColorFieldConfigurator extends FieldConfigurator { @@ -65,7 +64,7 @@ class _ColorConfigurationWidget extends ConfigurationWidget { return AlertDialog( scrollable: true, title: const Text('Pick a color!'), - content: _ColorPicker( + content: ColorPicker( color: color ?? Colors.white, colorSamples: colorSamples, onColorChanged: (newColor) { @@ -168,126 +167,3 @@ class ChessBoardPainter extends CustomPainter { return true; } } - -/// A `_ColorPicker` widget presents a color picking interface with two modes of color selection. -/// -/// The widget provides a complete color picker that allows free selection of any color. In addition, -/// it also presents a list of predefined color samples to quickly select from if [colorSamples] are provided. -/// -/// ``` -/// Creating a _ColorPicker widget -/// _ColorPicker( -/// colorSamples: [ColorSample(color: Colors.blue, name: 'Blue')], -/// color: Colors.red, -/// onColorChanged: (color) { -/// print('Color changed to $color'); -/// }, -/// ); -/// ``` -class _ColorPicker extends StatelessWidget { - /// Creates a `_ColorPicker`. - /// - /// The [colorSamples] parameter is a list of `ColorSample` objects, each representing a predefined color. - /// This parameter is optional, if it's null or empty, no color samples will be displayed. - /// - /// The [color] parameter represents the currently selected color in the [ColorPicker]. If not provided, - /// the color picker will default to white. - /// - /// The [onColorChanged] parameter is a callback that will be called when a new color is selected, either - /// from the [ColorPicker] or from the color samples. This parameter is required. - const _ColorPicker({ - this.colorSamples, - this.color, - required this.onColorChanged, - }); - - /// List of color samples. Can be null. - final List? colorSamples; - - /// Currently selected color. Can be null, in which case the color picker defaults to white. - final Color? color; - - /// Callback that is called when a new color is selected. - final void Function(Color color) onColorChanged; - - @override - Widget build(BuildContext context) { - return Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - ColorPicker( - pickerColor: color ?? Colors.white, - onColorChanged: onColorChanged, - ), - if (colorSamples?.isNotEmpty == true) ...[ - const SizedBox(height: 32.0), - const Text('Color Samples'), - const SizedBox(height: 16.0), - Wrap( - spacing: 24, - runSpacing: 10, - children: colorSamples!.map( - (sample) { - return MouseRegion( - cursor: SystemMouseCursors.click, - child: GestureDetector( - onTap: () => onColorChanged.call(sample.color), - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - Container( - width: 30, - height: 30, - decoration: BoxDecoration( - color: sample.color, - shape: BoxShape.circle, - ), - ), - if (sample.name != null) ...[ - const SizedBox(height: 6.0), - Text( - sample.name!, - style: const TextStyle( - fontSize: 10, - ), - ), - ] - ], - ), - ), - ); - }, - ).toList(), - ), - ] - ], - ); - } -} - -/// A ColorSample class represents a color sample with an optional name. -/// -/// It contains a `Color` and an optional `String` to represent its according name. -/// -/// Used as optional parameters in [ColorFieldConfigurator] and [ColorFieldConfiguratorNullable]. -/// ``` -/// Creating a ColorSample -/// const ColorSample sample = ColorSample(color: Colors.blue, name: "MyColors.blue"); -/// ``` -class ColorSample { - /// Creates a `ColorSample`. - /// - /// The [color] parameter is required, and it represents the actual color of the sample. - /// - /// The [name] parameter is optional. It can be used to assign a specific name to the sample. - const ColorSample({ - required this.color, - this.name, - }); - - /// The name of the color sample, can be null. - final String? name; - - /// The color of the color sample. This property is required and cannot be null. - final Color color; -} diff --git a/lib/src/widgets/color_picker.dart b/lib/src/widgets/color_picker.dart new file mode 100644 index 0000000..2d6c886 --- /dev/null +++ b/lib/src/widgets/color_picker.dart @@ -0,0 +1,125 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_colorpicker/flutter_colorpicker.dart' as picker; + +/// A `_ColorPicker` widget presents a color picking interface with two modes of color selection. +/// +/// The widget provides a complete color picker that allows free selection of any color. In addition, +/// it also presents a list of predefined color samples to quickly select from if [colorSamples] are provided. +/// +/// ``` +/// Creating a _ColorPicker widget +/// _ColorPicker( +/// colorSamples: [ColorSample(color: Colors.blue, name: 'Blue')], +/// color: Colors.red, +/// onColorChanged: (color) { +/// print('Color changed to $color'); +/// }, +/// ); +/// ``` +class ColorPicker extends StatelessWidget { + /// Creates a `ColorPicker`. + /// + /// The [colorSamples] parameter is a list of `ColorSample` objects, each representing a predefined color. + /// This parameter is optional, if it's null or empty, no color samples will be displayed. + /// + /// The [color] parameter represents the currently selected color in the [ColorPicker]. If not provided, + /// the color picker will default to white. + /// + /// The [onColorChanged] parameter is a callback that will be called when a new color is selected, either + /// from the [ColorPicker] or from the color samples. This parameter is required. + const ColorPicker({ + this.colorSamples, + this.color, + required this.onColorChanged, + }); + + /// List of color samples. Can be null. + final List? colorSamples; + + /// Currently selected color. Can be null, in which case the color picker defaults to white. + final Color? color; + + /// Callback that is called when a new color is selected. + final void Function(Color color) onColorChanged; + + @override + Widget build(BuildContext context) { + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + picker.ColorPicker( + pickerColor: color ?? Colors.white, + onColorChanged: onColorChanged, + ), + if (colorSamples?.isNotEmpty == true) ...[ + const SizedBox(height: 32.0), + const Text('Color Samples'), + const SizedBox(height: 16.0), + Wrap( + spacing: 24, + runSpacing: 10, + children: colorSamples!.map( + (sample) { + return MouseRegion( + cursor: SystemMouseCursors.click, + child: GestureDetector( + onTap: () => onColorChanged.call(sample.color), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Container( + width: 30, + height: 30, + decoration: BoxDecoration( + color: sample.color, + shape: BoxShape.circle, + ), + ), + if (sample.name != null) ...[ + const SizedBox(height: 6.0), + Text( + sample.name!, + style: const TextStyle( + fontSize: 10, + ), + ), + ] + ], + ), + ), + ); + }, + ).toList(), + ), + ] + ], + ); + } +} + +/// A ColorSample class represents a color sample with an optional name. +/// +/// It contains a `Color` and an optional `String` to represent its according name. +/// +/// Used as optional parameters in [ColorFieldConfigurator] and [ColorFieldConfiguratorNullable]. +/// ``` +/// Creating a ColorSample +/// const ColorSample sample = ColorSample(color: Colors.blue, name: "MyColors.blue"); +/// ``` +class ColorSample { + /// Creates a `ColorSample`. + /// + /// The [color] parameter is required, and it represents the actual color of the sample. + /// + /// The [name] parameter is optional. It can be used to assign a specific name to the sample. + const ColorSample({ + required this.color, + this.name, + }); + + /// The name of the color sample, can be null. + final String? name; + + /// The color of the color sample. This property is required and cannot be null. + final Color color; +} diff --git a/lib/stage_craft.dart b/lib/stage_craft.dart index f0451c5..2d2df5d 100644 --- a/lib/stage_craft.dart +++ b/lib/stage_craft.dart @@ -1,4 +1,5 @@ export 'src/field_configurators/field_configurator.dart'; export 'src/stage_controller.dart'; export 'src/widget_stage_data.dart'; +export 'src/widgets/color_picker.dart'; export 'src/widgets/stage_craft.dart'; From 7a1064e19011bd5e18b170301ad822ef0fd72173 Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Tue, 4 Jul 2023 13:49:03 +0200 Subject: [PATCH 18/23] Make ColorFieldConfigurationWidget public --- lib/src/field_configurators/color_field_configurator.dart | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/src/field_configurators/color_field_configurator.dart b/lib/src/field_configurators/color_field_configurator.dart index d1ee5e4..8be87ef 100644 --- a/lib/src/field_configurators/color_field_configurator.dart +++ b/lib/src/field_configurators/color_field_configurator.dart @@ -12,7 +12,7 @@ class ColorFieldConfigurator extends FieldConfigurator { @override Widget build(BuildContext context) { - return _ColorConfigurationWidget( + return ColorConfigurationWidget( value: value, updateValue: (Color? color) { updateValue(color ?? Colors.transparent); @@ -34,7 +34,7 @@ class ColorFieldConfiguratorNullable extends FieldConfigurator { @override Widget build(BuildContext context) { - return _ColorConfigurationWidget( + return ColorConfigurationWidget( value: value, updateValue: updateValue, colorSamples: colorSamples, @@ -42,8 +42,8 @@ class ColorFieldConfiguratorNullable extends FieldConfigurator { } } -class _ColorConfigurationWidget extends ConfigurationWidget { - const _ColorConfigurationWidget({ +class ColorConfigurationWidget extends ConfigurationWidget { + const ColorConfigurationWidget({ required super.value, required super.updateValue, this.colorSamples, From 34e9a262f5cff94aebbbe856afe1f1884c236212 Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Tue, 4 Jul 2023 13:50:17 +0200 Subject: [PATCH 19/23] Add key to ColorConfigurationWidget --- lib/src/field_configurators/color_field_configurator.dart | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/src/field_configurators/color_field_configurator.dart b/lib/src/field_configurators/color_field_configurator.dart index 8be87ef..7884877 100644 --- a/lib/src/field_configurators/color_field_configurator.dart +++ b/lib/src/field_configurators/color_field_configurator.dart @@ -44,6 +44,7 @@ class ColorFieldConfiguratorNullable extends FieldConfigurator { class ColorConfigurationWidget extends ConfigurationWidget { const ColorConfigurationWidget({ + super.key, required super.value, required super.updateValue, this.colorSamples, From fced1bdceb724446ae7603b6bd87768bfbacc78a Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Tue, 4 Jul 2023 13:51:30 +0200 Subject: [PATCH 20/23] Adjust doc to name change --- lib/src/widgets/color_picker.dart | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/src/widgets/color_picker.dart b/lib/src/widgets/color_picker.dart index 2d6c886..95cb603 100644 --- a/lib/src/widgets/color_picker.dart +++ b/lib/src/widgets/color_picker.dart @@ -1,14 +1,14 @@ import 'package:flutter/material.dart'; import 'package:flutter_colorpicker/flutter_colorpicker.dart' as picker; -/// A `_ColorPicker` widget presents a color picking interface with two modes of color selection. +/// A color picking interface with two modes of color selection. /// /// The widget provides a complete color picker that allows free selection of any color. In addition, /// it also presents a list of predefined color samples to quickly select from if [colorSamples] are provided. /// /// ``` -/// Creating a _ColorPicker widget -/// _ColorPicker( +/// Creating a ColorPicker widget +/// ColorPicker( /// colorSamples: [ColorSample(color: Colors.blue, name: 'Blue')], /// color: Colors.red, /// onColorChanged: (color) { From 0793120966dc1ab1b860770b51c4ae4a82cff4d8 Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Tue, 4 Jul 2023 13:53:42 +0200 Subject: [PATCH 21/23] Rm wrong reference in doc --- lib/src/widgets/color_picker.dart | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/lib/src/widgets/color_picker.dart b/lib/src/widgets/color_picker.dart index 95cb603..883d167 100644 --- a/lib/src/widgets/color_picker.dart +++ b/lib/src/widgets/color_picker.dart @@ -25,8 +25,7 @@ class ColorPicker extends StatelessWidget { /// The [color] parameter represents the currently selected color in the [ColorPicker]. If not provided, /// the color picker will default to white. /// - /// The [onColorChanged] parameter is a callback that will be called when a new color is selected, either - /// from the [ColorPicker] or from the color samples. This parameter is required. + /// The required [onColorChanged] parameter is a callback that will be called when a new color is selected. const ColorPicker({ this.colorSamples, this.color, From 925136152892349760cd95494c51d3efc7bd7ea8 Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Tue, 4 Jul 2023 14:05:41 +0200 Subject: [PATCH 22/23] Improve gesture detection --- lib/src/widgets/color_picker.dart | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/src/widgets/color_picker.dart b/lib/src/widgets/color_picker.dart index 883d167..b597d1b 100644 --- a/lib/src/widgets/color_picker.dart +++ b/lib/src/widgets/color_picker.dart @@ -59,10 +59,10 @@ class ColorPicker extends StatelessWidget { runSpacing: 10, children: colorSamples!.map( (sample) { - return MouseRegion( - cursor: SystemMouseCursors.click, - child: GestureDetector( - onTap: () => onColorChanged.call(sample.color), + return GestureDetector( + onTap: () => onColorChanged.call(sample.color), + child: MouseRegion( + cursor: SystemMouseCursors.click, child: Column( mainAxisSize: MainAxisSize.min, children: [ From 3927f1327b458b6b471ec977362ac3becd45b274 Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Tue, 4 Jul 2023 16:22:16 +0200 Subject: [PATCH 23/23] Add isSelected indicator to color sample --- lib/src/widgets/color_picker.dart | 29 ++++++++++++++++++++++++++--- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/lib/src/widgets/color_picker.dart b/lib/src/widgets/color_picker.dart index b597d1b..d9eef23 100644 --- a/lib/src/widgets/color_picker.dart +++ b/lib/src/widgets/color_picker.dart @@ -59,6 +59,7 @@ class ColorPicker extends StatelessWidget { runSpacing: 10, children: colorSamples!.map( (sample) { + final isSelected = sample.color == color; return GestureDetector( onTap: () => onColorChanged.call(sample.color), child: MouseRegion( @@ -67,12 +68,34 @@ class ColorPicker extends StatelessWidget { mainAxisSize: MainAxisSize.min, children: [ Container( - width: 30, - height: 30, + width: 38, + height: 38, decoration: BoxDecoration( - color: sample.color, + color: isSelected ? Colors.blue : Colors.transparent, shape: BoxShape.circle, ), + child: Padding( + padding: const EdgeInsets.all(2), + child: Container( + width: 34, + height: 34, + decoration: BoxDecoration( + color: isSelected ? Colors.white : Colors.transparent, + shape: BoxShape.circle, + ), + child: Padding( + padding: const EdgeInsets.all(2), + child: Container( + width: 30, + height: 30, + decoration: BoxDecoration( + color: sample.color, + shape: BoxShape.circle, + ), + ), + ), + ), + ), ), if (sample.name != null) ...[ const SizedBox(height: 6.0),