Dynamic color support?

[fredgrott]

Ryd Mike,

I am re-doing the dynamic color builder to use flex color scheme instead so that the corePalette from android and accent color from desk equally are used as color scheme seed inputs.

What form does it need to be to contribute back to the this project or Flex Seed Scheme?

Otherwise one would get tone diffs between desktop and android which in my view is a design mess.

[rydmike]

Hi @fredgrott,

Thanks for your question, it is good one that I have been meaning to add some example and guidance, and best practices on. Still on my to do list.

You can do it two different ways.

A) Give FlexClorScheme a ready made ColorScheme

The dynamic color gives you the main colors, for the scheme to be seed generated from, primary, secondary and tertiary. You can then make the seed generated ColorScheme with Flutter using ColorScheme.fromSeed.

However, with Flutter SDK you can only use the main/primary key color to generate a full color scheme using ColorScheme.fromSeed. The resulting ColorScheme you can feed directly to FlexColorScheme.colorScheme. Same applies if you already have a full ColorScheme from Android side. If it is a fully qualified ColorScheme, or can be converted to one, you can always give it to the colorScheme in FlexColorScheme / FlexThemeData

B) Use the key color with FlexSchemeColor.from

Another option is to only take the Android side received key colors, primary, secondary, tertiary. Make a FlexSchemeColor or FlexThemeData of them using FlexSchemeColor.from

theme: FlexThemeData.light(
  colors: FlexSchemeColor.from(
    primary: Color(0xff004881),   // Assuming this is main color from Android
    secondary: Color(0xffac3306), // Assuming this is secondary color from Android
    tertiary: Color(0xff006875),  // Assuming this is tertiary color from Android
  ),
  keyColors: const FlexKeyColors(
    // Just a FlexKeyColors() will only use the given primary color above to
    // generate the ColorScheme from seed, it is identical to using ColorsScheme.fromSeed
    useSecondary: true, // Remove line to not use secondary key color
    useTertiary: true,  // Remove line to not use tertiary key color
  ),
  useMaterial3: true,
),

If you want an exact match with M3 keep, surface blends at 0.

Above you can use the secondary and tertiary colors as keys for their corresponding tonal palettes that the seed generated color scheme is picked from.

There is one caveat though, I don't know what parameters are used on Android side to make the tonal palettes when you have more than one seed color.

The Material 3 design guide web tool https://m3.material.io/theme-builder#/custom can also use secondary and tertiary colors as inputs. However, if you give it Secondary and Tertiary input colors, it then uses them with the same palette generation algorithm parameters as if they would have be primary colors. This will result in a very bad ColorScheme, one that does not conform to the M3 color system at all.

Above the default tones config is used, which would be FlexTone.material(Brightness.light) is used, but when you give it separate key colors for secondary and tertiary, it uses the hue from those colors instead of basing them only of the primary key color's hue. It does however keep the the same chroma limits that the single key color does, for the secondary and tertiary tonal palette calculation, which then produces a ColorScheme that conform to the M3 color system. One can vary the parameters and still conform to the general principle of M3 Color System, that is what the built-in FlexTones does e.g. tones: FlexTones.jolly(Brightness.light).

The seed calculation algorithm in FlexColorScheme can be configured to use very different parameters for the seed generation, even what tones are used for what ColorScheme color can be modified. As said, there are bunch of built-in optional configs to the Material3 setup, but none that does what the current version of the M3 scheme builder does.

However, one can always just configure it manually to do what the web tool does as well:

  tones: const FlexTones.light(
    secondaryMinChroma: 48,
    tertiaryMinChroma: 48,
   ),

But I don't think that is what the Android side is doing when it generates the color scheme from multiple key colors. Nor should the Web tool do so, but it does.

More about more advanced seed generated ColorScheme can be found in the FlexSeedScheme package that FlexColorScheme uses https://pub.dev/packages/flex_seed_scheme, which in turn is based on using lower level functions in the material_color_utilities package https://pub.dev/packages/material_color_utilities to be able provide more customization than ColorScheme.fromSeed, that also uses material_color_utilities, but at a higher level.

As mentioned, I have not had time to add an example of using the Dynamic color package to get colors from the Android side and demonstrate how to combine it with FlexColorScheme for different results. It is definitely on my todo list.

Hope any of the above can provide some guidance to get you started. Feel free to ask more if not. I'm going to move this over to a Q/A to the discussion side, since I think it might be useful there too for other as well.