Version 3.3.0

CHANGELOG.md

@@ -2,6 +2,22 @@
 
 All notable changes to the **FlexColorPicker** package are documented in this file.
 
+## 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).
+  - When clicking on the color wheels square color box part inside the Hue circle, the click moved the selection on wheel when clicking close to the square edge. This is now fixed. The fix also introduces exact wheel tap/drag to start an operation of Hue wheel. Previously, the Hue wheel would start operating when taping or dragging on the square containing the Hue wheel, but outside the squared color area inside it. Now to start dragging or make a tap action, it must start on the Hue wheel. Dragging around outside it or inside it, once a drag operation has started, works as before.  
+
+- Fixed issue [#66 White color selects multiple colors](https://github.com/rydmike/flex_color_picker/issues/66).
+  - Part of original design with the picker was to only have a given color value appear in one color palette. When adding custom color palettes or using tonal palettes, the same color values may appear in multiple palettes. Selecting such a color value would highlight all the palettes the color appears in. Tonal palettes always contain white and black colors, so it is particularly problematic when using them. This fix prevents showing the main color as selected in multiple palettes and avoids switching Material swatch palette when operating on a tonal palettes. As a part of this FIX, main Material swatch shade color index 500, or for Material accent swatch shade, color index 200, is only shown as selected when its color is actually selected in a Material swatch or Material tonal color tone.
+
 ## 3.2.2
 
 **May 11, 2023**
@@ -705,7 +721,7 @@ Feel free to open a [suggestion or issue](https://github.com/rydmike/flex_color_
 
 ### TODO
 - [ ] Additional controls for selecting active picker, maybe a custom slider and ToggleButtons.
-- [ ] Add one more color picker type "advanced", using only sliders as controls.
+- [ ] Add one more color picker type _advanced_, using only sliders as controls.
 - [ ] Add support for other color formats than RGB.
 - [ ] Maybe: Add selected colors to the custom colors section.
 - [ ] Add more tests.

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,14 +9,14 @@ 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.2';
+  static const String version = '3.3.0';
   static const String packageVersion = 'FlexColorPicker package $version';
   static final Uri packageUri = Uri(
     scheme: 'https',
     host: 'pub.dev',
     path: 'packages/flex_color_picker',
   );
-  static const String flutterVersion = 'Channel stable 3.10.0 (canvaskit)';
+  static const String flutterVersion = 'Channel stable 3.10.6 (canvaskit)';
   static const String copyright = '© 2020 - 2023';
   static const String author = 'Mike Rydstrom';
   static const String license = 'BSD 3-Clause License';
@@ -72,6 +72,23 @@ class App {
     },
   );
 
+  // Add a custom white to black grey scale.
+  static const MaterialColor whiteBlueBlack = MaterialColor(
+    0xFF4355B9, // Set the 500 index value here.
+    <int, Color>{
+      50: Color(0xFFFFFFFF),
+      100: Color(0xFFF0EFFF),
+      200: Color(0xFFBAC3FF),
+      300: Color(0xFF7789F0),
+      400: Color(0xFF5D6FD4),
+      500: Color(0xFF4355B9),
+      600: Color(0xFF293CA0),
+      700: Color(0xFF08218A),
+      800: Color(0xFF00105C),
+      900: Color(0xFF000000),
+    },
+  );
+
   // A custom color swatch, to name map, for the above custom colors.
   static Map<ColorSwatch<Object>, String> get colorsNameMap =>
       <ColorSwatch<Object>, String>{
@@ -94,6 +111,7 @@ class App {
         ColorTools.createPrimarySwatch(brightGreen): 'Bright green',
         ColorTools.createPrimarySwatch(blueJean): 'Washed jean blue',
         ColorTools.createPrimarySwatch(deepBlueSea): 'Deep blue sea',
+        whiteBlueBlack: 'White via Blue to Black',
         whiteToBlack: 'White to black',
       };
 }

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,

example/pubspec.lock

@@ -127,15 +127,15 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "3.2.2"
+    version: "3.3.0"
   flex_seed_scheme:
     dependency: transitive
     description:
       name: flex_seed_scheme
-      sha256: e4168a6fc88a3e5bc3d6b7a748c6a6083eedc193d343ddc26bbad7fb1b258555
+      sha256: "29c12aba221eb8a368a119685371381f8035011d18de5ba277ad11d7dfb8657f"
       url: "https://pub.dev"
     source: hosted
-    version: "1.3.0"
+    version: "1.4.0"
   flutter:
     dependency: "direct main"
     description: flutter
@@ -179,10 +179,10 @@ packages:
     dependency: "direct main"
     description:
       name: google_fonts
-      sha256: "6b6f10f0ce3c42f6552d1c70d2c28d764cf22bb487f50f66cca31dcd5194f4d6"
+      sha256: e20ff62b158b96f392bfc8afe29dee1503c94fbea2cbe8186fd59b756b8ae982
       url: "https://pub.dev"
     source: hosted
-    version: "4.0.4"
+    version: "5.1.0"
   hive:
     dependency: "direct main"
     description:
@@ -195,10 +195,10 @@ packages:
     dependency: transitive
     description:
       name: http
-      sha256: "5895291c13fa8a3bd82e76d5627f69e0d85ca6a30dcac95c4ea19a5d555879c2"
+      sha256: "759d1a329847dd0f39226c688d3e06a6b8679668e350e2891a6474f8b4bb8525"
       url: "https://pub.dev"
     source: hosted
-    version: "0.13.6"
+    version: "1.1.0"
   http_multi_server:
     dependency: transitive
     description:
@@ -536,10 +536,10 @@ packages:
     dependency: "direct main"
     description:
       name: url_launcher
-      sha256: eb1e00ab44303d50dd487aab67ebc575456c146c6af44422f9c13889984c00f3
+      sha256: "781bd58a1eb16069412365c98597726cd8810ae27435f04b3b4d3a470bacd61e"
       url: "https://pub.dev"
     source: hosted
-    version: "6.1.11"
+    version: "6.1.12"
   url_launcher_android:
     dependency: transitive
     description:
@@ -661,5 +661,5 @@ packages:
     source: hosted
     version: "3.1.2"
 sdks:
-  dart: ">=3.0.0-0 <4.0.0"
-  flutter: ">=3.7.0"
+  dart: ">=3.0.0 <4.0.0"
+  flutter: ">=3.10.0"

example/pubspec.yaml

@@ -1,6 +1,6 @@
 name: color_picker_example
 description: Two examples of how to use the FlexColorPicker package.
-version: 3.2.2
+version: 3.2.3
 publish_to: 'none'
 environment:
   sdk: '>=2.19.0 <4.0.0'
@@ -18,7 +18,7 @@ dependencies:
   flutter_riverpod: ^2.3.6
 
   # https://pub.dev/packages/google_fonts
-  google_fonts: ^4.0.4
+  google_fonts: ^5.1.0
 
   # https://pub.dev/packages/hive
   hive: ^2.2.3
@@ -28,7 +28,7 @@ dependencies:
 
   # https://pub.dev/packages/url_launcher
   # Used for launching a WEB URL (by Google flutter.dev).
-  url_launcher: ^6.1.11
+  url_launcher: ^6.1.12
 
 dev_dependencies:
   flutter_test: