Release 2.3.0 with M3 Tonal Palette

.github/workflows/deploy_test.yml

@@ -84,10 +84,7 @@ jobs:
  run: flutter clean && cd example && flutter clean
 
  - name: WEB EXAMPLE release build using CanvasKit
- run: cd example && flutter build web --web-renderer=canvaskit --release --target=lib/demo/main.dart
-
- - name: WEB EXAMPLE FIX href URL reference before publish
- run: rpl '<base href="/">' '<base href="/flexcolorpickertest/">' example/build/web/index.html
+ run: cd example && flutter build web --web-renderer=canvaskit --base-href "/flexcolorpickertest/" --release --target=lib/demo/main.dart
 
  - name: WEB EXAMPLE DEPLOY to GitHub Pages repository, published on commit.
  uses: dmnemec/[email protected]

.gitignore

@@ -32,6 +32,7 @@ example/.fvm
 .pub-cache/
 .pub/
 build/
+example/build/
 
 # Android related
 **/android/**/gradle-wrapper.jar

.pubignore

@@ -0,0 +1,83 @@
+# Miscellaneous
+*.class
+*.log
+*.pyc
+*.swp
+.DS_Store
+.atom/
+.buildlog/
+.history
+.svn/
+**.fvm/
+.fvm
+example/.fvm
+
+# IntelliJ related
+*.iml
+*.ipr
+*.iws
+.idea/
+
+# The .vscode folder contains launch configuration and tasks you configure in
+# VS Code which you may wish to be included in version control, so this line
+# is commented out by default.
+#.vscode/
+
+# We do not want the doc resource file in pub.dev, but they do go to GitHub.
+resources/
+
+
+# Flutter/Dart/Pub related
+**/doc/api/
+.dart_tool/
+.flutter-plugins
+.flutter-plugins-dependencies
+.packages
+.pub-cache/
+.pub/
+build/
+example/build/
+
+# Android related
+**/android/**/gradle-wrapper.jar
+**/android/.gradle
+**/android/captures/
+**/android/gradlew
+**/android/gradlew.bat
+**/android/local.properties
+**/android/**/GeneratedPluginRegistrant.java
+
+# iOS/XCode related
+**/ios/**/*.mode1v3
+**/ios/**/*.mode2v3
+**/ios/**/*.moved-aside
+**/ios/**/*.pbxuser
+**/ios/**/*.perspectivev3
+**/ios/**/*sync/
+**/ios/**/.sconsign.dblite
+**/ios/**/.tags*
+**/ios/**/.vagrant/
+**/ios/**/DerivedData/
+**/ios/**/Icon?
+**/ios/**/Pods/
+**/ios/**/.symlinks/
+**/ios/**/profile
+**/ios/**/xcuserdata
+**/ios/.generated/
+**/ios/Flutter/App.framework
+**/ios/Flutter/Flutter.framework
+**/ios/Flutter/Flutter.podspec
+**/ios/Flutter/Generated.xcconfig
+**/ios/Flutter/app.flx
+**/ios/Flutter/app.zip
+**/ios/Flutter/flutter_assets/
+**/ios/Flutter/flutter_export_environment.sh
+**/ios/ServiceDefinitions.json
+**/ios/Runner/GeneratedPluginRegistrant.*
+
+# Exceptions to above rules.
+!**/ios/**/default.mode1v3
+!**/ios/**/default.mode2v3
+!**/ios/**/default.pbxuser
+!**/ios/**/default.perspectivev3
+!/packages/flutter_tools/test/data/dart_dependencies_test/**/.packages

CHANGELOG.md

@@ -2,6 +2,44 @@
 
 All notable changes to the **FlexColorPicker** package will be documented in this file.
 
+## [2.3.0] - February 18, 2022
+**New feature** 
+* Added capability to show a Material 3 tonal palette as per 
+ [Material 3 design specification](https://m3.material.io/styles/color/the-color-system/key-colors-tones).
+
+* To enable it set new `ColorPicker` property `enableTonalPalette` to true.
+ It is false by default. Like the Material Swatch shades heading that
+ that has an optional `subHeading` widget, when tonal palette is enabled
+ you can show an optional `tonalSubheading` widget above it.
+
+ - When you click/select a color in the color picker and tonal palette is 
+ enabled, a 13 shade Material 3 tonal palette for the selected color will be 
+ generated, always starting with black, tone 0 for the used seed color and ending in white, tone 100.
+
+ - The official Material 3 Dart library is used to create the tonal palette 
+ from any selected color. The color you select functions a seed color to 
+ generate the tonal palette and might not itself be included and selected in
+ the palette. You can of course click on any color in the generated palette to
+ select and pick a color.
+
+ - Selecting a color in the tonal palette, only selects the color in the palette, 
+ it 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, to seed and generate
+ an updated color palette for the selected color.
+
+
+**Updated**
+* The WEB example was updated to include enabling and disabling 
+ the tonal palette and built it with Flutter version, stable 2.10.1.
+* All dependencies in the Web demo were updated to their latest
+ released version. 
+
+ The Web demo example requires at least Flutter 2.10.0 to be built, 
+ it uses ColorScheme properties in its theme
+ tha were not available earlier and removed in 2.10.0 deprecated color
+ properties from its theme. The color picker package itself, still has 
+ unchanged version requirement of Dart SDK sdk: '>=2.14.0 <3.0.0'. 
+
 ## [2.2.0] - November 17, 2021
 * Fixed the style for color entry field, to always uses the intended fixed stadium style.
 * Updated dependencies for the web demo, big change was Riverpod to use v1.0.0.
@@ -12,7 +50,7 @@ All notable changes to the **FlexColorPicker** package will be documented in thi
 ## [2.1.2] - July 16, 2021
 * **Improvement:** Improved performance by splitting wheel painting into
  multiple painters and introducing `RepaintBoundary` widgets around
- expensive painters to avoid unnecessary repaints. Thank you 
+ expensive painters to avoid unnecessary repaints. Thank you, 
  [Krista Koivisto](https://github.com/krista-koivisto) for this excellent contribution!
 
 ## [2.1.1] - July 2, 2021
@@ -93,7 +131,7 @@ All notable changes to the **FlexColorPicker** package will be documented in thi
  not an `OutlinedButton`. This change is done to conform to a less opinionated default style. You can still
  manually configure it to use an `OutlinedButton` instead as before. Now you can choose, before there was
  no choice.
-* The dialog bottom **OK** button is no longer auto-focused.
+* The dialog bottom **OK** button is no longer autofocused.
 * The extension `FlexPickerNoNullStringExtensions` on none nullable
  `String` named `toColor`, no longer returns color value `Color(0x00000000)` for colors that cannot be parsed
  to a Color. It now returns `Color(0xFF000000)`. This is because the Flutter SDK dislikes the fully transparent
@@ -122,7 +160,7 @@ All notable changes to the **FlexColorPicker** package will be documented in thi
  instead called `dailogElevation` and `dialogTitle` in it.
 * **Improvement:** Performance was improved via more optimized rebuilds. 
 * **Documentation:** First version of updated documentation with API guide documentation is now included. It still 
- requires proof-reading before stable release, but getting close to be ready for release now.
+ requires proofreading before stable release, but getting close to be ready for release now.
 * **Default example:** The default example got a new picker that shows how to the new `showColorPickerDialog` function.
 * **Web example:** The Web example, with the built-in API tooltips guides, got a major rewrite. It was originally
  not intended to be as large as it grew to be, but since it grew so much it needed a rewrite. 
@@ -257,7 +295,7 @@ The following are **minor breaking changes** from version 1.1.5, they mostly con
  not an `OutlinedButton`, this change is done to conform to a less opinionated default style. You can still
  manually configure it to use an `OutlinedButton` instead as before. Now you can choose, before there was 
  no choice.
-* The dialog bottom **OK** button is no longer auto-focused. 
+* The dialog bottom **OK** button is no longer autofocused. 
 
 ## [2.0.0-nullsafety.0] - February 15, 2021
 * First version with null safety.
@@ -360,6 +398,6 @@ Feel free to open a [suggestion or issue](https://github.com/rydmike/flex_color_
 - Release version 1.0.0.
 - Add "name that color" function that can give a name to "any" color in English.
 - For the color wheel picker, add text input to get a given color based on entered HEX code.
-- Fix doc images that show up OK in Github readme.md, but not on pub.dev.
+- Fix doc images that show up OK in GitHub readme.md, but not on pub.dev.
 - Review and correct documentation mistakes and typos, first pass anyway.
 - Review and update the API.

README.md

@@ -92,7 +92,7 @@ In the `pubspec.yaml` of your **Flutter** project, add the following dependency:
 
 ```yaml
 dependencies: 
- flex_color_picker: ^2.1.2
+ flex_color_picker: ^2.3.0
 ```
 
 In your library file add the following import:
@@ -128,13 +128,18 @@ the package source code in the "example/lib/demo" folder.
 
 > **IMPORTANT:** If the color picker's opacity slider feature is used on WEB builds `enableOpacity: true`, then you 
 > must build using the SKIA **canvaskit** renderer only. The opacity slider uses `ImageShader`, a Flutter API that 
-> is not yet available on **html** builds, at least not in version stable 2.2.1.
+> was not yet available on **html** builds, at least not in version stable 2.2.1.
 > 
 > ```
 > flutter run -d chrome --web-renderer canvaskit
 > flutter build web --web-renderer canvaskit
 > ```
 > For more information see https://flutter.dev/docs/development/tools/web-renderers
+>
+> **UPDATE Feb 18, 2022:** When using Flutter stable version 2.10.1, the `ImageShader` API 
+> seems to be available and working also when using --web-renderer html, build. However, if you
+> run into issues with the opacity slider on web builds, try using canvaskit, instead of auto or
+> html renderer when you build the Web app.
 
 
 The Web demo has a responsive view, that expands into maximum four separately scrollable columns. The columns contain
@@ -711,6 +716,40 @@ 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
+
+API reference: [enableTonalPalette](https://pub.dev/documentation/flex_color_picker/latest/flex_color_picker/ColorPicker/enableTonalPalette.html)
+
+By default, generation of a selected color's new 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 13 shade 
+Material 3 tonal palette for the selected color will be generated, always starting with black,
+tone 0 for the used seed color and ending in white, tone 100.
+
+The official Material 3 Dart library is used to create the tonal palette from any 
+selected color. The color you select functions a seed color to generate the tonal
+palette and might not itself be included and selected in the palette. You can 
+of course click on any color in the generated palette to select and pick a color.
+
+Selecting a color in the tonal palette, only selects the color in the palette, it 
+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, 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
+
+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 13 colors.
+The idea is try to match their width when they are both shown.
+
+
+
+<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)
@@ -732,7 +771,8 @@ for `createAccentSwatch` for as color for index [200], the rest of the index col
 
 To define color data to use with the `customColorSwatchesAndNames` property, to start using the custom color picker, 
 first make a final **Map** with your custom `ColorSwatch` objects, and their color names. 
-You decide what the colors are called. Here we make three custom colors, with the different above mentioned methods.
+You decide what the colors are called. Here we make three custom colors, with the different 
+methods.
 
 ```dart
 final Map<ColorSwatch<Object>, String> customSwatches =
@@ -899,16 +939,21 @@ sessions, in addition to all the settings, you can use it as an example on how t
 API reference: [title, ](https://pub.dev/documentation/flex_color_picker/latest/flex_color_picker/ColorPicker/title.html)
 [heading, ](https://pub.dev/documentation/flex_color_picker/latest/flex_color_picker/ColorPicker/heading.html)
 [subheading, ](https://pub.dev/documentation/flex_color_picker/latest/flex_color_picker/ColorPicker/subheading.html)
+[tonalSubheading, ](https://pub.dev/documentation/flex_color_picker/latest/flex_color_picker/ColorPicker/tonalSubheading.html)
 [wheelSubheading, ](https://pub.dev/documentation/flex_color_picker/latest/flex_color_picker/ColorPicker/wheelSubheading.html)
 [opacitySubheading, ](https://pub.dev/documentation/flex_color_picker/latest/flex_color_picker/ColorPicker/opacitySubheading.html)
 [recentColorsSubheading.](https://pub.dev/documentation/flex_color_picker/latest/flex_color_picker/ColorPicker/recentColorsSubheading.html)
 
 
 You can provide custom heading widgets for the picker's toolbar `title`, main `heading`, shades selection color 
-`subheading`, and the `wheelSubheading`, opacity slider `opacitySubheading` and subheading for the recently used 
+`subheading`, tonal palette `tonalSubheading` and the `wheelSubheading`, opacity slider 
+`opacitySubheading` and subheading for the recently used 
 colors list `recentColorsSubheading`. If a heading is `null`, it is omitted. The headings can be any Widget, 
 but typically they are `Text` widgets with a suitable style, as shown below.
 
+The `tonalSubheading` in the tonal palette added in version 2.3.0 is not shown in the example 
+image below, but it would be below the shade `subheading` and equivalent to it.
+
 <img src="https://github.com/rydmike/flex_color_picker/blob/master/resources/FCP-11.png?raw=true" alt="Picker 11"/>
 
 ## Picker Design
@@ -1340,9 +1385,9 @@ Optional `ValueChanged<List<Color>>` callback that returns the current list of r
 
 This optional callback is called every time a new color is added to the recent colors list with the complete current 
 list of recently used colors. If the optional callback is not provided, then it is not called. You can
-use this callback to save and restore the recently used colors. To initialize the list when the color picker is created 
-give it a starting via `recentColors`. This could be a list kept just in state during the current app session, 
-or it could have been persisted and restored from a previous session.
+use this callback to save and restore the recently used colors. To initialize the list when the color picker
+is created give it a starting value via `recentColors`. This could be a list kept just in state during
+the current app session, or it could have been persisted and restored from a previous session.
 
 ## Dialogs
 
@@ -1365,7 +1410,7 @@ method.
 
 The disadvantage with this dialog is that to maintain the state yourself. You have to store color before you open the 
 dialog and restore this color if the dialog is cancelled, instead of a color selected. The API can also be a bit 
-cumbersome to use, although the above mentioned example shows how it is done.
+cumbersome to use, the above example demonstrates how to do it.
 
 ### Function showColorPickerDialog