Why do we need a generator at all? The rationale is simple; instead of generating the ColorScheme on application startup using fromSeed, we just use a static ColorScheme generated and tweaked in advance.

If you are a member, please continue, otherwise, read the full story here.

So, what choices do we have?

Flutter Theme Generator

Link

None
https://theme.ionicerrrrscode.com/generator

Pluses:

  • Nice interface.
  • Extracts colors from the image.
  • Generates the whole theme with typography and the main components themeData.
  • export as Dart files.

Minuses:

  • Contrast ratio problems (for some color combinations);
  • Sometimes, generated high contrast variants of the ColorScheme have more problems than low ones;
  • High contrast variants are generated as a copyWith method that only affects surface and primary colors.

Appainter

Link

None
https://appainter.dev/

I didn't find any pluses.

Minuses:

  • The interface is glitchy and buggy.
  • Hard to use the color picker.
  • No image colors extraction.
  • Export into the json. (What to do with it? I mean, I know that JSON can be parsed and so on, but why not export directly into Dart, if you took a challenge to build such a tool?)

Material Theme Builder (the winner)

Link

None
https://material-foundation.github.io/material-theme-builder/

Pluses:

  • Nice interface;
  • Very robust and convenient color picker.
  • Import the source color from the image.
  • No contrast issues. Whatever colors I choose, bright or dim, it generates a nice palette with no accessibility problems.
  • Generates three full ColorScheme contrast variants for each brightness.
  • Export into the Dart files.

Minuses:

  • Doesn't generate the whole ThemeData, but only the ColorScheme. (I don't need the ThemeData, but I try to be objective here. 😎)

Example

Here is an example of ColorScheme I have generated.

None

Not much we can see on above screenshots, but it is generally nice with sufficient contrast. And even if we made light surface darker, and dark lighter (I just don't like those white/black backgrounds)…

None

… they still look contrast enough.

Note that the above is a low contrast variant. Material Theme Builder also generates medium and high variants.

How to use

  1. Go to https://material-foundation.github.io/material-theme-builder/
  2. Choose colors
  3. Generate scheme
  4. Download the zip and extract
  5. Open theme.dart file and copy ColorScheme into a static variable in your project.
static final mtbYellowBlueGreenLight = ColorScheme(
     brightness: Brightness.light,
      primary: Color(0xff7c580d),
      surfaceTint: Color(0xff7c580d),
      onPrimary: Color(0xffffffff),

6. Use it in your ThemeData constructor

theme: ThemeData(colorScheme: Schemes.mtbYellowBlueGreenLight),

Summary

Material Theme Builder is by far better ColorScheme generator than the rivals.

Useful links

The following sources will help to understand how the ColorScheme works in Flutter, i.e., which colors are assigned to which components. https://m3.material.io/styles/color/system/how-the-system-works https://m3.material.io/styles/color/roles