What Is New?

This chapter features recent news and updates in FlexColorScheme. For a more complete 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.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 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 color defaults compared to M2 is to make it compliant with 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 use of 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, and 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 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 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 style 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 stable channel. The M3 alignment of FCS InputDecoration planned adjustments are:
      • Use same error container color idea for FCS default that M3 uses, could be OK for all 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 opinionated default style. Which can be modified to be the same as default M3 style too, just as before. 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 opinionated default style. Which can be modified to be the same as default M3 style too, just as before. 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 default themed 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 concern in version 4 already deprecated members, and of course requiring minimum Flutter 2.10.0 to work.

Version 5 has many new advanced coloring features and fully supports Material 3 based color schemes, including seed 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 based 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 Themes Playground.

The default example, the Hot Reload Playground has also been updated. Its comments contain extensive documentation that serve 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 release version 5 of the app is a lot fancier, but all the FlexColorScheme V5 features and principles are the same as in the above thread.

New V5 Themes

There are of course new built-in color schemes in version 5. Four of them is by now 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 - Verdun 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 style TextTheme as well, and 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 seems to be the standard for major new releases. The new color schemes are:

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

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 amount 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.