[TimePicker] Clock is not filled with color

[sabin26]

Hi, I was wondering why the clock component isn't being filled with color. Is this correct behavior and do I have to modify the theme manually ?

Light theme (Not filled)

Dark theme (Filled)

Code:

static ThemeData getThemeData(final int color, {final bool isDark = false}) {
    return switch (isDark) {
      false => FlexThemeData.light(
          colorScheme: ColorScheme.fromSeed(seedColor: Color(color)),
          appBarElevation: Insets.xxs,
          useMaterial3: true,
          swapLegacyOnMaterial3: true,
          useMaterial3ErrorColors: true,
          pageTransitionsTheme: const NoTransitionsOnWeb(),
          visualDensity: FlexColorScheme.comfortablePlatformDensity,
        ),
      true => FlexThemeData.dark(
          colorScheme: ColorScheme.fromSeed(
            seedColor: Color(color),
            brightness: Brightness.dark,
          ),
          appBarElevation: Insets.xxs,
          useMaterial3: true,
          swapLegacyOnMaterial3: true,
          useMaterial3ErrorColors: true,
          pageTransitionsTheme: const NoTransitionsOnWeb(),
          visualDensity: FlexColorScheme.comfortablePlatformDensity,
        ),
    };
  }

Flutter version: 3.13.4 (stable)
FCS version: 7.3.1

[rydmike]

Hi @sabin26, thanks for your question.

If you do not enable using sub-themes/component themes in FlexColorScheme, you for most component themes get no additional theming on them other than Flutter SDK component theme defaults.

Except for a few settings that due to FlexColorScheme legacy (prior to that it started supporting sub themes/component themes) are including in the core defaults. What is included in the core without enabling sub-themes you can find in docs in core defaults: https://docs.flexcolorscheme.com/core_defaults

In the sample above you are not enabling or using FlexColorScheme's component theming features, which means that for the TimePicker you get the Flutter SDK default style.

The Flutter SDK default for Material3 TimePicker has a bug, it does not set the clock dial background color correctly, as you observed. This theming bug is mentioned in the docs here https://docs.flexcolorscheme.com/known_issues#timepicker-clock-dial-has-wrong-m3-defaults and in Themes Playground known issue for Time Picker (screenshot further below). In Flutter GitHub I reported the issue here flutter/flutter#118657.

The issue has been fixed in the Flutter master channel, but the fix has not landed in latest Flutter stable version (3.13.4).

Thus if you do not use FlexColorScheme's opinionated component themes, then you get the Flutter default with this issue, as you noticed and as also demonstrated below with the Themes Playground FCS API configurator:

If you enable FlexColorScheme's opinionated component themes, then it automatically also fixes this issue and applies the correct M3 color mapping to the clock dial. As shown below:

Fix without FCS component themes

If you do not want to use FlexColorScheme component theming features, you can also use ThemeData.copyWith on the produced ThemeData and set the dial background color to surfaceVariant (correct M3 default) or any other desired background color.

Using your example, e.g.:

static ThemeData getThemeData(final int color, {final bool isDark = false}) {
    
    ColorScheme colorScheme = isDark 
      ? ColorScheme.fromSeed(seedColor: Color(color), brightness: Brightness.dark) 
      : ColorScheme.fromSeed(seedColor: Color(color));

    return switch (isDark) {
      false => FlexThemeData.light(
          colorScheme: colorScheme,
          appBarElevation: Insets.xxs,
          useMaterial3: true,
          swapLegacyOnMaterial3: true,
          useMaterial3ErrorColors: true,
          pageTransitionsTheme: const NoTransitionsOnWeb(),
          visualDensity: FlexColorScheme.comfortablePlatformDensity,
        ).copyWith(timePickerTheme(dialBackgroundColor: colorScheme.surfaceVariant)),
      true => FlexThemeData.dark(
          colorScheme: colorScheme,
          appBarElevation: Insets.xxs,
          useMaterial3: true,
          swapLegacyOnMaterial3: true,
          useMaterial3ErrorColors: true,
          pageTransitionsTheme: const NoTransitionsOnWeb(),
          visualDensity: FlexColorScheme.comfortablePlatformDensity,
        ).copyWith(timePickerTheme(dialBackgroundColor: colorScheme.surfaceVariant)),
    };
  }

Hope this explains this oddity and helps! 😄

FCS component themes has handled this Flutter issue for many Flutter version already. However, when the issue fix in Flutter lands, this color correction is of course no longer needed if you use the default surfaceVariant.

[rydmike]

I'm closing this issue as answered and also converting it to a Q&A for discussions section so that other users may also find it there if they notice it.

If you have more questions we can continue the discussion there 😃