FEATURE: ColorPicker.tonalColorSameSize

Author: rydmike

CHANGELOG.md

@@ -2,10 +2,14 @@
 
 All notable changes to the **FlexColorPicker** package are documented in this file.
 
-## 3.2.3
+## 3.3.0
 
 **July 18, 2023**
 
+**NEW**
+
+- Use `ColorPicker.tonalColorSameSize` set to true, to make the Material-3 HCT tonal palette color indicators use the same size as the size defined for the other color indicators. Previously and by default, the tonal color indicators are smaller to make the palette width match the width of the Material-2 swatch color palette, that has fewer colors.
+
 **FIX**
 
 - Fixed issue [#67 Inner circle does not move](https://github.com/rydmike/flex_color_picker/issues/67).

README.md

@@ -35,6 +35,7 @@ aware COPY-PASTE keyboard shortcuts.
     - [Elements of the Picker](#elements-of-the-picker)
         - [Enabled Color Pickers](#enabled-color-pickers)
         - [Enable Shades Selection](#enable-shades-selection)
+        - [Tonal Palette](#tonal-palette)
         - [Custom Color Swatches](#custom-color-swatches)
         - [Customized labels](#customized-labels)
         - [Enable Opacity](#enable-opacity)
@@ -721,11 +722,11 @@ which you do by setting `enableShadesSelection` to false.
 
 <img src="https://github.com/rydmike/flex_color_picker/blob/master/resources/FCP-enabled-4.png?raw=true" alt="Pickers 4"/>
 
-### Enable Tonal Palette
+### Tonal Palette
 
-API reference: [enableTonalPalette](https://pub.dev/documentation/flex_color_picker/latest/flex_color_picker/ColorPicker/enableTonalPalette.html)
+API reference: [enableTonalPalette](https://pub.dev/documentation/flex_color_picker/latest/flex_color_picker/ColorPicker/enableTonalPalette.html), [tonalColorSameSize](https://pub.dev/documentation/flex_color_picker/latest/flex_color_picker/ColorPicker/tonalColorSameSize.html)
 
-By default, generation of a selected color's new Material 3 tonal-palette is disabled. You can enable
+By default, generation of a selected color's Material-3 tonal-palette is disabled. You can enable
 it by setting `enableTonalPalette` to true. 
 
 When you click/select a color in the color picker and tonal palette is enabled, a 15 shade 
@@ -742,17 +743,20 @@ does not update the palette. Only when you select a color from the other color
 sources in the picker, is that color used as key color, to seed and generate an 
 updated color palette for the selected color.
 
-For more info on Material 3 Color system, see:
-https://m3.material.io/styles/color/the-color-system/key-colors-tones
+For more info on Material-3 Color system, see the [official guide](https://m3.material.io/styles/color/the-color-system/key-colors-tones).
 
 The picker item size for tonal palette color indicator items is
 10/13 the size of defined width and height. This is done in order to
 as far as possible try to match the width of the Primary Material Swatch
 items total width. It has 10 colors, the M3 tonal palette has 15 colors.
-The goal is to match their width when they are both shown.
+The goal is to match their width when they are both shown. If you want the tonal 
+palette color indicator items to be the same size as the other color indicators, 
+set `tonalColorSameSize: true`.
 
 <img src="https://github.com/rydmike/flex_color_picker/blob/master/resources/FCP-enabled-tonal-4.png?raw=true" alt="Tonal pickers 4"/>
 
+
+
 ### Custom Color Swatches
 
 API reference: [customColorSwatchesAndNames](https://pub.dev/documentation/flex_color_picker/latest/flex_color_picker/ColorPicker/customColorSwatchesAndNames.html)
@@ -816,7 +820,7 @@ This will create three custom color swatches, using our "Alpine", "Rust" and "La
 swatch picker.
 <img src="https://github.com/rydmike/flex_color_picker/blob/master/resources/FCP-enabled-6.png?raw=true" alt="Picker 6"/>
 
-### Customized labels 
+### Customized labels
 API reference: [pickerTypeLabels](https://pub.dev/documentation/flex_color_picker/latest/flex_color_picker/ColorPicker/pickerTypeLabels.html)
 
 The picker labels have default English labels, you can override them to customize or translate the labels. You set the

example/lib/demo/pods/pods.dart

@@ -163,6 +163,13 @@ final StateProvider<bool> enableTonesSelectionPod =
       defaultValue: Keys.defaults[Keys.enableTonesSelection]! as bool) as bool;
 }, name: Keys.enableTonesSelection);
 
+// State of using same size tonal color items.
+final StateProvider<bool> tonalSameSizePod =
+    StateProvider<bool>((StateProviderRef<bool> ref) {
+  return hiveStore.get(Keys.tonalSameSize,
+      defaultValue: Keys.defaults[Keys.tonalSameSize]! as bool) as bool;
+}, name: Keys.tonalSameSize);
+
 // State of including index 850 for grey color.
 final StateProvider<bool> includeIndex850Pod =
     StateProvider<bool>((StateProviderRef<bool> ref) {

example/lib/demo/pods/pods_reset.dart

@@ -90,6 +90,9 @@ void resetSettings(WidgetRef ref) {
 
   ref.read(sizePod.notifier).state = Keys.defaults[Keys.size]! as double;
 
+  ref.read(tonalSameSizePod.notifier).state =
+      Keys.defaults[Keys.tonalSameSize]! as bool;
+
   ref.read(borderRadiusPod.notifier).state =
       Keys.defaults[Keys.borderRadius]! as double;
 

example/lib/demo/screens/color_picker/all_control_widgets.dart

@@ -55,6 +55,7 @@ export 'picker_switches/shades_switch.dart';
 export 'picker_switches/snackbar_parse_error_switch.dart';
 export 'picker_switches/subheading_switch.dart';
 export 'picker_switches/title_switch.dart';
+export 'picker_switches/tonal_same_size_switch.dart';
 export 'picker_switches/tonal_subheading_switch.dart';
 export 'picker_switches/tonal_switch.dart';
 export 'picker_switches/toolbar_copy_switch.dart';

example/lib/demo/screens/color_picker/color_picker_card.dart

@@ -60,6 +60,7 @@ class ColorPickerCard extends ConsumerWidget {
         ),
         width: ref.watch(sizePod),
         height: ref.watch(sizePod),
+        tonalColorSameSize: ref.watch(tonalSameSizePod),
         spacing: ref.watch(spacingPod),
         runSpacing: ref.watch(runSpacingPod),
         elevation: ref.watch(elevationPod),

example/lib/demo/screens/color_picker/color_picker_dialog.dart

@@ -74,6 +74,7 @@ Future<bool> colorPickerDialog(
     ),
     width: ref.watch(sizePod),
     height: ref.watch(sizePod),
+    tonalColorSameSize: ref.watch(tonalSameSizePod),
     spacing: ref.watch(spacingPod),
     runSpacing: ref.watch(runSpacingPod),
     elevation: ref.watch(elevationPod),

example/lib/demo/screens/color_picker/color_picker_screen.dart

@@ -272,6 +272,7 @@ class _Column3 extends StatelessWidget {
         ),
         // Color picker size
         const ItemSizeSlider(),
+        const TonalSameSizeSwitch(),
         const BorderRadiusSlider(),
         const ElevationSlider(),
         const SpacingSlider(),

example/lib/demo/screens/color_picker/picker_switches/tonal_same_size_switch.dart

@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../../../pods/pods.dart';
+import '../../../widgets/switch_tile_tooltip.dart';
+
+@immutable
+class TonalSameSizeSwitch extends ConsumerWidget {
+  const TonalSameSizeSwitch({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return SwitchTileTooltip(
+      title: const Text('Tonal color items same size'),
+      subtitle: const Text('When OFF tonal color items are smaller and same '
+          'width as the items making up a Material swatch color palette.'),
+      value: ref.watch(tonalSameSizePod),
+      onChanged: (bool value) =>
+          ref.read(tonalSameSizePod.notifier).state = value,
+      tooltipEnabled: ref.watch(enableTooltipsPod),
+      tooltip: 'ColorPicker(tonalColorSameSize: '
+          '${ref.read(tonalSameSizePod)})',
+    );
+  }
+}

example/lib/demo/utils/app.dart

@@ -9,7 +9,7 @@ class App {
   // Web demo with inside the app. Shown on the start screen in the demo,
   // so people testing it don't have to ask. Also info for the About screen.
   static const String appName = 'FlexColorPicker';
-  static const String version = '3.2.3';
+  static const String version = '3.3.0';
   static const String packageVersion = 'FlexColorPicker package $version';
   static final Uri packageUri = Uri(
     scheme: 'https',

example/lib/demo/utils/keys.dart

@@ -19,6 +19,7 @@ class Keys {
   static const String pickersEnabled = 'pickersEnabled';
   static const String enableShadesSelection = 'enableShadesSelection';
   static const String enableTonesSelection = 'enableTonesSelection';
+  static const String tonalSameSize = 'tonalSameSize';
   static const String includeIndex850 = 'includeIndex850';
   static const String enableOpacity = 'enableOpacity';
   static const String showMaterialName = 'showMaterialName';
@@ -95,6 +96,7 @@ class Keys {
     },
     enableShadesSelection: true,
     enableTonesSelection: true,
+    tonalSameSize: false,
     includeIndex850: false,
     enableOpacity: true,
     showMaterialName: true,

lib/src/color_picker.dart

@@ -102,6 +102,7 @@ class ColorPicker extends StatefulWidget {
     // Picker item and wheel picker properties.
     this.width = 40,
     this.height = 40,
+    this.tonalColorSameSize = false,
     this.spacing = 4,
     this.runSpacing = 4,
     this.elevation = 0,
@@ -341,6 +342,19 @@ class ColorPicker extends StatefulWidget {
   /// Defaults to 40 dp. Must be from 15 to 150 dp.
   final double height;
 
+  /// Set to true to make tonal color items same size as the size defined
+  /// for main and swatch shades indicator items.
+  ///
+  /// If false, the tonal color items will be smaller and auto sized for the
+  /// palette to be same width as the Material Color palette.
+  ///
+  /// Defaults to false. The color boxes are smaller, but length of their
+  /// items is the same as MaterialColor swatch. You may prefer true to get
+  /// them to be same size, especially if you only use tonal palette.
+  ///
+  /// For legacy compatibility reasons, this property is false by default.
+  final bool tonalColorSameSize;
+
   /// The horizontal spacing between the color picker indicator items.
   ///
   /// Defaults to 4 dp. Must be from 0 to 50 dp.
@@ -1821,10 +1835,14 @@ class _ColorPickerState extends State<ColorPicker> {
                     });
                   },
                   tonalShouldUpdate: _tonalShouldUpdate,
-                  width: (widget.width + widget.spacing) * 10 / 15 -
-                      widget.spacing,
-                  height: (widget.width + widget.spacing) * 10 / 15 -
-                      widget.spacing,
+                  width: widget.tonalColorSameSize
+                      ? widget.width
+                      : (widget.width + widget.spacing) * 10 / 15 -
+                          widget.spacing,
+                  height: widget.tonalColorSameSize
+                      ? widget.width
+                      : (widget.width + widget.spacing) * 10 / 15 -
+                          widget.spacing,
                   borderRadius: widget.borderRadius,
                   hasBorder: widget.hasBorder,
                   borderColor: widget.borderColor,

pubspec.yaml

@@ -1,6 +1,6 @@
 name: flex_color_picker
 description: A customizable Flutter primary, accent and custom color picker. Includes an optional HSV wheel color picker.
-version: 3.2.3
+version: 3.3.0
 homepage: https://github.com/rydmike/flex_color_picker
 repository: https://github.com/rydmike/flex_color_picker
 issue_tracker: https://github.com/rydmike/flex_color_picker/issues