showPickerDialog method

Implementation

Future<bool> showPickerDialog(
  /// The dialog requires a BuildContext.
  BuildContext context, {
  /// Title of the color picker dialog, often omitted in favor of using a
  /// [title] and/or [heading] already defined in the [ColorPicker].
  Widget? title,

  /// Padding around the dialog title, if a title is used.
  /// Defaults to `EdgeInsets.zero`, since the title is normally omitted
  /// and provided via the `heading` property of the `ColorPicker` instead.
  final EdgeInsetsGeometry titlePadding = EdgeInsets.zero,

  /// Style for the text in the [title] of this [AlertDialog].
  ///
  /// If null, [DialogTheme.titleTextStyle] is used. If that's null,
  /// defaults to [TextTheme.titleLarge] of [ThemeData.textTheme].
  final TextStyle? titleTextStyle,

  /// Padding around the content in the dialog.
  ///
  /// Defaults to `EdgeInsets.zero`, as the content padding is expected to
  /// be a part of the `ColorPicker`.
  final EdgeInsetsGeometry contentPadding = EdgeInsets.zero,

  /// Padding around the Cancel and OK action buttons at the bottom of
  /// the dialog.
  ///
  /// Typically used to provide padding to the button bar between the button
  /// bar and the edges of the dialog.
  ///
  /// Defaults to null and follows ambient [AlertDialog] themed actions
  /// padding or [AlertDialog] default if not defined.
  ///
  /// Versions before FlexColorPicker 3.0.0 defaulted to
  /// `EdgeInsets.symmetric(horizontal: 16) use it for same padding as in
  /// previous versions.
  final EdgeInsetsGeometry? actionsPadding,

  /// The padding that surrounds each bottom action button.
  ///
  /// This is different from [actionsPadding], which defines the padding
  /// between the entire button bar and the edges of the dialog.
  ///
  /// Defaults to null and follows ambient [AlertDialog] themed buttons
  /// padding or [AlertDialog] default if not defined.
  ///
  /// Versions before FlexColorPicker 3.0.0 defaulted to `EdgeInsets.all(16),
  /// use it for same button padding as in previous versions.
  final EdgeInsetsGeometry? buttonPadding,

  /// The background color of the surface of this Dialog.
  ///
  /// This sets the Material.color on this Dialog's Material.
  /// If null, ThemeData.dialogBackgroundColor is used.
  ///
  /// NOTE: The ColorPicker is designed to fit on background color with
  /// brightness that follow active theme mode. Putting e.g. white as
  /// background in dark theme mode, will not produce usable results.
  final Color? backgroundColor,

  /// The z-coordinate of this Dialog.
  ///
  /// If null then DialogTheme.elevation is used, and if that's null then the
  /// dialog's elevation is 24.0. The z-coordinate at which to place this
  /// material relative to its parent.
  ///
  /// This controls the size of the shadow below the material and the opacity
  /// of the elevation overlay color if it is applied. If this is non-zero,
  /// the contents of the material are clipped, because the widget
  /// conceptually defines an independent printed piece of material.
  /// Changing this value will cause the shadow and the elevation
  /// overlay to animate over Material.animationDuration.
  ///
  /// Defaults to 0.
  final double? elevation,

  /// The color used to paint a drop shadow under the dialog's Material,
  /// which reflects the dialog's elevation.
  final Color? shadowColor,

  /// The color used as a surface tint overlay on the dialog's background
  /// color, which reflects the dialog's elevation.
  final Color? surfaceTintColor,

  /// The semantic label of the dialog used by accessibility frameworks to
  /// announce screen transitions when the dialog is opened and closed.
  ///
  /// In iOS, if this label is not provided, a semantic label will be inferred
  /// from the [title] if it is not null.
  ///
  /// In Android, if this label is not provided, the dialog will use the
  /// [MaterialLocalizations.alertDialogLabel] as its label.
  ///
  /// See also:
  ///
  ///  * [SemanticsConfiguration.namesRoute], for a description of how this
  ///    value is used.
  final String? semanticLabel,

  /// The amount of padding added to `MediaQueryData.viewInsets` on the
  /// outside of the `ColorPicker` dialog.
  ///
  /// Defines the minimum space between the screen's edges and the dialog.
  /// Defaults to `EdgeInsets.symmetric(horizontal: 40, vertical: 24)`.
  final EdgeInsets insetPadding =
      const EdgeInsets.symmetric(horizontal: 40, vertical: 24),

  /// Controls how the contents of the dialog are clipped (or not) to the
  /// given shape.
  ///
  /// See the enum `Clip` for details of all possible options and their
  /// common use cases.
  ///
  /// Defaults to Clip.none, and must not be null.
  final Clip clipBehavior = Clip.none,

  /// The shape of this dialog's border.
  ///
  /// Defines the dialog's Material.shape.
  ///
  /// The default shape is a RoundedRectangleBorder with a radius of 4.0.
  final ShapeBorder? shape,

  /// The background transparency color of the dialog barrier.
  ///
  /// Defaults to [Colors.black12] which is considerably lighter than the
  /// standard [Colors.black54] and allows us to see the impact of selected
  /// color on app behind the dialog. If this is not desired, set it back to
  /// [Colors.black54] when you call [showPickerDialog], or make it even more
  /// transparent.
  ///
  /// You can also make the barrier completely transparent.
  Color barrierColor = Colors.black12,

  /// If true, the dialog can be closed by clicking outside it.
  ///
  /// Defaults to true.
  bool barrierDismissible = true,

  /// The `barrierLabel` argument is the semantic label used for a dismissible
  /// barrier. This argument defaults to `null`.
  String? barrierLabel,

  /// The `useSafeArea` argument is used to indicate if the dialog should only
  /// display in 'safe' areas of the screen not used by the operating system
  /// (see [SafeArea] for more details).
  ///
  /// Default to `true` by default, which means the dialog will not overlap
  /// operating system areas. If it is set to `false` the dialog will only
  /// be constrained by the screen size.
  bool useSafeArea = true,

  /// The `routeSettings` argument is passed to [showGeneralDialog],
  /// see [RouteSettings] for details.
  RouteSettings? routeSettings,

  /// 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
  /// the dialog height might jump up and down jarringly if its size changes
  /// when user changes the picker type with the selector.¨
  ///
  /// Normally you would not change the picker's content element sizes after
  /// you have determined what works in your implementation. You can usually
  /// figure out a good dialog box size that works well for your use case,
  /// for all active pickers, instead of allowing the color picker dialog
  /// to auto size itself, which it will do if no constraints are defined.
  BoxConstraints? constraints,
}) async {
  assert(debugCheckHasMaterialLocalizations(context),
      'A context with Material localizations is required');
  // Get the Material localizations.
  final MaterialLocalizations translate = MaterialLocalizations.of(context);

  // Make the dialog OK button.
  final String okButtonLabel =
      actionButtons.dialogOkButtonLabel ?? translate.okButtonLabel;
  final Text okButtonContent = Text(okButtonLabel);
  Widget okButton;
  switch (actionButtons.dialogOkButtonType) {
    case ColorPickerActionButtonType.text:
      okButton = actionButtons.dialogActionIcons
          ? TextButton.icon(
              onPressed: () {
                Navigator.of(context,
                        rootNavigator: actionButtons.useRootNavigator)
                    .pop(true);
              },
              icon: Icon(actionButtons.okIcon),
              label: okButtonContent,
            )
          : TextButton(
              onPressed: () {
                Navigator.of(context,
                        rootNavigator: actionButtons.useRootNavigator)
                    .pop(true);
              },
              child: okButtonContent,
            );
    case ColorPickerActionButtonType.outlined:
      okButton = actionButtons.dialogActionIcons
          ? OutlinedButton.icon(
              onPressed: () {
                Navigator.of(context,
                        rootNavigator: actionButtons.useRootNavigator)
                    .pop(true);
              },
              icon: Icon(actionButtons.okIcon),
              label: okButtonContent,
            )
          : OutlinedButton(
              onPressed: () {
                Navigator.of(context,
                        rootNavigator: actionButtons.useRootNavigator)
                    .pop(true);
              },
              child: okButtonContent,
            );
    case ColorPickerActionButtonType.elevated:
      okButton = actionButtons.dialogActionIcons
          ? ElevatedButton.icon(
              onPressed: () {
                Navigator.of(context,
                        rootNavigator: actionButtons.useRootNavigator)
                    .pop(true);
              },
              icon: Icon(actionButtons.okIcon),
              label: okButtonContent,
            )
          : ElevatedButton(
              onPressed: () {
                Navigator.of(context,
                        rootNavigator: actionButtons.useRootNavigator)
                    .pop(true);
              },
              child: okButtonContent,
            );
    case ColorPickerActionButtonType.filled:
      okButton = actionButtons.dialogActionIcons
          ? FilledButton.icon(
              onPressed: () {
                Navigator.of(context,
                        rootNavigator: actionButtons.useRootNavigator)
                    .pop(true);
              },
              icon: Icon(actionButtons.okIcon),
              label: okButtonContent,
            )
          : FilledButton(
              onPressed: () {
                Navigator.of(context,
                        rootNavigator: actionButtons.useRootNavigator)
                    .pop(true);
              },
              child: okButtonContent,
            );
    case ColorPickerActionButtonType.filledTonal:
      okButton = actionButtons.dialogActionIcons
          ? FilledButton.tonalIcon(
              onPressed: () {
                Navigator.of(context,
                        rootNavigator: actionButtons.useRootNavigator)
                    .pop(true);
              },
              icon: Icon(actionButtons.okIcon),
              label: okButtonContent,
            )
          : FilledButton.tonal(
              onPressed: () {
                Navigator.of(context,
                        rootNavigator: actionButtons.useRootNavigator)
                    .pop(true);
              },
              child: okButtonContent,
            );
  }

  // Make the dialog OK button.
  final String cancelButtonLabel =
      actionButtons.dialogCancelButtonLabel ?? translate.cancelButtonLabel;
  final Widget cancelButtonContent = Text(cancelButtonLabel);
  Widget cancelButton;
  switch (actionButtons.dialogCancelButtonType) {
    case ColorPickerActionButtonType.text:
      cancelButton = actionButtons.dialogActionIcons
          ? TextButton.icon(
              onPressed: () {
                Navigator.of(context,
                        rootNavigator: actionButtons.useRootNavigator)
                    .pop(false);
              },
              icon: Icon(actionButtons.closeIcon),
              label: cancelButtonContent,
            )
          : TextButton(
              onPressed: () {
                Navigator.of(context,
                        rootNavigator: actionButtons.useRootNavigator)
                    .pop(false);
              },
              child: cancelButtonContent,
            );
    case ColorPickerActionButtonType.outlined:
      cancelButton = actionButtons.dialogActionIcons
          ? OutlinedButton.icon(
              onPressed: () {
                Navigator.of(context,
                        rootNavigator: actionButtons.useRootNavigator)
                    .pop(false);
              },
              icon: Icon(actionButtons.closeIcon),
              label: cancelButtonContent,
            )
          : OutlinedButton(
              onPressed: () {
                Navigator.of(context,
                        rootNavigator: actionButtons.useRootNavigator)
                    .pop(false);
              },
              child: cancelButtonContent,
            );
    case ColorPickerActionButtonType.elevated:
      cancelButton = actionButtons.dialogActionIcons
          ? ElevatedButton.icon(
              onPressed: () {
                Navigator.of(context,
                        rootNavigator: actionButtons.useRootNavigator)
                    .pop(false);
              },
              icon: Icon(actionButtons.closeIcon),
              label: cancelButtonContent,
            )
          : ElevatedButton(
              onPressed: () {
                Navigator.of(context,
                        rootNavigator: actionButtons.useRootNavigator)
                    .pop(false);
              },
              child: cancelButtonContent,
            );
    case ColorPickerActionButtonType.filled:
      cancelButton = actionButtons.dialogActionIcons
          ? FilledButton.icon(
              onPressed: () {
                Navigator.of(context,
                        rootNavigator: actionButtons.useRootNavigator)
                    .pop(false);
              },
              icon: Icon(actionButtons.closeIcon),
              label: cancelButtonContent,
            )
          : FilledButton(
              onPressed: () {
                Navigator.of(context,
                        rootNavigator: actionButtons.useRootNavigator)
                    .pop(false);
              },
              child: cancelButtonContent,
            );
    case ColorPickerActionButtonType.filledTonal:
      cancelButton = actionButtons.dialogActionIcons
          ? FilledButton.tonalIcon(
              onPressed: () {
                Navigator.of(context,
                        rootNavigator: actionButtons.useRootNavigator)
                    .pop(false);
              },
              icon: Icon(actionButtons.closeIcon),
              label: cancelButtonContent,
            )
          : FilledButton.tonal(
              onPressed: () {
                Navigator.of(context,
                        rootNavigator: actionButtons.useRootNavigator)
                    .pop(false);
              },
              child: cancelButtonContent,
            );
  }

  // False if dialog cancelled, true if color selected
  bool colorWasSelected = false;

  // Determine OK-Cancel button order.
  final TargetPlatform platform = Theme.of(context).platform;
  final bool okIsLeft = (platform == TargetPlatform.windows &&
          actionButtons.dialogActionOrder ==
              ColorPickerActionButtonOrder.adaptive) ||
      actionButtons.dialogActionOrder ==
          ColorPickerActionButtonOrder.okIsLeft;

  // 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,
    content: constraints == null
        ? this
        : ConstrainedBox(
            constraints: constraints,
            child: this,
          ),
    contentPadding: contentPadding,
    actions: actionButtons.dialogActionButtons
        ? <Widget>[
            if (okIsLeft) ...<Widget>[
              okButton,
              if (!actionButtons.dialogActionOnlyOkButton) cancelButton,
            ] else ...<Widget>[
              if (!actionButtons.dialogActionOnlyOkButton) cancelButton,
              okButton,
            ]
          ]
        : null,
    actionsPadding: actionsPadding,
    buttonPadding: buttonPadding,
    backgroundColor: backgroundColor,
    elevation: elevation,
    shadowColor: shadowColor,
    surfaceTintColor: surfaceTintColor,
    semanticLabel: semanticLabel,
    insetPadding: insetPadding,
    clipBehavior: clipBehavior,
    shape: shape,
    scrollable: true,
  );

  // 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: actionButtons.useRootNavigator,
      ).context,
    );
    if (useSafeArea) {
      dialog = SafeArea(child: dialog);
    }
    await showGeneralDialog<bool>(
      context: context,
      barrierDismissible: barrierDismissible,
      barrierColor: barrierColor,
      barrierLabel: barrierLabel ??
          MaterialLocalizations.of(context).modalBarrierDismissLabel,
      useRootNavigator: actionButtons.useRootNavigator,
      routeSettings: routeSettings,
      anchorPoint: anchorPoint,
      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;
}