timePickerTheme static method

Implementation

static TimePickerThemeData timePickerTheme({
  /// Typically the same `ColorScheme` that is also used for your `ThemeData`.
  required final ColorScheme colorScheme,

  /// Dialog background color.
  ///
  /// If null and [backgroundSchemeColor] is also null, then it
  /// gets default via Dialog's default null theme behavior.
  ///
  /// If [backgroundSchemeColor] is defined, it will override any color
  /// passed in here.
  ///
  /// Can be used to make a custom themed dialog with own background color,
  /// even after the [ThemeData.dialogBackgroundColor] property is
  /// is deprecated in Flutter SDK. See
  /// https://github.com/flutter/flutter/issues/91772).
  final Color? backgroundColor,

  /// Selects which color from the passed in colorScheme to use as the dialog
  /// background color.
  ///
  /// If not defined, then the passed in [backgroundColor] will be used,
  /// which may be null too and dialog then falls back to Flutter SDK default
  /// value for TimePickerDialog, which is [colorScheme.surface].
  ///
  /// FlexColorScheme sub-theming uses this property to match the background
  /// color of this dialog to other standard dialogs. It sets it via
  /// [FlexSubThemesData] to [SchemeColor.surface].
  final SchemeColor? backgroundSchemeColor,

  /// Dialog elevation.
  ///
  /// If not defined, defaults to [kDialogElevation] = 6.
  final double? elevation,

  /// Outer corner radius.
  ///
  /// If not defined, defaults to [kDialogRadius] 28dp,
  /// based on M3 Specification
  /// https://m3.material.io/components/dialogs/specs
  final double? radius,

  /// Elements corner radius.
  ///
  /// Defaults to [kTimeElementRadius] = 8.
  final double? elementRadius,

  /// An input decoration theme, for the time picker.
  ///
  /// You would typically pass in one that matches the main used input
  /// decoration theme in order to get same input style with possible
  /// rounding used in the app otherwise on the input fields in the picker.
  ///
  /// It adds the custom overrides to the passed in decorator, that the widget
  /// does internally to the default null InputDecorationTheme. There is
  /// no need to add those in the passed in InputDecorationTheme. Just pass
  /// in your overall used app InputDecorationTheme.
  final InputDecorationTheme? inputDecorationTheme,

  /// Set to true to not use the provided [inputDecorationTheme].
  ///
  /// If this flag is false, the provided [inputDecorationTheme] is not used,
  /// additionally the theme fix this theme helper does internally is
  /// not applied and pure null value is passed. This enables getting the
  /// default widget behavior input decorator, or opting in on getting the
  /// provided inputDecorationTheme with the internal style fix for issue
  /// https://github.com/flutter/flutter/issues/54104 applied automatically
  /// to the provided inputDecorationTheme.
  ///
  /// If not defined, defaults to false.
  final bool? useInputDecoratorTheme,

  /// Used to configure the [TextStyle]s for the day period control.
  ///
  /// If this is null, the time picker defaults to the overall theme's
  /// [TextTheme.titleMedium].
  final TextStyle? dayPeriodTextStyle,

  /// The [TextStyle] for the numbers on the time selection dial.
  ///
  /// If [dialTextStyle]'s [TextStyle.color] is a [MaterialStateColor], then
  /// the effective text color can depend on the [MaterialState.selected]
  /// state, i.e. if the text is selected or not.
  ///
  /// If this style is null then the dial's text style is based on the theme's
  /// [ThemeData.textTheme].
  final TextStyle? dialTextStyle,

  /// Used to configure the [TextStyle]s for the helper text in the header.
  ///
  /// If this is null, the time picker defaults to the overall theme's
  /// [TextTheme.labelSmall].
  final TextStyle? helpTextStyle,

  /// Used to configure the [TextStyle]s for the hour/minute controls.
  ///
  /// If this is null, the time picker defaults to the overall theme's
  /// [TextTheme.headline3].
  final TextStyle? hourMinuteTextStyle,

  /// A temporary flag used to opt-in to Material 3 features.
  ///
  /// If set to true, the theme will use Material3 default styles when
  /// properties are undefined, if false defaults will use FlexColorScheme's
  /// own opinionated default values.
  ///
  /// The M2/M3 defaults will only be used for properties that are not
  /// defined, if defined they keep their defined values.
  ///
  /// If undefined, defaults to false.
  final bool? useMaterial3,
}) {
  final bool useM3 = useMaterial3 ?? false;
  final bool useDecorator = useInputDecoratorTheme ?? false;

  final Color? background = backgroundSchemeColor == null
      ? backgroundColor // might be null, then SDK theme defaults.
      : schemeColor(backgroundSchemeColor, colorScheme);

  Color defaultHourMinuteColor() {
    return MaterialStateColor.resolveWith((Set<MaterialState> states) {
      // These styles are copied for M# default, we are not going to test
      // them again.
      // coverage:ignore-start
      if (states.contains(MaterialState.selected)) {
        Color overlayColor = colorScheme.primaryContainer;
        if (states.contains(MaterialState.pressed)) {
          overlayColor = colorScheme.onPrimaryContainer;
        } else if (states.contains(MaterialState.hovered)) {
          const double hoverOpacity = 0.08;
          overlayColor =
              colorScheme.onPrimaryContainer.withOpacity(hoverOpacity);
        } else if (states.contains(MaterialState.focused)) {
          const double focusOpacity = 0.12;
          overlayColor =
              colorScheme.onPrimaryContainer.withOpacity(focusOpacity);
        }
        return Color.alphaBlend(overlayColor, colorScheme.primaryContainer);
      } else {
        Color overlayColor = colorScheme.surfaceVariant;
        if (states.contains(MaterialState.pressed)) {
          overlayColor = colorScheme.onSurface;
        } else if (states.contains(MaterialState.hovered)) {
          const double hoverOpacity = 0.08;
          overlayColor = colorScheme.onSurface.withOpacity(hoverOpacity);
        } else if (states.contains(MaterialState.focused)) {
          const double focusOpacity = 0.12;
          overlayColor = colorScheme.onSurface.withOpacity(focusOpacity);
        }
        return Color.alphaBlend(overlayColor, colorScheme.surfaceVariant);
      }
      // coverage:ignore-end
    });
  }

  InputDecorationTheme timePickerDefaultInputDecorationTheme() {
    const BorderRadius defaultRadius = BorderRadius.all(Radius.circular(8.0));
    return InputDecorationTheme(
      contentPadding: EdgeInsets.zero,
      filled: true,
      hoverColor: colorScheme.brightness == Brightness.dark
          ? Colors.white.withOpacity(0.04)
          : Colors.black.withOpacity(0.04),
      fillColor: defaultHourMinuteColor(),
      focusColor: colorScheme.primaryContainer,
      enabledBorder: const OutlineInputBorder(
        borderRadius: defaultRadius,
        borderSide: BorderSide(color: Colors.transparent),
      ),
      errorBorder: OutlineInputBorder(
        borderRadius: defaultRadius,
        borderSide: BorderSide(color: colorScheme.error, width: 2),
      ),
      focusedBorder: OutlineInputBorder(
        borderRadius: defaultRadius,
        borderSide: BorderSide(color: colorScheme.primary, width: 2),
      ),
      focusedErrorBorder: OutlineInputBorder(
        borderRadius: defaultRadius,
        borderSide: BorderSide(color: colorScheme.error, width: 2),
      ),
      disabledBorder: OutlineInputBorder(
        borderRadius: defaultRadius,
        borderSide: BorderSide(
            color: colorScheme.onSurface.withOpacity(0.12), width: 1),
      ),
      errorStyle: const TextStyle(fontSize: 0, height: 0),
    );
  }

  MaterialStateProperty<Color> dayPeriodForegroundColor() {
    return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
      Color? textColor;
      if (states.contains(MaterialState.selected)) {
        if (states.contains(MaterialState.pressed)) {
          textColor = colorScheme.onTertiaryContainer;
        } else {
          // not pressed
          if (states.contains(MaterialState.focused)) {
            textColor = colorScheme.onTertiaryContainer;
          } else {
            // not focused
            if (states.contains(MaterialState.hovered)) {
              textColor = colorScheme.onTertiaryContainer;
            }
          }
        }
      } else {
        // unselected
        if (states.contains(MaterialState.pressed)) {
          textColor = colorScheme.onSurfaceVariant;
        } else {
          // not pressed
          if (states.contains(MaterialState.focused)) {
            textColor = colorScheme.onSurfaceVariant;
          } else {
            // not focused
            if (states.contains(MaterialState.hovered)) {
              textColor = colorScheme.onSurfaceVariant;
            }
          }
        }
      }
      return textColor ?? colorScheme.onTertiaryContainer;
    });
  }

  return TimePickerThemeData(
    // Optional text styles
    dayPeriodTextStyle: dayPeriodTextStyle,
    dialTextStyle: dialTextStyle,
    helpTextStyle: helpTextStyle,
    hourMinuteTextStyle: hourMinuteTextStyle,
    //
    backgroundColor: background,
    elevation: elevation ?? kDialogElevation,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(
        Radius.circular(radius ?? kDialogRadius),
      ),
    ),
    hourMinuteShape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(
        Radius.circular(elementRadius ?? kTimeElementRadius),
      ),
    ),
    dayPeriodShape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(
        Radius.circular(elementRadius ?? kTimeElementRadius),
      ),
    ),
    //
    // TODO(rydmike): Fixes for clock dial background color issue in M3.
    // https://github.com/flutter/flutter/issues/118657
    dialBackgroundColor: useM3 ? colorScheme.surfaceVariant : null,
    dayPeriodColor: useM3
        ? MaterialStateColor.resolveWith((Set<MaterialState> states) {
            if (states.contains(MaterialState.selected)) {
              return colorScheme.tertiaryContainer;
            }
            return Colors.transparent;
          })
        : null,
    dayPeriodTextColor: useM3
        ? MaterialStateColor.resolveWith((Set<MaterialState> states) {
            return dayPeriodForegroundColor().resolve(states);
          })
        : null,
    // M3 styling Flutter 3.7 does not do this yet, but we can du in M3 mode.
    hourMinuteColor: useM3
        ? MaterialStateColor.resolveWith((Set<MaterialState> states) {
            if (states.contains(MaterialState.selected)) {
              Color overlayColor = colorScheme.primaryContainer;
              if (states.contains(MaterialState.pressed)) {
                overlayColor = colorScheme.onPrimaryContainer;
              } else if (states.contains(MaterialState.focused)) {
                overlayColor =
                    colorScheme.onPrimaryContainer.withAlpha(kAlphaFocused);
              } else if (states.contains(MaterialState.hovered)) {
                overlayColor =
                    colorScheme.onPrimaryContainer.withAlpha(kAlphaHovered);
              }
              return Color.alphaBlend(
                  overlayColor, colorScheme.primaryContainer);
            } else {
              Color overlayColor = colorScheme.surfaceVariant;
              if (states.contains(MaterialState.pressed)) {
                overlayColor = colorScheme.onSurface;
              } else if (states.contains(MaterialState.focused)) {
                overlayColor = colorScheme.onSurface.withAlpha(kAlphaFocused);
              } else if (states.contains(MaterialState.hovered)) {
                overlayColor = colorScheme.onSurface.withAlpha(kAlphaHovered);
              }
              return Color.alphaBlend(
                  overlayColor, colorScheme.surfaceVariant);
            }
          })
        : null,
    //
    // Custom additions the Widget does internally, but for some reason
    // only does to null default theme. If you use a custom decorator
    // you are supposed to know that you have to add these shenanigans
    // for it to work and look right.
    inputDecorationTheme: useDecorator
        ? inputDecorationTheme?.copyWith(
              contentPadding: EdgeInsets.zero,
              // Prevent the error text from appearing.
              // See https://github.com/flutter/flutter/issues/54104
              errorStyle: const TextStyle(fontSize: 0, height: 0),
            ) ??
            const InputDecorationTheme().copyWith(
              contentPadding: EdgeInsets.zero,
              // Prevent the error text from appearing.
              // See https://github.com/flutter/flutter/issues/54104
              errorStyle: const TextStyle(fontSize: 0, height: 0),
            )
        // To get back to a default style, we have to provide an explicit
        // default matching style, very tedious. Read more about this here:
        // https://github.com/flutter/flutter/pull/128950#issuecomment-1657177393
        : timePickerDefaultInputDecorationTheme(),
  );
}