Version 3.0.0

New feature: transitionBuilder and transitionDuration added to dialogs.

Review and update README

.github/workflows/deploy.yml

@@ -54,7 +54,7 @@ jobs:
       - name: Analyze Dart source
         run: dart analyze
 
-      - name: Show outdated packges
+      - name: Show outdated packages
         run: flutter pub outdated
 
       - name: Verify that Dart formatting is used, fail if not

.github/workflows/deploy_test.yml

@@ -52,7 +52,7 @@ jobs:
       - name: Analyze Dart source
         run: dart analyze
 
-      - name: Show outdated packges
+      - name: Show outdated packages
         run: flutter pub outdated
 
       - name: Verify that Dart formatting is used, fail if not

example/lib/main.dart

@@ -99,9 +99,12 @@ class _ColorPickerPageState extends State<ColorPickerPage> {
       body: ListView(
         padding: const EdgeInsets.fromLTRB(8, 0, 8, 0),
         children: <Widget>[
+          const SizedBox(height: 16),
           // Pick color in a dialog.
           ListTile(
-            title: const Text('Click this color to modify it in a dialog'),
+            title: const Text('Click this color to modify it in a dialog. '
+                'The color is modified while dialog is open, but returns '
+                'to previous value if dialog is cancelled'),
             subtitle: Text(
               // ignore: lines_longer_than_80_chars
               '${ColorTools.materialNameAndCode(dialogPickerColor, colorSwatchNameMap: colorsNameMap)} '
@@ -127,7 +130,9 @@ class _ColorPickerPageState extends State<ColorPickerPage> {
             ),
           ),
           ListTile(
-            title: const Text('Click to select a new color from a dialog'),
+            title: const Text('Click to select a new color from a dialog '
+                'that uses custom open/close animation. The color is only '
+                'modified after dialog is closed with OK'),
             subtitle: Text(
               // ignore: lines_longer_than_80_chars
               '${ColorTools.materialNameAndCode(dialogSelectColor, colorSwatchNameMap: colorsNameMap)} '
@@ -171,6 +176,22 @@ class _ColorPickerPageState extends State<ColorPickerPage> {
                       closeButton: true,
                       dialogActionButtons: false,
                     ),
+                    transitionBuilder: (BuildContext context,
+                        Animation<double> a1,
+                        Animation<double> a2,
+                        Widget widget) {
+                      final double curvedValue =
+                          Curves.easeInOutBack.transform(a1.value) - 1.0;
+                      return Transform(
+                        transform: Matrix4.translationValues(
+                            0.0, curvedValue * 200, 0.0),
+                        child: Opacity(
+                          opacity: a1.value,
+                          child: widget,
+                        ),
+                      );
+                    },
+                    transitionDuration: const Duration(milliseconds: 400),
                     constraints: const BoxConstraints(
                         minHeight: 480, minWidth: 320, maxWidth: 320),
                   );
@@ -229,7 +250,7 @@ class _ColorPickerPageState extends State<ColorPickerPage> {
           ),
 
           // Theme mode toggle
-          SwitchListTile.adaptive(
+          SwitchListTile(
             title: const Text('Turn ON for dark mode'),
             subtitle: const Text('Turn OFF for light mode'),
             value: isDark,

lib/src/color_picker.dart

@@ -1,3 +1,5 @@
+// ignore_for_file: comment_references
+
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
@@ -683,8 +685,13 @@ class ColorPicker extends StatefulWidget {
   ///
   /// The [showPickerDialog] method is a convenience function to show the
   /// [ColorPicker] widget in a modal dialog. It re-implements the standard
-  /// `showDialog` function with opinionated Cancel and OK buttons. It
-  /// also by default uses a lighter barrier color. This is useful if the
+  /// [showDialog] function with opinionated Cancel and OK buttons.
+  ///
+  /// If a [transitionBuilder] is provided the [showPickerDialog] instead uses
+  /// a [showGeneralDialog] implementation to show the [ColorPicker], this
+  /// allows for customization of the show animation.
+  ///
+  /// It also by default uses a lighter barrier color. This is useful if the
   /// color picker is used to dynamically change color of a widget or entire
   /// application theme, since we can then better see the impact of the color
   /// choice behind the modal dialog when the barrier is made almost fully
@@ -848,6 +855,21 @@ class ColorPicker extends StatefulWidget {
     /// Offset anchorPoint for the dialog.
     Offset? anchorPoint,
 
+    /// The [transitionBuilder] argument is used to define how the route
+    /// arrives on and leaves off the screen.
+    ///
+    /// If this transition is not specified, the default Material platform
+    /// transition builder for [showDialog] is used.
+    RouteTransitionsBuilder? transitionBuilder,
+
+    /// The [transitionDuration] argument is used to determine how long it takes
+    /// for the route to arrive on or leave off the screen.
+    ///
+    /// It only has any effect when a custom `transitionBuilder`is used.
+    ///
+    /// This argument defaults to 200 milliseconds.
+    Duration transitionDuration = const Duration(milliseconds: 200),
+
     /// You can provide BoxConstraints to constrain the size of the dialog.
     ///
     /// You might want to do this at least for the height, otherwise
@@ -969,7 +991,9 @@ class ColorPicker extends StatefulWidget {
         actionButtons.dialogActionOrder ==
             ColorPickerActionButtonOrder.okIsLeft;
 
-    final AlertDialog pickerDialog = AlertDialog(
+    // Put or [ColorPicker] instance `this` in an `AlertDialog` using all
+    // to it assigned and above defined properties.
+    Widget dialog = AlertDialog(
       title: title,
       titlePadding: titlePadding,
       titleTextStyle: titleTextStyle,
@@ -1002,22 +1026,65 @@ class ColorPicker extends StatefulWidget {
       scrollable: true,
     );
 
-    await showDialog<bool>(
+    // No `transitionBuilder` give, then use
+    // the platform and Material2/3 dependent default MaterialPage route
+    // transition via `showDialog`, as in all versions before 3.0.0.
+    if (transitionBuilder == null) {
+      await showDialog<bool>(
+          context: context,
+          barrierDismissible: barrierDismissible,
+          barrierColor: barrierColor,
+          barrierLabel: barrierLabel,
+          useSafeArea: useSafeArea,
+          useRootNavigator: actionButtons.useRootNavigator,
+          routeSettings: routeSettings,
+          anchorPoint: anchorPoint,
+          builder: (BuildContext context) {
+            return dialog;
+          }).then((bool? value) {
+        // If the dialog return value was null, then we got here by a
+        // barrier dismiss, then we set the return value to false.
+        colorWasSelected = value ?? false;
+      });
+    }
+    // If a `transitionBuilder` is given, we use `showGeneralDialog` using the
+    // given `transitionBuilder` and a custom `pageBuilder`, conditionally
+    // wrapping `SafeArea` around or AlertDialog widget and capturing the
+    // current theme that we and wrapping it around the page builder.
+    else {
+      final CapturedThemes themes = InheritedTheme.capture(
+        from: context,
+        to: Navigator.of(
+          context,
+          rootNavigator: true,
+        ).context,
+      );
+      if (useSafeArea) {
+        dialog = SafeArea(child: dialog);
+      }
+      await showGeneralDialog<bool>(
         context: context,
         barrierDismissible: barrierDismissible,
         barrierColor: barrierColor,
-        barrierLabel: barrierLabel,
-        useSafeArea: useSafeArea,
+        barrierLabel: barrierLabel ??
+            MaterialLocalizations.of(context).modalBarrierDismissLabel,
         useRootNavigator: actionButtons.useRootNavigator,
         routeSettings: routeSettings,
         anchorPoint: anchorPoint,
-        builder: (BuildContext context) {
-          return pickerDialog;
-        }).then((bool? value) {
-      // If the dialog return value was null, then we got here by a
-      // barrier dismiss, then we set the return value to false.
-      colorWasSelected = value ?? false;
-    });
+        transitionBuilder: transitionBuilder,
+        transitionDuration: transitionDuration,
+        pageBuilder: (BuildContext context, Animation<double> animation1,
+            Animation<double> animation2) {
+          return themes.wrap(Builder(
+            builder: (BuildContext context) => dialog,
+          ));
+        },
+      ).then((bool? value) {
+        // If the dialog return value was null, then we got here by a
+        // barrier dismiss, then we set the return value to false.
+        colorWasSelected = value ?? false;
+      });
+    }
     return colorWasSelected;
   }
 }
@@ -1193,8 +1260,10 @@ class _ColorPickerState extends State<ColorPicker> {
     // Picker labels map changed, update used one, with its default fallbacks.
     if (!mapEquals(widget.pickerTypeLabels, oldWidget.pickerTypeLabels)) {
       if (_debug) {
-        debugPrint('didUpdateWidget pickerTypeLabels mapEquals: '
-            '${mapEquals(widget.pickerTypeLabels, oldWidget.pickerTypeLabels)}');
+        debugPrint(
+          'didUpdateWidget pickerTypeLabels mapEquals: '
+          '${mapEquals(widget.pickerTypeLabels, oldWidget.pickerTypeLabels)}',
+        );
       }
       _pickerLabels = <ColorPickerType, String>{
         ColorPickerType.both: widget.pickerTypeLabels[ColorPickerType.both] ??

lib/src/show_color_picker_dialog.dart

@@ -1,3 +1,5 @@
+// ignore_for_file: comment_references
+
 part of 'color_picker.dart';
 
 /// Define a color picker, show its dialog and wait for it to return a color.
@@ -600,6 +602,21 @@ Future<Color> showColorPickerDialog(
   /// Offset anchorPoint for the dialog.
   Offset? anchorPoint,
 
+  /// The [transitionBuilder] argument is used to define how the route
+  /// arrives on and leaves off the screen.
+  ///
+  /// If this transition is not specified, the default Material platform
+  /// transition builder for [showDialog] is used.
+  RouteTransitionsBuilder? transitionBuilder,
+
+  /// The [transitionDuration] argument is used to determine how long it takes
+  /// for the route to arrive on or leave off the screen.
+  ///
+  /// It only has any effect when a custom `transitionBuilder`is used.
+  ///
+  /// This argument defaults to 200 milliseconds.
+  Duration transitionDuration = const Duration(milliseconds: 200),
+
   /// You can provide BoxConstraints to constrain the size of the dialog.
   ///
   /// You might want to do this at least for the height, otherwise
@@ -694,6 +711,8 @@ Future<Color> showColorPickerDialog(
     useSafeArea: useSafeArea,
     routeSettings: routeSettings,
     anchorPoint: anchorPoint,
+    transitionBuilder: transitionBuilder,
+    transitionDuration: transitionDuration,
     constraints: constraints,
   ))) {
     selectedColor = color;