What Is New?

This chapter features recent news and updates in FlexColorScheme. For a more complete list, and older updates, please refer to the package changelog.

This documentation site was launched together with version 5.0.0. It is constantly updated and improved. Suggestions and corrections to improve the documentation are welcome contributions.

Version 6.1.0

FlexColorScheme version 6.1.0 contains many new features, more component sub-themes and configurable properties. It improves seed-generated color scheme capabilities by adding more pre-configured seed generation configurations and color contrast accessibility options.

A criticism of Material 3's color system and seed-generated color schemes, is that using colored contrasting colors may be less accessible. FlexColorScheme offers a way to enable in-app modification of its Material 3 style seed-generated color schemes. Any seed generation configuration can optionally return results with plain white and black contrasting on colors. This can be applied separately for main on colors and surface on colors.

The Themes Playground application, has been updated to include most of the new features. It has been improved to make it easier to discover some of its previously existing features, like using custom colors in the Playground to define your own theme.

Some minor style changes exist when opting in on opinionated component sub-themes, they bring the Material 2 mode component themes closer in alignment with Material 3 styles. For a detailed list of changes, please refer to the package changelog.

For a slideshow tour of what is new, check out this Tweet and its thread, where Flutter Dash talks you through the major new features.

Version 6.0.0

This is a breaking release. For a complete list of all changes, see change log. Generated API docs are available and up to date with version 6. This release requires at least Flutter 3.3.0 and Dart 2.18.0. It uses theming features in Flutter SDK that do not exist in earlier versions.

BREAKING

  • FlexColorScheme no longer directly depends on package Material Color Utilities package, which is also used by Flutter SDK. Instead, it uses package FlexSeedScheme that depends on it. As a part of this change classes FlexTones, FlexTonalPalette and FlexCorePalette where moved into the package FlexSeedScheme. FlexColorScheme still exports these classes. If you were using them directly before, you can still do so without adding the FlexSeedScheme package.
    • In FlexSeedScheme, FlexTones contains a minor breaking change to make the API cleaner. The FlexTones.light and FlexTones.dark no longer produce the config for the Material 3 tone and chroma setup. They no longer lock the chroma values to the default values for M3, but use null in their configs for their chroma values. Resulting in that chroma from key colors will be used, as long as they are over set minimum values.
    • In FlexSeedScheme FlexCorePalette.fromSeeds properties secondaryChroma and tertiaryChroma now default to null instead of previous M3 palette default generating values 16 and 24 respectively. Set them to values 16 and 24 to create same tonal palettes as Material Color Utilities CorePalette and previous versions of FlexCorePalette.
    • To allow for greater flexibility, and for the addition of tonal palette tones 5 (custom for FCS) and 98 (Google Material 3 Web theme builder app includes tone 98 to, but not Flutter SDK), FlexCorePalette no longer extends CorePalette, it is a modified re-implementation.
    • In FlexSeedScheme the FlexTonalPalette method asList and constructor fromList, now include the values of the error color in produced asList, and as required values in fromList.

STYLE CHANGES

  • Updated ElevatedButton to support useMaterial3 defaults concerning its switched foreground and background color roles. It now also uses stadium border instead of 20dp, M3 size, padding and elevation defaults, when useMaterial3 is opted in on. The switched default color values, compared to M2, are to make it compliant with the M3 style by default. You can configure it back to M2 style in M3 mode if you so prefer, by setting background color to primary and the foreground color to surface or onPrimary, for a more M2 styled ElevatedButton. Material 3 will also offer two new button styles, called FilledButton and FilledButton.tonal, which in their default color style are more like ElevatedButton in Material 2, but without elevation. These buttons are, however, not yet available in Flutter 3.3. When Flutter stable supports them, they will be added to FlexColorScheme as well.

  • Updated OutlinedButton to support useMaterial3 defaults concerning its outline color default. It now also uses stadium border instead of 20dp, M3 size and padding, when useMaterial3 is opted in on.

  • Updated TextButton to support useMaterial3 defaults concerning its usage of the stadium border, instead of 20dp radius, as well M3 size and padding, when useMaterial3 is opted in on.

  • FlexSubThemesData.fabUseShape opinionated component theme style default was changed from true to false, this breaks previous default style. The opinionated style change was done to use a style that by default matches M3 style when ThemeData.useMaterial3 is true. The new default style is also a way to work around issue #107946, where it is shown that you cannot create a theme that replicates the default rounding in M3 of the FAB, by offering it as default. Style migration: If you had kept FlexSubThemesData.fabUseShape unspecified and relied on default value in a previous version, you must set it to true to get the same result as before. Breaking style changes like this, in the opinionated opt-in component sub-themes are unfortunate, but required as FlexColorScheme continues to evolve with Flutter SDK to support Material 3 theming.

  • The opt-in opinionated tinted text themes were made less aggressive on the tint amount and also received a bit of opacity on styles that in 2014/2018/2021 Typography have opacity. The custom styles use significantly less opacity, since they also get alpha-blended tint color applied. Combining it with the same level of opacity would make them too low contrast.

  • The main text theme now uses surfaceTint color instead of primary when tinted text theme is enabled. By default surfaceTint equals primary, but if theme surfaceTint is set to use a custom color, the for surface tinted textTheme is now also based on it. This makes it match the custom tinted surfaces as well. The primary text theme, that fits on primary color, still always uses primary color as its tint color.

  • The FlexAppBarStyle property was made nullable. It now defaults to null in all constructors. When it is null and useMaterial3 is false, the app bar will use style FlexAppBarStyle.primary in light mode as default, like before and FlexAppBarStyle.material in dark mode. However, if useMaterial3 is true, then it will use FlexAppBarStyle.surface in both light and dark mode, to match the un-themed defaults of Material 3 design AppBar.

  • Changed opinionated dialog sub-theme defaults to match M3 defaults. Elevation now set to 6, it was 10 and actionsPadding defaults to EdgeInsets.only(left: 24.0, right: 24.0, bottom: 24.0), it did not have a custom default before. These are new defaults for the opinionated dialog sub-theme for both the M2 and M3 mode.

  • Updated Chip sub-theme when opting in on useMaterial3. When true it now uses M3-styled Chips instead of its own opinionated custom style, also when the opinionated component sub-themes are enabled. To get the same opinionated coloring as before, but on the M3 styled chips when using M3, set component sub-themes data subThemesData: const FlexSubThemesData(chipSchemeColor: SchemeColor.primary).

  • Updated InputDecoration default sub-theme when opting in on useMaterial3. When true it now results in a more upcoming M3 styled TextField style by default, instead of its own more opinionated custom style, also when the opinionated component sub-themes are enabled. It still uses a lot of its own styles, in M3 mode, because TextField's real M3 design is not yet available in Flutter 3.3.

    • TextField's FCS opinionated style, combined with M3 real defaults, will need more work on M3 styles after "Migrate TextField to Material 3" lands in the stable channel. The M3 alignment of FCS InputDecoration planned adjustments are:
      • Using the same error container color idea, for the FCS defaults that M3 uses, could be OK for both modes.
      • Option to use FCS component defaults on fill colors and disabled colors, also when opting in on M3. These FCS defaults can provide a nice alternative also when opting in on M3, but we should not force it on M3 unless asked for.

BREAKING: REMOVED DEPRECATED MEMBERS

All previously deprecated members have been removed from version 6.0.0. FCS no longer has any self-deprecated members. This removes legacy backwards compatibility with deprecated members from versions 2, 3 and 4, and even one from version 5.1.0. The removed deprecated members are:

  • FlexSubThemesData:
    inputDecorationRadius, bottomNavigationBarSchemeColor, navigationBarIsStyled, navigationBarTextSchemeColor, navigationBarMutedUnselectedText, navigationBarIconSchemeColor, navigationBarHighlightSchemeColor.
  • FlexColorScheme:
    primaryVariant, secondaryVariant, useSubThemes. Removed static FlexColorScheme.m3TextTheme deprecated in 5.1.0 and static FlexColorScheme.themedSystemNavigationBar in version 2 its deprecated parameter nullContextBackground.
  • FlexThemeData:
    primaryVariant, secondaryVariant, useSubThemes.
  • FlexSchemeColor:
    primaryVariant, secondaryVariant.
  • SchemeColor:
    primaryVariant, secondaryVariant.
  • FlexConstants:
    kDarkenSecondaryVariant, kDarkenSecondaryVariantFromSecondary, kDarkenPrimaryVariant.
  • FlexSubThemes.bottomNavigationBar: baseSchemeColor.
  • FlexSubThemes.navigationBarTheme: textSchemeColor, unselectedTextSchemeColor, mutedUnselectedText, iconSchemeColor, highlightSchemeColor.

Version 5.1.0

Updated to support latest Flutter package dependencies in example apps. Supports and requires at least Flutter 3.0.0 and Dart 2.17.0.

NEW FEATURES

  • Added support for in Flutter 3.0.0 new ColorScheme.surfaceTint color. It is set to ColorScheme.primary color by default, as Flutter and Material 3 does. If a custom surfaceTint color is provided, it is also used as the blend color, instead of primary color, for FlexColorScheme's surface blend feature.

  • Added API for using Flutter 3.0.0 theme extensions directly via FlexColorScheme API. It was added as a convenience feature in order to avoid having to add theme extensions with a copyWith on FlexColorScheme produced ThemeData. With the FlexColorScheme.extensions and FlexThemeData.extensions properties you can add custom theme extensions directly.

STYLE CHANGES

  • Floating Action Button background color, will when opting in on ThemeData.useMaterial3, use color theme.colorScheme.primaryContainer, otherwise theme.colorScheme.secondary is used.

  • The TextField and its InputDecorator border radius default value was changed from 20 dp to 16 dp when using opinionated component themes. If opting in on Material 3, the default value for M3 design is used, which is only 4 dp. See specification https://m3.material.io/components/text-fields/specs. Flutter 3.0.x does not yet implement the new M3 TextField style, but via this change when opting in on M3, FlexColorScheme offers an early approximation of it.

  • Default colors of NavigationBar when opting in on useMaterial3 and not using opinionated component themes will now match M3 default colors. The background color will follow M3 style also by default when component themes are enabled and useMaterial3 is true. This style is difficult to replicate with a single color otherwise. The difference is subtle for FCS surface tinted background colors. You can still set it to background color to replicate past FCS default color when sub-themes were enabled. For other properties, if opinionated component themes are not used, FCS will use default M3 theme styles on NavigationBar when useMaterial3 is true. If opting in on opinionated component themes, FCS uses its own custom and opinionated default style. This can be modified to be the same as the default M3 style too. The change also includes a default font size change for FCS opinionated styled navigation bar, from 11dp to 12dp. This change was done to harmonize it with its M3 style.

  • Default colors of NavigationRail when opting in on useMaterial3 and not using opinionated component themes will now match M3 default colors. If opinionated component themes are not used, FCS will use default M3 theme styles on NavigationRail when useMaterial3 is true. If opting in on opinionated component themes, FCS uses its own custom and opinionated default style. That can be modified to be the same as the default M3 style too. The change also includes a default font size change for FCS opinionated styled rail, from 14dp to 12dp. This change was done to harmonize it with its M3 style.

  • Default color of toggles (Switch, Checkbox and Radio) are now using primary color as their default theme color, when opting in on opinionated component themes or setting ThemeData.useMaterial3 to true. The Switch, Checkbox and Radio themes then use a style that match the M3 color design intent. In it, switches and toggles are mostly primary color based. In M3 color design, the secondary color is a poor choice for switches and toggles, and it is therefore not used as their default color. It does not look nice with M3-based ColorSchemes, created e.g. using M3 color seeding. If you use a custom M3 color design, where secondary color is still prominent, you can, of course, still use it.

Version 5.0.0

FlexColorScheme Version 5 is a large upgrade from version 4, with deprecation of previous variant based color names in favor of container ones that were added to updated Material 3 based ColorScheme in Flutter 2.10.0. The same additions and changes are now also introduced in FlexColorScheme. Despite being a big release, with many new features, actual breaking changes are very few and mostly concerns in version 4 already deprecated members, and requiring minimum Flutter 2.10.0 to work.

Version 5 has many new advanced coloring features and fully supports Material 3 color schemes, including seeded key color generated color schemes. With more configuration options to generate the ColorScheme from key colors, compared to what is currently available in Flutter SDK. Version 5 also comes with many more convenient component sub-theming options compared to previous versions.

The open source companion app, the Themes Playground has been completely revised. It now has two view modes, the previous large masonry grid and also a convenient topic-based page view. In the new version, you can also see the generated theme setup code as you change your theming settings.

This is a breaking release, with many new Material 3 ColorScheme features. See change log for detailed change information.

The example apps have all been updated. New live web builds for v5 are available here:

Version 5 of the Themes Playground application demonstrates all the new features, including using Material 3 key color, seeded color schemes. The playground has its own usage guide chapter. The updated Copy Playground Theme template can be used to quickly test themes using copy-pasted setup code from the Playground.

The default example, the Hot Reload Playground has also been updated. Its comments contain extensive documentation that serves as a getting started guide as well.

For a guided tour of what is new, check out this Tweet and its thread, where Flutter Dash explains all the new features in a dashing slide series.

The slides in the tweet thread is using the Themes Playground app from the 5.0.0-dev.1 release. The final released version 5 of the app is a lot fancier, but all the FlexColorScheme V5 and also later V6 features and principles are the same as in the above thread. It is still a useful quick guide.

New V5 Themes

There are, of course, new built-in color schemes in version 5. Four new themes, are the de-facto standard for major new releases. The new color schemes are:

  • Flutter Dash, a blue Flutter Dash wallpaper based Material 3 theme.
  • M3 baseline, Material guide 3 baseline based theme.
  • Verdun green and mineral green with hemlock, based Material 3 theme.
  • Dell genoa green, a Material 3 theme with dell, axolotl and genoa greens.
 Flutter Dash    M3 Baseline    Verdun Green    Dell Genoa Green
Dash light   M3 baseline   Verdun green   Dell genoa
Dash light   M3 baseline   Verdun green   Dell genoa
New FlexColorScheme themes in version 5

Version 4.0.0

There are two major new features. The first one is that FlexColorScheme now comes with opinionated widget sub themes that you can opt in on. By default, these Flutter UI component widget sub-themes follow the Material 3 guide. This is done as far as reasonably possible while still using standard Material 2 theming features available in Flutter 2.8. There is a Material 3 TextTheme as well. By default, this text theme is also slightly color tinted using the color scheme's primary color. You can turn these styles on and off, based on your own preferences when you opt in on the sub themes.

The second main new feature is that FlexColorScheme now offers 9 different surface color blend modes, with 40 different blend levels each. Version 3 only had one "blend style" with 5 levels, including the no blend option. The version 3 blend style API is still available and works, but is deprecated since version 4.2.0. Despite the major version bump from 3 to 4, all APIs from version 3 are fully compatible with version 4. The version was mostly bumped because it contains so many new features that it made sense.

There are, of course, new built-in color schemes. Four of them seem to be the standard for major new releases. The new color schemes are:

  • Blue whale, with jungle green and outrageous tango orange.
  • San Juan, and pink salmon theme.
  • Rosewood, with horses neck and driftwood theme.
  • Blumine, easter blue and saffron mango theme.

The total number of offered built-in color schemes is now 36 matched light and dark pairs. By using the swap primary and secondary colors, you can double the number of variations with just a boolean toggle. Not all the color schemes are so attractive when you swap the colors, but some were designed to support it and look well with the colors reversed too. You can, for example, use this to present the dark mode with primary and secondary colors swapped compared to the light mode.

You can check out this Tweet and its thread for a visual presentation of FlexColorScheme's features.