[TimePicker] Inconsistent theming on dark mode

[sabin26]

Hi @rydmike , I noticed some color differences between flutter defaults and flex_color_scheme using material3 on TimePicker.

Flutter default:

flex_color_scheme:

Code Sample:

import 'package:flex_color_scheme/flex_color_scheme.dart';
import 'package:flutter/material.dart';

@immutable
class AppColors {
  static final int primary = Colors.green.value;

  static ThemeData getThemeData(final int color, {final bool isDark = false}) {
    switch (isDark) {
      case false:
        return FlexThemeData.light(
          colors: FlexSchemeColor.from(primary: Color(color)),
          useMaterial3: true,
          swapLegacyOnMaterial3: true,
          useMaterial3ErrorColors: true,
          visualDensity: FlexColorScheme.comfortablePlatformDensity,
        );
      default:
        return FlexThemeData.dark(
          colors: FlexSchemeColor.from(primary: Color(color)),
          useMaterial3: true,
          swapLegacyOnMaterial3: true,
          useMaterial3ErrorColors: true,
          visualDensity: FlexColorScheme.comfortablePlatformDensity,
        );
    }
  }
}

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: AppColors.getThemeData(AppColors.primary),
      darkTheme: AppColors.getThemeData(AppColors.primary, isDark: true),
      // theme: ThemeData(
      //   colorScheme: ColorScheme.fromSeed(seedColor: Color(AppColors.primary)),
      //   useMaterial3: true,
      // ),
      // darkTheme: ThemeData(
      //   colorScheme: ColorScheme.fromSeed(
      //     seedColor: Color(AppColors.primary),
      //     brightness: Brightness.dark,
      //   ),
      //   useMaterial3: true,
      // ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(title),
      ),
      body: Center(
        child: OutlinedButton(
          onPressed: () async {
            await showTimePicker(
              context: context,
              initialTime: TimeOfDay.now(),
              helpText: '',
              initialEntryMode: TimePickerEntryMode.dialOnly,
            );
          },
          child: const Text('Show TimePicker Dialog'),
        ),
      ),
    );
  }
}

[rydmike]

Hi @sabin26, thanks for your question.

To get the same result in FCS, you also need to use the same seed color key generation algorithm in FCS that the ColorScheme.fromSeed(seedColor: Color(AppColors.primary)), uses in your example.

The API using FlexSchemeColor.from(primary: Color(color)), is an older API that uses FCS internal algorithm to generate colors from only a few colors. It was used before Flutter even had a ColorScheme.fromSeed algorithm. It can still be used, it is based on similar ideas, that Flutter added later but it produced different results.

There are two ways to get the same result:

1. Use same input colorsScheme

You can use a pre-generated ColorScheme's with FlexColorScheme as well, you then just pass in the same ColorScheme.

  static ThemeData getThemeData(final int color, {final bool isDark = false}) {
    switch (isDark) {
      case false:
        return FlexThemeData.light(
          colorScheme: colorScheme: ColorScheme.fromSeed(seedColor: Color(AppColors.primary)),
          useMaterial3: true,
          subThemesData: const FlexSubThemesData(),          
          visualDensity: FlexColorScheme.comfortablePlatformDensity,
        );
      default:
        return FlexThemeData.dark(
          colorScheme: colorScheme: ColorScheme.fromSeed(seedColor: Color(AppColors.primary), brightness: Brightness.dark),
          useMaterial3: true,
          subThemesData: const FlexSubThemesData(),
          visualDensity: FlexColorScheme.comfortablePlatformDensity,
        );
    }

You don't have to enable the sub-themes subThemesData: const FlexSubThemesData(), but you might want to, depends on how much you want to customize.

It is also possible to use the FlexSchemeColor.from(primary: Color(color)), and ask FCS to generate the same ColorScheme using the same algorithm that ColorScheme.from will produce.

2. Use FlexSchemeColor.from and ask FCS to generate the ColorScheme

You can ask FCS to generate the ColorScheme like you did with ColorScheme.fromSeed.

You can then use colors: FlexSchemeColor.from(primary: Color(color)), to input that color:

  static ThemeData getThemeData(final int color, {final bool isDark = false}) {
    switch (isDark) {
      case false:
        return FlexThemeData.light(
          colors: FlexSchemeColor.from(primary: Color(AppColors.color)),
          useMaterial3: true,
          subThemesData: const FlexSubThemesData(), 
          keyColors: const FlexKeyColors(),
          visualDensity: FlexColorScheme.comfortablePlatformDensity,
        );
      default:
        return FlexThemeData.dark(
          colors: FlexSchemeColor.from(primary: Color(AppColors.color)),
          useMaterial3: true,
          subThemesData: const FlexSubThemesData(),
          keyColors: const FlexKeyColors(),
          visualDensity: FlexColorScheme.comfortablePlatformDensity,
        );
    }

Alternatively you can just provide this primary color as direct override input too, this should work too:

  static ThemeData getThemeData(final int color, {final bool isDark = false}) {
    switch (isDark) {
      case false:
        return FlexThemeData.light(
          primary: Color(AppColors.color),
          useMaterial3: true,
          subThemesData: const FlexSubThemesData(), 
          keyColors: const FlexKeyColors(),
          visualDensity: FlexColorScheme.comfortablePlatformDensity,
        );
      default:
        return FlexThemeData.dark(
          primary: Color(AppColors.color),
          useMaterial3: true,
          subThemesData: const FlexSubThemesData(),
          keyColors: const FlexKeyColors(),
          visualDensity: FlexColorScheme.comfortablePlatformDensity,
        );
    }

I did not try the above, just writing of the top of my head here, but as I recall it should produce the same result (I need to check if I have that in my package tests, if not I should add it).

The takeaway is that using a default keyColors: const FlexKeyColors(), will activate using key colors as input to generate the ColorScheme in FCS. By using the default constructor it will use same algo as ColorScheme.fromSeed and use the primary color as seedColor. T

FCS keyColors: const FlexKeyColors() also contains many other properties that can be used to adjust the computed ColorScheme generation. It it can also also use secondary and tertiary colors as input seed Colors. Plus it has different settings in the generation algorithm to produce different results, often with more brightness and contrast, if so desired.

For keyColors: const FlexKeyColors() FCS uses FlexSeedScheme under then hood, a more flexible and powerful version of ColorScheme.fromSeed.

Result observations

From your screen shot I can see you are perhaps on Flutter beta 3.10 or master channel, since Flutter 3.7 does not yet produce a TimePicker like that. Its TimePicker will look like this using the colors as example:

Flutter 3.10 and master produces this:

FlexColorScheme 7.0x and 7.1 beta will with the above settings produce this:

The clock dial is different, FCS corrects it and uses correct M3 spec on the dial, Flutter will later too:

flutter/flutter#118657

You can of course adjust the TimePickerDialog color scheme color mapping by overriding with your own time picker component theme over what Flutter or FCS does by default. In a future version I might add more built-in configurable color mapping to TimePicker and DatePicker.

Some more info in the docs https://docs.flexcolorscheme.com/api_guide#generated-colorscheme.

[sabin26]

I am using the beta channel of flutter and I tested the first option i.e. using colorScheme and the results are correct (as expected). I was not aware that FlexSchemeColor.from is an older API. Thank you for your help !

[rydmike]

Yes, a bit older, but perfectly usable, but most importantly different.

It predates ColorScheme.fromSeed, had I known it would come I would probably have used a less confusing/conflicting name.

It is a bit more related to ColorScheme.light and ColorScheme.dark that create fallbacks from default if color is not given. FlexSchemeColor.from does also use some M2 era defaults and computation from provided colors, so that so many colors does not have to be defined. It is very similar to the idea ColorScheme.fromSeed introduced a bit later in Flutter.

Like Flutter itself, FCS is beginning to also contain legacy APIs, but in contradiction to many of those in Flutter they are still useful, depends on your design goals. In Flutter the ColorScheme.fromSwatch is for example quite horrible.

I have a chapter in the FCS docs that talks about different ways to define colors for ThemeData and what they result in: https://docs.flexcolorscheme.com/theming_roads.

---

Using a full ColorScheme as input is totally possible, as you saw, it is useful if you have custom one you want to use, or one extracted from image or delivered by the system API from Android side.

You can still use it as input and add additional surface blends, etc, then of course those surface colors in the ColorScheme will be overridden. You can even use it as input to generate ColorScheme in FCS, using the primary/secondary/tertiary colors in the ColorScheme as seed color suing another algo than the default one in Flutter.

I know, lot's of flexibility, so it can be a bit confusing. Future work, but then also breaking version, will focus on making things even simpler and clearer.

I am converting this to a FAQ question. It is a good and valid question, that others might stumble upon in discussions then later as well.

[rydmike]

With the Themes Playground you can also toggle using FlexColorScheme OFF completely and then see what Flutter does by default, just using the same color input as the ones you are looking. So you can Toggle e.g. M2/M3, FCS ON/OFF, FCS sub-themes ON/OFF to see the diff it makes on widgets.

If you add custom colors, like the green[500] input you used above, you can see what it looks like with your custom colors too.