A Flutter package to make and use beautiful color scheme based themes.
OTHER License
Bot releases are hidden (Show)
Published by rydmike about 2 years ago
Aug 31, 2022
Due to a number of known and below documented Flutter SDK issues when using useMaterial3
set to
true
, we cannot yet recommend using the option in production. Use it only if you are willing to
accept the still incomplete Material 3 implementation in Flutter and the issues. If you
keep useMaterial3
set to false
, and use FCS opinionated component themes, you can create a
theme that is visually fairly similar to M3, but still using M2 ThemeData
mode to avoid many
issues.
BREAKING
This FlexColorScheme version 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. These named constructors then provide a cleaner starting API for defining additional configurations, by not forcing null
to be passed to use chroma value in key colors. To get the Material 3 configuration, use the factory FlexTones.material
instead of FlexTones.light
and FlexTones.light
. It as before produces the correct Material 3 configuration, by defining secondaryChroma: 16
and tertiaryChroma: 24
using FlexTones.light
and FlexTones.dark
to return the correct Material 3 matching FlexTones
configuration as before. This change was introduced to prepare for extracting FlexTones
and FlexSeedScheme
to their own package that will provide a fromFlexSeeds
extension on ColorScheme
. It is unlikely to impact any normal usage of FlexColorScheme, but it is still a breaking change.
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.
NEW
In FlexSeedScheme, added customization possibility of error
tonal palette to the default FlexTonalPalette
constructor.
In FlexSeedScheme, added two new FlexTones
:
FlexTones.ultraContrast
with even more contrast that highContrast
.FlexTones.jolly
for a seeded ColorScheme
with more poppy and jolly seed colors.In FlexSeedScheme, added SeedColorScheme.fromSeeds(...)
that can be used to create a seeded ColorScheme
using multiple seed colors and FlexTones
configuration.
In FlexSeedScheme, added FlexTonalPalette
a re-implementation of Material Color Utilities TonalPalette
, with addition of tonal palette tones 5 and 98. The tone 98 also exists in the Web Material Theme Builder app, but not in Flutter or Material Color Utilities package. Tone 5 is custom addition for FlexTones
and FlexColorScheme
.
Added appBarCenterTitle
property to FlexSubThemesData
configuration. It works the same way as centerTitle
in AppBar
and its theme. The property is not available in the Themes Playground app, only via the API. We recommend keeping it null to use platform
adaptive default behavior, but offer it as convenience property for those that like to use same centering style regardless of used platform.
Added two new properties to FlexSubThemes.elevatedButtonTheme
.
useMaterial3
, defaults to false.onBaseSchemeColor
, defaults to null SchemeColor?
.When useMaterial3
is false
, the elevatedButtonTheme.baseSchemeColor
is used as background color as before, and the new property elevatedButtonTheme.onBaseSchemeColor
is used as foreground color. However, when useMaterial3
is true
, their foreground and background color roles are reversed, and baseSchemeColor
becomes its foreground color and the onBaseSchemeColor
its background color.
Added elevatedButtonSecondarySchemeColor
property of type SchemeColor?
to FlexSubThemesData
. Use it to control secondary color of the ElevatedButton
in its sub-themes. FCS applies this color to FlexSubThemes.elevatedButtonTheme.onBaseSchemeColor
. If useMaterial3
is false, it is the foreground color. If useMaterial3
is true, it is the background color. Material 3 and 2 have a completely different default elevated button styles. The Material 2 elevated button is color wise, like the M3 filled button, but with elevation.
Added two new properties to FlexSubThemes.outlinedButtonTheme
.
useMaterial3
, defaults to false.outlineSchemeColor
, defaults to null SchemeColor?
.useMaterial3
is false
, the outlineSchemeColor
defaults to baseSchemeColor
.useMaterial3
is true
, the outlineSchemeColor
defaults to SchemeColor.outline
.REMOVED EARLIER DEPRECATED MEMBERS
As a chore and clean up all previously deprecated members have been removed from version 6.0.0. It no longer has any self deprecated members. This removes a lot legacy backwards compatibility with deprecated members from versions 2, 3 and 4, and even one from version 5.1.0. Removed all earlier self deprecated members as follows:
inputDecorationRadius
, bottomNavigationBarSchemeColor
, navigationBarIsStyled
, navigationBarTextSchemeColor
, navigationBarMutedUnselectedText
, navigationBarIconSchemeColor
, navigationBarHighlightSchemeColor
.primaryVariant
, secondaryVariant
, useSubThemes
. Removed static FlexColorScheme.m3TextTheme
deprecated in 5.1.0 and static FlexColorScheme.themedSystemNavigationBar
in version 2 its deprecated parameter nullContextBackground
.primaryVariant
, secondaryVariant
, useSubThemes
.primaryVariant
, secondaryVariant
.primaryVariant
, secondaryVariant
.kDarkenSecondaryVariant
, kDarkenSecondaryVariantFromSecondary
, kDarkenPrimaryVariant
.baseSchemeColor
.textSchemeColor
, unselectedTextSchemeColor
, mutedUnselectedText
, iconSchemeColor
, highlightSchemeColor
.STYLE CHANGE - BREAKING
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 roundings in M3 of the FAB.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. However, required as FlexColorScheme continues to evolve with Flutter SDK to support Material 3 theming, while offering its own opinionated tweaks on some M3 default styles as well.STYLE CHANGE - MINOR
The M3 color utilities package material_color_utilities from the Material team, that Flutter SDK depends on and FCS also uses, introduced a minor breaking change going from version 0.1.4 to 0.1.5. Some colors in the tonal palettes no longer give exactly the same color values as before. This changes the results for some colors when you create a ColorScheme.fromSeed
or FCS does it internally with its extended version SeedColorScheme.fromSeeds
. The new algorithm changes for example all the default M3 error colors slightly. The changes in the color values are minor, and not visually noticeable to the eye. Values are however slightly different, and this release uses the new value for FCS M3 error colors. Tests were also updated to use the new values. The change did break FCS color value tests, and should be per its own policy be considered a major breaking change. However, since the Material 3 design and material_color_utilities calls this change minor, then so does FCS.
The opt-in opinionated tinted text themes were made less aggressive on the tint, and received a bit of opacity for styles that in 2014/2018/2021 styles have opacity. The custom styles uses significantly less opacity since they already also get alpha blended tint color applied. Combining it with same level of opacity would make them too low contrast.
Style fix, the main text theme 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, to fit the custom tinted surfaces. The primary text theme, that fits on primary color, still 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
.
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.
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.
Changed opinionated dialog sub-theme defaults to match M3 defaults. Elevation set to 6, 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.
Updated Chip
sub-theme when opting in on useMaterial3
. When true
it now uses upcoming 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)
. This feature will only work with intended design in stable channel after feature and PR "Migrate Chips to Material 3" lands in stable channel. Currently, it is only available in Flutter master 3.1.0-x.
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 touch a lot of its own style in M3 mode, because TextField's real M3 design is not yet available in Flutter 3.3. TextField 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:
CHANGE
FlexSubThemes.buttonTheme
, as long as Flutter SDK has not deprecated it, neither will FCS.FlexColor
colors. They are not used actively by any built-in schemes. However, in line with past statement. The old M2 color names and values will not be removed. Feel free to use to them, if so desired.toggleableActiveColor
when PR Deprecate toggleableActiveColor #97972 lands, while retaining the previous FCS defaults for Switch
, CheckBox
and Radio
widgets, when not opting in on component sub-themes. The created SwitchThemeData
, CheckboxThemeData
and CheckboxThemeData
can no longer be null, when not opting in on sub-themes like before. To support the previous nicely theme coloredtoggleableActiveColor
in M2 and M3 theme modes, sub-themes for them that replicates the color styles must now be created also when not opting in on sub-themes. This update includes the necessary change to do so. This will be reflected in updates to the core defaults documentation. For a migration guide concerning toggleableActiveColor
see Flutter breaking-changes.toggleableActiveColor
FCS still defines its appropriate color value for ThemeData
.EXAMPLES
Themes Playground: New feature, the used code highlight colors were added as colors in a CodeTheme
class ThemeExtension
to ThemeData
. To demonstrate how one can use theme extensions directly with FlexColorScheme as well, in this case to add custom semantic colors for the code view's code keyword highlighter. Additionally, a fancy Material 3 feature was added, color harmonization of custom colors. The process is described in M3 guide under custom colors. The M3 library MaterialColorUtilities has the Blend
function needed to perform the color harmonization, as described here and the Dart color Blend
function is here.
Themes Playground: Updated the default AppBar style, it uses a dropdown menu that can also select 'null' choice and use default M2 and M3 theming as defaults via it. The AppBar panel now also displays an AppBar Widget of its own, so one does not have to look at the actual AppBar to see the style. It also has widgets below it used to demonstrate the opacity setting.
Themes Playground: Code gen and control enable/disable for onColor blends updated to lock controls with no impact when using seeded color scheme. Code is also not generated for onColor blend settings that has no impact when using seeded color schemes.
Themes Playground: Features and code gen for additional Elevated.button
individual foreground and background colors.
Themes Playground: Features and code gen for additional Outlined.button
separate outline color.
Themes Playground: To the component panel added support to customize outline border thickness for OutlinedButton
, ToggleButtons
and TextField
's InputDecorator
.
Themes Playground: Added features and UI for new Flutter SDK ColorScheme
colors outlineVariant
and scrim
.
DOCS
Removed duplicated section of 5.1.0 changelog entry with date July 5, 2022.
Harmonized the changelog style and its past history. The new style and how it looks will be tested with a dev release to ensure it works well on pub.
KNOWN FLUTTER SDK ISSUES IMPACTING THEMING
The issues below in the Flutter SDK itself, are known to impact FlexColorScheme and Flutter theming in general. The issues are typically caused by incomplete Material 3 implementation in Flutter.
The M3 Chip themes available in Flutter master 3.1.0-0.0.pre.2216
at the time of writing, do as noted here PR 107166 comment, not yet M3 theme plain vanilla Chip
when using Material 3. This might be fixed in an additional PR later in the SDK. This proposal tracks the potential implementation of this #109470.
#107946 Cannot theme Shape and IconSize differently for different sized FloatingActionButtons. One of the drivers behind the breaking FAB style defaults for the opinionated FAB theme in FCS, was this issue.
#108539 Cannot theme shape independently for SnackBar
with different behavior
. This is the reason why FCS does not yet offer a custom shape in its opinionated SnackBar
theme. To replicate the un-themed behavior with slightly different border radius values, one must make custom wrapper widgets for SnackBar
.
The Flutter SDK M3 useMaterial3
flag set to true
continues to have a number of challenges in addition to the above ones. We as before still have the issues below in Flutter stable 3.0.5 and also at least in Flutter master 3.1.0-0.0.pre.2216 and earlier:
#107190 Elevation issue with Material
widget, when opting in on useMaterial3
causes widespread elevation issues. Concerning the reported elevation issue for dialogs included in the linked report, it was observed as fixed for them in master, but later the PR fixing it was reverted. Then it was relanded and then the reland reverted, see Issue #107423, PR #108718, PR #109170 and PR 109172. Even after it lands it won't solve all the mentioned incompleteness caused M3 elevation issues, only Dialogs. Popup in particular will remain troublesome.
#103864 Dynamically changing Typography
in ThemeData
generates an error
#107305 Regression: AppBarTheme
properties iconTheme
and actionsIconTheme
ignored on master channel when useMaterial3
is true. This was not in stable Flutter channel stable 3.0.5. This issue was fixed via PR #108332 and could no longer be observed in master, 3.1.0-0.0.pre.2108 or later versions. The fix did however not make it into Flutter stable 3.3.0 and now exists there. The issue must be re-opened or a new one submitted.
This issue discussed in SliverAppBar.medium and large PR #103962, now exists in stable channel. There is no open issue for it yet.
Published by rydmike about 2 years ago
Aug 28, 2022
This dev release is for Flutter beta 3.3.0-0.5.pre, it will be released when next Flutter stable version after 3.0 comes out, presumably version 3.3.
If you experiment with this dev release and want to use the Theme Playground, then please use the version 6 beta build, here. The doc site does not yet contain any information about version 6, it will be added after its stable release.
Due to a number of known and below documented Flutter SDK issues when using useMaterial3
set to true
, we cannot yet recommend using the option in production. Use it only if you are willing to accept the still incomplete Material 3 implementation in Flutter and the issues. If you keep useMaterial3
set to false
, and use FCS opinionated component themes, you can create a theme that is visually fairly similar to M3, but still using M2 ThemeData
mode to avoid many issues.
BREAKING
This FlexColorScheme version 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. These named constructors then provide a cleaner starting API for defining additional configurations, by not forcing null
to be passed to use chroma value in key colors. To get the Material 3 configuration, use the factory FlexTones.material
instead of FlexTones.light
and FlexTones.light
. It as before produces the correct Material 3 configuration, by defining secondaryChroma: 16
and tertiaryChroma: 24
using FlexTones.light
and FlexTones.dark
to return the correct Material 3 matching FlexTones
configuration as before. This change was introduced to prepare for extracting FlexTones
and FlexSeedScheme
to their own package that will provide a fromFlexSeeds
extension on ColorScheme
. It is unlikely to impact any normal usage of FlexColorScheme, but it is still a breaking change.
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.
NEW
In FlexSeedScheme, added customization possibility of error
tonal palette to the default FlexTonalPalette
constructor.
In FlexSeedScheme, added two new FlexTones
:
FlexTones.ultraContrast
with even more contrast that highContrast
.FlexTones.jolly
for a seeded ColorScheme
with more poppy and jolly seed colors.In FlexSeedScheme, added SeedColorScheme.fromSeeds(...)
that can be used to create a seeded ColorScheme
using multiple seed colors and FlexTones
configuration.
In FlexSeedScheme, added FlexTonalPalette
a re-implementation of Material Color Utilities TonalPalette
, with addition of tonal palette tones 5 and 98. The tone 98 also exists in the Web Material Theme Builder app, but not in Flutter or Material Color Utilities package. Tone 5 is custom addition for FlexTones
and FlexColorScheme
.
Added appBarCenterTitle
property to FlexSubThemesData
configuration. It works the same way as centerTitle
in AppBar
and its theme. The property is not available in the Themes Playground app, only via the API. We recommend keeping it null to use platform
adaptive default behavior, but offer it as convenience property for those that like to use same centering style regardless of used platform.
Added two new properties to FlexSubThemes.elevatedButtonTheme
.
useMaterial3
, defaults to false.onBaseSchemeColor
, defaults to null SchemeColor?
.When useMaterial3
is false
, the elevatedButtonTheme.baseSchemeColor
is used as background color as before, and the new property elevatedButtonTheme.onBaseSchemeColor
is used as foreground color. However, when useMaterial3
is true
, their foreground and background color roles are reversed, and baseSchemeColor
becomes its foreground color and the onBaseSchemeColor
its background color.
Added elevatedButtonSecondarySchemeColor
property of type SchemeColor?
to FlexSubThemesData
. Use it to control secondary color of the ElevatedButton
in its sub-themes. FCS applies this color to FlexSubThemes.elevatedButtonTheme.onBaseSchemeColor
. If useMaterial3
is false, it is the foreground color. If useMaterial3
is true, it is the background color. Material 3 and 2 have a completely different default elevated button styles. The Material 2 elevated button is color wise, like the M3 filled button, but with elevation.
Added two new properties to FlexSubThemes.outlinedButtonTheme
.
useMaterial3
, defaults to false.outlineSchemeColor
, defaults to null SchemeColor?
.useMaterial3
is false
, the outlineSchemeColor
defaults to baseSchemeColor
.useMaterial3
is true
, the outlineSchemeColor
defaults to SchemeColor.outline
.REMOVED EARLIER DEPRECATED MEMBERS
As a chore and clean up all previously deprecated members have been removed from version 6.0.0. It no longer has any self deprecated members. This removes a lot legacy backwards compatibility with deprecated members from versions 2, 3 and 4, and even one from version 5.1.0. Removed all earlier self deprecated members as follows:
inputDecorationRadius
, bottomNavigationBarSchemeColor
, navigationBarIsStyled
, navigationBarTextSchemeColor
, navigationBarMutedUnselectedText
, navigationBarIconSchemeColor
, navigationBarHighlightSchemeColor
.primaryVariant
, secondaryVariant
, useSubThemes
. Removed static FlexColorScheme.m3TextTheme
deprecated in 5.1.0 and static FlexColorScheme.themedSystemNavigationBar
in version 2 its deprecated parameter nullContextBackground
.primaryVariant
, secondaryVariant
, useSubThemes
.primaryVariant
, secondaryVariant
.primaryVariant
, secondaryVariant
.kDarkenSecondaryVariant
, kDarkenSecondaryVariantFromSecondary
, kDarkenPrimaryVariant
.baseSchemeColor
.textSchemeColor
, unselectedTextSchemeColor
, mutedUnselectedText
, iconSchemeColor
, highlightSchemeColor
.STYLE CHANGE - BREAKING
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 roundings in M3 of the FAB.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. However, required as FlexColorScheme continues to evolve with Flutter SDK to support Material 3 theming, while offering its own opinionated tweaks on some M3 default styles as well.STYLE CHANGE - MINOR
The M3 color utilities package material_color_utilities from the Material team, that Flutter SDK depends on and FCS also uses, introduced a minor breaking change going from version 0.1.4 to 0.1.5. Some colors in the tonal palettes no longer give exactly the same color values as before. This changes the results for some colors when you create a ColorScheme.fromSeed
or FCS does it internally with its extended version SeedColorScheme.fromSeeds
. The new algorithm changes for example all the default M3 error colors slightly. The changes in the color values are minor, and not visually noticeable to the eye. Values are however slightly different, and this release uses the new value for FCS M3 error colors. Tests were also updated to use the new values. The change did break FCS color value tests, and should be per its own policy be considered a major breaking change. However, since the Material 3 design and material_color_utilities calls this change minor, then so does FCS.
The opt-in opinionated tinted text themes were made less aggressive on the tint, and received a bit of opacity for styles that in 2014/2018/2021 styles have opacity. The custom styles uses significantly less opacity since they already also get alpha blended tint color applied. Combining it with same level of opacity would make them too low contrast.
Style fix, the main text theme 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, to fit the custom tinted surfaces. The primary text theme, that fits on primary color, still 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
.
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.
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.
Changed opinionated dialog sub-theme defaults to match M3 defaults. Elevation set to 6, 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.
Updated Chip
sub-theme when opting in on useMaterial3
. When true
it now uses upcoming 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)
. This feature will only work with intended design in stable channel after feature and PR "Migrate Chips to Material 3" lands in stable channel. Currently, it is only available in Flutter master 3.1.0-x.
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 touch a lot of its own style in M3 mode, because TextField's real M3 design is not yet available in Flutter 3.3. TextField 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:
CHANGE
FlexSubThemes.buttonTheme
, as long as Flutter SDK has not deprecated it, neither will FCS.FlexColor
colors. They are not used actively by any built-in schemes. However, in line with past statement. The old M2 color names and values will not be removed. Feel free to use to them, if so desired.toggleableActiveColor
when PR Deprecate toggleableActiveColor #97972 lands, while retaining the previous FCS defaults for Switch
, CheckBox
and Radio
widgets, when not opting in on component sub-themes. The created SwitchThemeData
, CheckboxThemeData
and CheckboxThemeData
can no longer be null, when not opting in on sub-themes like before. To support the previous nicely theme coloredtoggleableActiveColor
in M2 and M3 theme modes, sub-themes for them that replicates the color styles must now be created also when not opting in on sub-themes. This update includes the necessary change to do so. This will be reflected in updates to the core defaults documentation. For a migration guide concerning toggleableActiveColor
see Flutter breaking-changes.toggleableActiveColor
FCS still defines its appropriate color value for ThemeData
.EXAMPLES
Themes Playground: New feature, the used code highlight colors were added as colors in a CodeTheme
class ThemeExtension
to ThemeData
. To demonstrate how one can use theme extensions directly with FlexColorScheme as well, in this case to add custom semantic colors for the code view's code keyword highlighter. Additionally, a fancy Material 3 feature was added, color harmonization of custom colors. The process is described in M3 guide under custom colors. The M3 library MaterialColorUtilities has the Blend
function needed to perform the color harmonization, as described here and the Dart color Blend
function is here.
Themes Playground: Updated the default AppBar style, it uses a dropdown menu that can also select 'null' choice and use default M2 and M3 theming as defaults via it. The AppBar panel now also displays an AppBar Widget of its own, so one does not have to look at the actual AppBar to see the style. It also has widgets below it used to demonstrate the opacity setting.
Themes Playground: Code gen and control enable/disable for onColor blends updated to lock controls with no impact when using seeded color scheme. Code is also not generated for onColor blend settings that has no impact when using seeded color schemes.
Themes Playground: Features and code gen for additional Elevated.button
individual foreground and background colors.
Themes Playground: Features and code gen for additional Outlined.button
separate outline color.
Themes Playground: To the component panel added support to customize outline border thickness for OutlinedButton
, ToggleButtons
and TextField
's InputDecorator
.
Themes Playground: Added features and UI for new Flutter SDK ColorScheme
colors outlineVariant
and scrim
.
DOCS
Removed duplicated section of 5.1.0 changelog entry with date July 5, 2022.
Harmonized the changelog style and its past history. The new style and how it looks will be tested with a dev release to ensure it works well on pub.
KNOWN FLUTTER SDK ISSUES IMPACTING THEMING
The issues below in the Flutter SDK itself, are known to impact FlexColorScheme and Flutter theming in general. The issues are typically caused by incomplete Material 3 implementation in Flutter.
The M3 Chip themes available in Flutter master 3.1.0-0.0.pre.2216
at the time of writing, do as noted here PR 107166 comment, not yet M3 theme plain vanilla Chip
when using Material 3. This might be fixed in an additional PR later in the SDK. This proposal tracks the potential implementation of this #109470.
#107946 Cannot theme Shape and IconSize differently for different sized FloatingActionButtons. One of the drivers behind the breaking FAB style defaults for the opinionated FAB theme in FCS, was this issue.
#108539 Cannot theme shape independently for SnackBar
with different behavior
. This is the reason why FCS does not yet offer a custom shape in its opinionated SnackBar
theme. To replicate the un-themed behavior with slightly different border radius values, one must make custom wrapper widgets for SnackBar
.
The Flutter SDK M3 useMaterial3
flag set to true
continues to have a number of challenges in addition to the above ones. We as before still have the issues below in Flutter stable 3.0.5 and also at least in Flutter master 3.1.0-0.0.pre.2216 and earlier:
#107190 Elevation issue with Material
widget, when opting in on useMaterial3
causes widespread elevation issues. Concerning the reported elevation issue for dialogs included in the linked report, it was observed as fixed for them in master, but later the PR fixing it was reverted. Then it was relanded and then the reland reverted, see Issue #107423, PR #108718, PR #109170 and PR 109172. Even after it lands it won't solve all the mentioned incompleteness caused M3 elevation issues, only Dialogs. Popup in particular will remain troublesome.
#103864 Dynamically changing Typography
in ThemeData
generates an error
FIXED #107305 Regression: AppBarTheme
properties iconTheme
and actionsIconTheme
ignored on master channel when useMaterial3
is true. This is not in stable Flutter channel stable 3.0.5, but if you used master channel it was something to be aware of, as it exists in Flutter master 3.1.0-0.0.pre.2033 and many earlier master 3.1.0-x versions. This issue was fixed via PR #108332 and can no longer be observed in master, 3.1.0-0.0.pre.2108 or later versions.
Published by rydmike over 2 years ago
NEW
Added full 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.
DEPRECATED
Deprecated: FlexColorScheme.m3TextTheme
. The custom M3 text theme is no longer needed after Flutter 3.0.0 release that includes the new M3 Typography in addition to its earlier released TextTheme
. You can opt in on using the new M3 style TextTheme as before by setting FlexColorScheme.subThemesData.useTextTheme
to true or by setting FlexColorScheme.useMaterial3
to true. Using either does however come with known issue #103864, where dynamically switching Typography, e.g. from 2014 or 2018, to M3 2021 Typography, triggers the mentioned assert in issue
#103864. This issue has always existed in Flutter SDK ThemeData when dynamically changing between different Typography. Before FlexColorScheme avoided triggering this issue by only using Typography 2018, also when
opting in on M3 TextTheme, that before used 2018 based Typography to make a custom M3 like TextTheme
. Avoiding this issue is no longer possible when opting in on M3, that now correctly uses its own and different Typography from M2. This exposes this issue if you dynamically change ThemeData from one to another Typography. To avoid this Flutter SDK issue, use the same Typography for all your themes in your app and don't dynamically switch theme between ThemeData objects that uses different Typography in your application. The use cases for doing this are few, but it is still a Flutter SDK limitation to be aware about.
Deprecated: FlexSubThemes.buttonTheme
that creates an opinionated ButtonThemeData
. The ButtonThemeData is marked as obsolete in Flutter SDK, but not yet deprecated in Flutter version 3.0.0. FlexColorscheme now marks it as deprecated. It will be removed in a future FlexColorScheme release when Flutter SDK deprecates ButtonThemeData
.
M3 STYLE FIXES AND CHANGES
FAB M3 defaults change: Floating Action Button background color, will when opting in on ThemeData.useMaterail3
, use color theme.colorScheme.primaryContainer
, otherwise theme.colorScheme.secondary
is used.
Input Decorator default change: The TextField
and its InputDecorator
border radius default value was changed from 20dp 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.
NavigationBar M3 defaults change: 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.
NavigationRail M3 defaults change: 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.
Toggleable M3 style change: 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.useMaterail3
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.
Fixed lint: "Avoid using private types in public APIs". See tweet discussion about why and when you might run into this lint being triggered by older Stateful Widgets. The lint warning was addressed in the package and examples.
EXAMPLE UPDATES
Added a Theme Extensions example to the default example app, i.e. the "Hot Reload Playground".
Themes Playground: Updated the default style info labels for Switch, CheckBox and Radio.
Themes Playground: To the top row theme selector, where the FlexColorScheme and component themes switches are, added the "Use Material 3" toggle. Previously this toggle was only available on the introduction panel. The availability in the header makes it easy to toggle it ON and OFF at any time, to see what impact it has on widgets.
Themes Playground: Updated the default style info labels for the NavigationBar. The logic to display default color labels in different config modes (M2/M3/FCS/FCS+M2/FCS+M3) is quite involved, please report any issues.
Themes Playground: Updated the default style info labels for the NavigationRail. The logic to display default color labels in different config modes (M2/M3/FCS/FCS+M2/FCS+M3) is quite involved, please report any issues.
Themes Playground: Due to issue #107190, the Playground previous default to use Material 3 was changed to false.
Added support in Themes Playground to customize the surfaceTint
color. It controls both the elevation color used for elevated Material
surfaces in M3. Plus for FlexColorScheme it is also used as the surface blend color. By default, the surfaceTint
color equals ColorScheme.primary
color. Generally there are not many good design reasons to change the color, but it is now possible to do so. A good graphical designer can use it to create subtle difference from the standard surface elevation color branding effects. Used poorly, it mostly creates not so appealing visual and coloring results.
KNOWN FLUTTER SDK ISSUES
The issues below in the Flutter SDK itself, are known to impact FlexColorScheme and Flutter theming in general.
Switching Typography dynamically in Flutter SDK ThemeData is broken, see issue #103864 for more information. If it is done and the error ignored, an app doing so eventually become unstable.
The Themes Playground app contains a workaround to avoid issue #103864. The workaround is done by always using 2021 Typography, but simulating 2018 Typography. This is done by using a custom TextTheme that looks like 2018 Typography is used when using M2 theme mode. The Playground App actually always stays in 2021 Typography, but looks
like it switches it. Which it does by applying a custom TextTheme
in 2021 Typography, that looks like 2018 Typography is used. All other examples also avoid the issue by only using the M3 2021 Typography and not even mimicking a switch between M2 and M3 Typography. The above workaround is needed because the Playground app has toggles that switches Typography frequently, without the workaround it will eventually crash. With this workaround it never switches Typography, it just looks like it does, but app stays in 2021 Typography all the time. The by Themes Playground generated ThemeData config will use the actual real effective Typography. This is also fine, since an app using the theme will likely never switch used Typography. However, if it does, it will face the same issue the Playground app did. The issue is a Flutter SDK issue that FlexColorScheme cannot fix. Most likely 99% of apps will never run into this issue.
In Flutter SDK 3.0.x, when opting in on useMaterial3:true
, the Material
widget and other SDK widgets built on it, gets no elevation when only the elevation
property is defined. It is required to also define shadowColor
and/or surfaceTintColor
to get any elevation effect. When using the Material
widget itself this is easy to address. However, widgets like Drawer
, PopupMenuButton
, BottomNavigationBar
, NavigationRail
, Dialog
, AlertDialog
, TimePickerDialog
, DatePickerDialog
, MaterialBanner
and BottomSheet
do not expose these Material
properties and cannot be elevated.
The issue is reported and tracked here #107190 and also mentioned in the FlexColorScheme
repo here #54. There are no good workarounds for using elevation on these widgets when useMaterial3
is true. The options are to not use M3, if such elevations are important to your app design. One working fix is to wrap those widgets in a theme where useMaterial3
is false, then te rest of your app can still use it. This is however a rather tedious workaround fix. Due to current SDK Material
elevation issues when useMaterial3
is true, it is recommended to not use it yet.
This regression in master channel impacts AppBar icon colors when using Material 3 #107305. It has not yet landed in stable channel Flutter 3.0.4, but if you use master channel it is something to be aware of.
Published by rydmike over 2 years ago
FIX
Published by rydmike over 2 years ago
The full journey from version 4.2.0 to stable 5.0.0 includes the steps in change logs for development versions 5.0.0-dev.3, -dev.2 and -dev.1.
Please refer to them for all details. This changelog contains a summary of breaking and other critical changes from version 4.2.0.
FlexColorScheme version 5 is style wise a big breaking change since all the built-in produced ColorScheme
s the themes use have been revised to follow the new Flutter 2.10.0 Material 3 based ColorScheme
. The color changes to the built-in schemes have been kept minimal compared to previous styles.
Mostly new color values were added to provide support for all the new colors in the Flutter Material 3 ColorScheme
update, that landed in Flutter 2.10.0. The new colors are style aligned with past styles as far possible, while also keeping them inline with the Material 3 ColorScheme design intent.
As ColorScheme.primaryVariant
and secondaryVariant
have been deprecated in Flutter 2.10 SDK, so have they in FlexColorScheme. All past color constants for all color values and helper classes with the name "variant" in them, have been self deprecated in FlexColorScheme. The variant color values still exists, if you have used any of them directly, they still work. The old built-in variant color values will remain available at least until version 6.0, maybe even 7.0 if so requested by users.
Breaking
Requires at least Flutter 2.10.0.
ColorScheme
do not exist in any stable version of Flutter before version 2.10.surfaceStyle
removed.
surfaceStyle
, including all its implementing classes, enums, helpers and tests have been removed.surfaceStyle
in FlexColorScheme.light
and FlexSchemeData.light
.surfaceStyle
in FlexColorScheme.dark
and FlexSchemeData.dark
.FlexSurface
, that only surfaceStyle
was using.FlexSchemeSurfaceColors.from
that was used to create surface using the surfaceStyle
. The factory FlexSchemeSurfaceColors.blend
replaced it in version 4.0.0 already, when using surfaceMode
and blendLevel
.surfaceMode
and blendLevel
instead, it has more blend styles and finer granularity than the removed surfaceStyle
.theme: FlexThemeData.light(
scheme: FlexScheme.flutterDash,
surfaceMode: FlexSurfaceMode.highScaffoldLowSurface,
blendLevel: 20,
),
FlexSubThemesData.navigationBarIsStyled
removed.
navigationBarIsStyled
in FlexSubThemesData
has been removed. If you have used it, it has a broader more general replacement called FlexSubThemesData.useFlutterDefaults
.useFlutterDefaults
instead, or set styles manually using individual properties to desired styles matching Flutter defaults un-themed component designs.FlexColorScheme.useSubThemes
no function
useSubThemes
. This property has no function after 4.2.0 stable and 5.0.0-dev.1. Previously setting this property to true activated the default set and configuration of the optional opinionated component sub-themes, even if you did not pass any FlexSubThemesData()
configuration data to subThemesData
. Before when useSubThemes
was true and no subThemesData
defined, it created one internally using the default constructor FlexSubThemesData()
and used it. It also ignored any defined and to subThemesData
assigned one, if the flag was set to false.FlexSubThemesData()
to FlexColorScheme.subThemesData
.keyColors
with FlexKeyColors
and tones
with FlexTones
.FlexColorScheme.useSubThemes
to true and not specified any subThemesData
properties, you must now add the default constructor. Likewise, if you had set FlexColorScheme.useSubThemes
to false, and had a FlexColorScheme.subThemesData
defined, you must remove it disable using it. If you need to toggle it ON and OFF, use a bool to enabled/disable it, then pass in the FlexSubThemesData
when enabled, and null when not using it.Breaking and deprecated due to Flutter SDK change in 2.10.0 stable release.
primaryVariant
and secondaryVariant
primaryVariant
and secondaryVariant
in FlexColorScheme are deprecated and can no longer be used to set colors values that result in any color values in Flutter SDK deprecated same named ColorScheme
color properties.ColorScheme
deprecated properties primaryVariant
and secondaryVariant
will always get their Flutter SDK default values,primaryVariant
equal to primary
and secondaryVariant
equal to secondary
.primaryContainer
, secondaryContainer
, tertiary
or tertiaryContainer
color, as replacement colors in your custom widgets. The right choice depends on your color design.FlexColorScheme
setup made for a version before version 5.0, with version 5.0, and, if you have used custom color schemes where you defined theFlexColorScheme
properties primaryVariant
and secondaryVariant
or defined and used them via custom FlexSchemeColors
, in the colors
property in FlexColorScheme
. Then, in those cases the variant color properties will function as fallback input for color properties primaryContainer
and secondaryContainer
respectively, unless own color values for these properties are provided.FlexColorScheme
instead. Then migrate away from using Flutter SDK ColorScheme
colors primaryVariant
and secondaryVariant
anywhere in your application. Instead, use any of its new ColorScheme
color properties as fitting with your design. This is something you have to do after Flutter 2.10, even if you are not using FlexColorScheme. Sure, not immediately, but eventually when the Flutter SDK ColorScheme
colors primaryVariant
and secondaryVariant
are removed after a year or so.Change and breaking past style.
The custom "internal" and temporary m3TextTheme
was changed. It is style breaking with 4.2.0 and 5.0.0-dev.1 & 2. It breaks past used style when opting in on component themes and its optional custom m3TextTheme
enabled. The updated custom implementation of it now follows the implementation used in Flutter master channel, apart from this issue, where it for now implements the value used in the M3 Web guide. The changes in styles otherwise concern the addition of the font geometry height, which the previous custom implementation did not have. The usage of the custom m3TextTheme
should be considered internal and temporary. It will be changed to use the actual Flutter implementation once PR #97829 lands in Flutter stable channel. The custom m3TextTheme
will then be deprecated.
The computed colors for ThemeData
colors primaryColorLight
, primaryColorDark
and secondaryHeaderColor
were changed.
It is style breaking with 4.2.0 and 5.0.0-dev.1 & 2. The change breaks past used styles on these rarely used colors. These ThemeData
colors are also on a deprecation path and will likely receive some new none MaterialColor
dependent color defaults when that change happens. The new ColorScheme.primary
computed colors for these rarely used colors are better balanced than before, and work well regardless of used ColorScheme.primary
shade and tint.
The color definition value for FlexColor.espressoLightPrimary
color was changed. This is style breaking with 4.2.0 and 5.0.0-dev.1 & 2. The new color for FlexColor.espressoLightPrimary
breaks past used color for this color constant. The color was changed from 0xFF220804
to 0xFF452F2B
. Past color was too dark brown, almost black to be very usable in a UI. It was very black coffee like, but not very practical in a UI, it was too close to black. Since version 5 is anyway a major style breaking with the introduction of the new Material 3 ColorScheme, the opportunity to improve this color value used in the built-in theme espresso
theme was used.
Beware
SchemeColor
values and order, potentially breaking. The enum SchemeColor
has new values and past values are in a new order. The order was changed to accommodate all the new color values, and to keep them in the same order as their corresponding color properties in Flutter Material 3 ColorScheme
color values. The change of order is potentially breaking, but highly unlikely to break anything in major ways in normal usage.Published by rydmike over 2 years ago
Test release to verify builds and minor changes before stable release.
The package documentation has now moved too its own site at docs.flexcolorscheme.com.
It is a major update and rewrite of previous documentation. It also contains general Flutter theming guidance. One chapter is still work in progress. When it is completed, the stable v5.0.0 will be released.
m3TextTheme
revised.m3TextTheme
enabled. The updated custom implementation of it now follows the implementation used in Flutter master channel, apart from this issue, where it for now implements the value used in the M3 Web guide.m3TextTheme
should be considered internal and temporary, it will be changed to use the actual Flutter implementation once PR #97829 lands in Flutter stable channel. The custom m3TextTheme
will then be deprecated.ThemeData
colors primaryColorLight
, primaryColorDark
and secondaryHeaderColor
were changed.Style breaking with 4.2.0 and 5.0.0-dev.1 & 2, breaks past used styles on the rarely used colors primaryColorLight
, primaryColorDark
and secondaryHeaderColor
.
These ThemeData
colors are on a deprecation path and will likely receive some new none MaterialColor
dependent color defaults when that change happens. The new ColorScheme.primary
computed colors for these rarely used colors are better balanced than before, and work well regardless of used ColorScheme.primary
shade and tint.
FlexColor.espressoLightPrimary
color was changed.Style breaking with 4.2.0 and 5.0.0-dev.1 & 2: New color for FlexColor.espressoLightPrimary
breaks past used color for this color constant.
The color was changed from 0xFF220804
to 0xFF452F2B
. Past color was too dark brown, almost black to be very usable in a UI. It was very black coffee like, but not very practical in a UI, it was too close to black. Since version 5 is anyway a major style breaking with the introduction of the new Material 3 ColorScheme, the opportunity to improve this color value used in the built-in theme espresso
theme was used.
Published by rydmike over 2 years ago
BREAKING
Completed in version 4.0.0 planned, for version 5.0.0, removal of
deprecated property surfaceStyle
, including all its implementing classes,
enums and helpers:
surfaceStyle
in FlexColorScheme.light
.surfaceStyle
in FlexColorScheme.dark
.FlexSurface
, that surfaceStyle
where.FlexSchemeSurfaceColors.from
that was used to createFlexSurface
. The factory FlexSchemeSurfaceColors.blend
surfaceMode
and blendLevel
.Deprecated property useSubThemes
. This property has no function after
4.2.0 stable and 5.0.0-dev.1. FlexColorScheme opinionated component sub-themes
are now created by adding a default constructor FlexSubThemesData()
or one with
some custom property values set, to subThemesData
. This creates sub-themes
using the FlexColorScheme opinionated sub-themes. Removing this property makes the
API more consistent. It now follows the same design that is used for keyColors
with FlexKeyColors
and tones
with FlexTones
.
Setting the property useSubThemes
will not cause an error, it just has no effect.
You can safely remove it. The property useSubThemes
will be removed in release 6.0.0.
The property navigationBarIsStyled
in FlexSubThemesData
was removed in
v5.0.0-dev.1 as no longer needed. It is now kind of back with a new broader
replacement called FlexSubThemesData.useFlutterDefaults
.
The in dev.1 version tested API-style to
set various SchemeColor
properties to null, to get SDK default for them was not
nice. The FlexSubThemesData
should default to its own preferred
and recommended harmonized defaults when not defined. It is better to offer a
toggle that can be set, to when possible/offer an opt-out from some bigger style
differences from SDK defaults. This can be useful if one wants to create
custom component themes and wish to start from less opinionated ones.
The new useFlutterDefaults
is false by default, and the sub-themes undefined
null values result in its own harmonized and recommended settings. By setting
it to true
a bit messier and un-harmonized Flutter default are back. Currently,
this impacts different styles and colors on BottomNavigationBar
, NavigationBar
,
and NavigationRail
. See API docs for details regarding
defaults with this flag on and off.
The FlexSubThemesData
property popupMenuRadius
and the radius in
corresponding static sub-theme helper FlexSubThemes.popupMenuTheme
,
now defaults to 4.
In versions before v5.0.0-dev.2 it defaulted to 10. The M3 spec for it
was not available when it was chosen originally. It was assumed to have
higher border radius like rest of designs. However, the spec has it
defined here now, and it
is 4. Since border radius default values are stated in FlexColorScheme
sub-theme design goals to follow the M3 design specs, it was updated to
match the spec. A bit higher rounding, may actually fit better with
the very round M3 design, try 8 or 10. It is very simple to change bach with
the API.
FIX
Pub.dev analysis does not like document references to deprecated Flutter
properties. Changed the primaryVariant and secondaryVariant references
in document comments to primaryVariant
and secondaryVariant
. Nor does it
like when you use tests to deprecated Flutter SDK members, removed them too,
they were not needed either after some redesign of a few tests.
Fixed. When using sub-themes and selecting a ColorScheme
based color, as
color for the AppBar
, instead of using abbBarStyle
in light and dark
factories, the appBarOpacity
was not applied to the selected color. The
priority of effective AppBar
color was also revised to follow the norm,
which from lowest to highest is:
abbBarStyle
in light/dark factories and ThemeData extensions, whichscheme
or colors
, in the sameappBarBackgroundSchemeColor
in FlexSubThemesData
when used.appBarBackground
in FlexColorScheme.CHANGE
Changed the priority in FlexColorScheme when using direct input color
properties, colorScheme
input and using key color seeded ColorScheme
generation. The new order is that input colorScheme
is in this rare use case
always overridden by the seed generate ColorScheme
. This allows us
to use a colorScheme
as input to seed generation, where this color
scheme could already have been externally seeded generated, but that we want
to modify by using custom FlexTones or surface blends in FleColorScheme.
The direct properties overrides the seeded color scheme as before, unless it
is primary
, secondary
, tertiary
or their container colors. In that case
the keyColors
, "keep" property determines if those colors are kept or not.
The FlexSubThemesData
property inputDecorationRadius
was deprecated and
renamed to inputDecoratorRadius
, to harmonize the other
InputDecoration
property names in FlexSubThemesData
.
The old name will be removed in release 6.0.0.
Deprecated and renamed navigationBarHighlightSchemeColor
to
navigationBarIndicatorSchemeColor
in FlexSubThemesData
, to
harmonize the naming standard. Likewise, the parameter highlightSchemeColor
ìn FlexSubThemes.navigationBarTheme
was deprecated and replaced by
indicatorSchemeColor
. The old names will be removed in release 6.0.0.
In 5.0.0-dev.1, the renamed properties were deprecated and broken with 4.2.0.
They are still deprecated, but now fallback via the old properties. They
are no longer breaking. This concerns FlexSubThemesData
properties:
bottomNavigationBarSchemeColor
-> bottomNavigationBarSelectedLabelSchemeColor
navigationBarTextSchemeColor
-> navigationBarSelectedLabelSchemeColor
navigationBarMutedUnselectedText
-> navigationBarMutedUnselectedLabel
navigationBarIconSchemeColor
-> navigationBarSelectedIconSchemeColor
And FlexSubThemes.navigationBarTheme
properties:
textSchemeColor
-> selectedLabelSchemeColor
unselectedTextSchemeColor
-> unselectedLabelSchemeColor
iconSchemeColor
-> selectedIconSchemeColor
mutedUnselectedText
-> mutedUnselectedLabel
And FlexSubThemes.bottomNavigationBarTheme
properties:
baseSchemeColor
-> selectedLabelSchemeColor
The old property names will be removed in release 6.0.0.
NEW
Added SchemeColor
based theming of SnackBar
background color via
snackBarBackgroundSchemeColor
in FlexSubThemesData
and support for it
in FlexSubThemes
.
Changed the color values for FlexColor.materialLightSecondaryContainer
and
FlexColor.materialLightSecondaryContainerHc
. These color properties
do not have any specification in Material 2 spec. Updated the colors values
that had been made up for dev.1 release to better match the design intent
of those colors for the new Material 3 ColorScheme
.
Added inputDecoratorUnfocusedBorderIsColored
to FlexSubThemesData
and
support for it in FlexSubThemes
via unfocusedBorderIsColored
. Previously
an unfocused or hovered border/underline always had a hint of selected
base color. Setting this to false, leaves it at the grey defaults used by
Flutter defaults.
Added navigationBarIndicatorOpacity
and navigationRailIndicatorOpacity
to FlexSubThemesData
, to expose their already existing properties in
corresponding sub-themes used by FlexColorScheme
.
DEMO APPS
TESTS
Published by rydmike over 2 years ago
Version 5 is a big refactor with deprecation of previous variant
based
color names in favor of container
ones that were added to updated M3
based ColorScheme
in Flutter 2.10.0. The same additions and changes are now
also introduced in FlexColorScheme. Despite being a very big release, with
many new features, actual breaking changes are very few and mostly concerns
in version 4 deprecated members and of course requiring minimum Flutter
2.10.0 to work.
The WIP updates now includes the version of the key color seeded M3 ColorScheme
usage intended for the final design. The feature supports seeding by not only
using a single primary
key color, but also using separate key colors for
secondary
and tertiary
colors. The Flutter SDK ColorScheme.fromSeed
only
support using a single color as seed. The primary
, secondary
and tertiary
color are used as key color seeds, when seeding is used, and by default all
three color are used as key for their respective tonal palette used by
the generated ColorScheme
. Using secondary
and teritary
colors can each
optionally be turned OFF. If both are, the result is same as when using
ColorScheme.fromSeed
, with the primary
color as seed key color.
When using a key seed color generated ColorScheme
, it may sometimes, e.g. for
branding purposes, be useful to lock a certain color in the resulting
ColorScheme
to the actual key color value used for primary
, secondary
and tertiary
. FlexColorScheme
includes scheme appropriate colors for
each of these color properties, as well
their containers. You can for each property define which ones you want to keep
as defined by these input colors, in the seed generated ColorScheme
. You
can of course use this feature with custom input colors as well.
The bundled example 5, the Themes Playground is now fully up to date with all
the new features. Its updated code generation still
needs results verification.
There are also now in Flutter master channel more actual
M3 impacts and ThemeData color property deprecations commits landed in Flutter
master channel that I reviewed and prepared for in advance when possible.
Much work on tests, and readme documentation updates remain, but API docs are
up-to-date. And this book long change log should help. There are only a few
breaking changes, and most of them are rarely used properties, so migration
should be relatively easy, despite the long list of changes and new features.
BREAKING
Requires at least Flutter stable 2.10.0.This release uses new M3 ColorScheme
properties that are not included before Flutter version 2.10.0, as well
as the ThemeData
flag useMaterial3
.
Removed parameter surfaceStyle
from FlexThemeData
extensions FlexThemeData.light
and FlexThemeData.dark
that uses
in version 4.2.0 already deprecated property surfaceStyle
in FlexColorScheme
class. The same deprecated property surfaceStyle
in FlexColorScheme
class
is still available in 5.0.0-dev.1. In the stable release 5.0.0 it might
be removed as well. They were all scheduled for deprecation in version 5.0.0,
but keeping it around a bit longer in the main class in 5.0.0-dev releases
to prolong backwards API compatibility during development. Maybe I will keep
it in the release too, many tests need to be rewritten when they are removed.
The enum SchemeColor
has new values and past values are in a
new order. The order was changed to accommodate new color values and to
keep them in the same order as their corresponding color properties
in M3 ColorScheme
. The change of order is potentially breaking, but unlikely
to break anything in major ways, other than possibly local storage of selected
enum values. In the bundled samples you might for example see wrong color
selections loaded from local storage, just reset or select correct value
to fix it.
To get more harmonized setup on opt-in sub themes for NavigationBar
,
BottomNavigationBar
and NaivgationRail
a few properties in
FlexSubThemesData
and FlexSubThemes
had to be modified and broken.
Impact is estimated to be low for most users.
The following properties were renamed in FlexSubThemesData
:
navigationBarTextSchemeColor
-> navigationBarSelectedLabelSchemeColor
navigationBarMutedUnselectedText
-> navigationBarMutedUnselectedLabel
navigationBarIconSchemeColor
-> navigationBarSelectedIconSchemeColor
bottomNavigationBarSchemeColor
-> bottomNavigationBarSelectedLabelSchemeColor
In FlexThemeData
the property navigationBarIsStyled
was removed. It is
no longer needed. The same end result it enabled can be achieved by
by setting all NavigationBar related properties in FlexSubThemesData
that
have a none null default value to null.
The following parameters were renamed in FlexSubThemes.navigationBarTheme
:
textSchemeColor
-> selectedLabelSchemeColor
unselectedTextSchemeColor
-> unselectedLabelSchemeColor
iconSchemeColor
-> selectedIconSchemeColor
mutedUnselectedText
-> mutedUnselectedLabel
The following parameter wa renamed in FlexSubThemes.bottomNavigationBarTheme
:
baseSchemeColor
-> selectedLabelSchemeColor
NEW
Added useMaterial3
to all theme constructors and factories. This is
the same flag as in ThemeData
, it does not have any major impact on
default themed widgets in Flutter 2.10.x. Opting in on opinionated
sub-themes, will however as before give opinionated component sub-themes that
result in Material 3 like styles. Similar look will become default widget
design in later Flutter SDK versions when using the flag useMaterial3
is
set to true.
Added new properties onPrimaryContainer
, onSecondaryContainer
,
tertiary
, tertiaryContainer
, onTertiary
and onTertiaryContainer
to
the un-namedFlexColorScheme
constructor and factories
FlexColorScheme.light
and FlexColorScheme.dark
, as well as to extension
FlexThemeData
to extensions FlexThemeData.light
and FlexThemeData.dark
on ThemeData
.
In FlexColor
added new color properties for all color values to cover the
new "Container
" color properties in Flutter 2.10 new M3 ColorScheme
.
For every built-in FlexColor
, there are now also these new color properties:
primaryContainer
secondaryContainer
tertiary
tertiaryContainer
The previous color values maps as follows:
tertiary
= old secondaryVariant
color value, that is deprecatedprimaryVariant
, is just deprecated for each color value.The "variant" colors are still available as deprecated properties, and will
remain available until version 6.0.0. The old color properties and their values
still work as inputs, and they produce same equivalent ColorScheme
results
as before. This is done by the values still being assigned as fallback value
in custom schemes so that new:
primaryContainer
, if not assigned, falls back via old primaryVariant
.secondaryContainer
, if not assigned, falls back via old secondaryVariant
.When it comes to the new built-in scheme designs, the color used on past:
secondaryVariant
was a reasonable fit for new M3 tertiary
color propertysecondaryContainer
andtertiaryContainer
, had to get new built-in color values that fit withsecondary
already had, and the value tertiary
got by beingsecondaryVariant
.primaryContainer
also needed a new color value. TheprimaryVariant
is not the correct design fit for how the colorContainer
color propertiesContainer
color values may still be fine-tunedIn class FlexSchemeColor
added new color properties
primaryContainer
and secondaryContainer
they replace
deprecated properties primaryVariant
and secondaryVariant
. The old
properties still work and are
used as fallback to the new ones when the new ones are not provided.
The previous properties are still available as deprecated, and will remain
available until version 6.0.0, or until they are removed from the Flutter
stable channel, whichever comes first. The properties for built-in schemes
were assigned to their new corresponding FlexColor
values.
In class FlexSchemeColor
added new color definitions from FlexColor
for FlexSchemeColor.tertiary
and FlexSchemeColor.tertiaryContainer
.
In class FlexSchemeColor
the FlexSchemeColor.secondaryContainer
and FlexSchemeColor.tertiaryContainer
should be brighter versions of their
none container parent light mode and darker in dark mode. They receive
such color values via new corresponding FlexColor
values.
In factory FlexSchemeColor.from
added optional and nullable parameter
brightness
. If not assigned, the factory works as before, producing a
complete FlexSchemeColor
from just one or more color property inputs,
by producing a toned complete FlexSchemeColor
suitable for a light or
dark M2 design based theme. If brightness is given value Brightness.light
it produces a FlexSchemeColor
from just one or more color property inputs
suitable for a M3 light theme mode theme. If brightness
is dark, for
a dark mode intended M3 scheme. When brightess
is defined the factory
also sets defaults for error
and errorContainer
colors, if they
were not passed in. The error
color is based on the Material 2 guide color
and errorContaier
is a FlexColorScheme definition as it has no M2 value.
Seed based new M3 error colors are used when using key based seeded M3
ColorScheme. An option to also use M3 based error colors when not using
seeded ColorScheme, may be added in a future version.
Factory FlexSchemeColor.effective
got the same nullable and optional
brightness
property as FlexSchemeColor.from
, with same functionality,
producing the same kind of M3 tone mapped colors when reducing amount of
used colors, and also providing error color defaults.
The FlexSchemeColor.effective
factory otherwise works as before considering
color swapping and effective input colors reduction. Producing same results
via usedColors
input limiter as if provided FlexSchemeColor
would have
been created with FlexSchemeColor.from
limited to same colors as implied
by usedColors
parameter in the FlexSchemeColor.effective
factory.
To the method FlexSchemeColor.toDark()
, that computes a dark theme mode
appropriate FlexSchemeColor
set from colors designed for light
theme mode, added the optional positional bool parameter swapColors
.
It is false by default to not break past behavior.
It is used to swap the "main" and its Container
color properties. So that
primary
<> primarycontainer
, secondary
<> secondarycontainer
and
tertiary
<> tertiaryContainer
in the input light theme mode designed
FlexSchemeColor
are swapped before producing the output FlexSchemeColor
suitable for a dark theme mode. This is useful if the input
FlexSchemeColor
is designed for a light M3 based ColorScheme
. If it is
then, to get a correct M3 designed output and via whiteBlend
value
desaturated colors, the main and container values of the light mode colors
should be swapped in the result. In light mode, M3 main is darker than
container, but in M3 dark mode it should be the other way around so that
main is lighter and container is darker. By swapping the colors and then
desaturating them with an adjustable white alpha blend, we can achieve
this design goal as well, when computed dark theme mode colors from a set
of provided light theme mode input colors.
Added additional opinionated component sub-themes for:
SwitchThemeData
via FlexSubThemes.switchTheme
.CheckboxTHemeData
via FlexSubThemes.checkboxTheme
.Radio
via FlexSubThemes.radioTheme
.NavigationRailThemeData
via FlexSubThemes.navigationRailTheme
.There are many quick and easy configuration parameters added
to FlexSubThemesData
. There following built in widgets now have quick and
easy custom theming option via sub-themes opt-in.
TextButton
ElevatedButton
OutlinedButton
ButtonThemeData
ToggleButtons
Switch
Checkbox
Radio
InputDecoration
FloatingActionButton
Chip
Card
PopupMenuButton
Dialog
TimePickerDialog
SnackBar
Tooltip
BottomSheet
BottomNavigationBar
NavigationBar
NavigationRail
Added additional ColorScheme
color selection options to component
sub-themes configuration class FlexSubThemesData
. The feature
introduced in version 4.2.0 is now also supported by sub-themes for:
FloatingActionButton
, via FlexSubThemesData.fabSchemeColor
.TextButton
, via FlexSubThemesData.textButtonColor
.ElevatedButton
, via FlexSubThemesData.elevatedButtonColor
.OutlinedButton
, via FlexSubThemesData.outlinedButtonColor
.MaterialButton
, via FlexSubThemesData.materialButtonColor
.ToggleButtons
, via FlexSubThemesData.toggleButtonsColor
.Switch
via FlexSubThemes.switchTheme
.Checkbox
via FlexSubThemes.checkboxTheme
.Radio
via FlexSubThemes.radioTheme
.NavigationRail
via FlexSubThemes.navigationRailTheme
.DialogTheme
and TimePickerThemeData
FlexSubThemesData.dialogBackgroundColor
. If used this propertydialogBackground
in all FlexColorSchemeAppBar
background color, via the AppBar sub-theme definition is built intoFlexColorScheme.toTheme
method (legacy).FlexSubThemes
sub-theme later.TabBar
for indicator and item color. The TabBar sub-theme definitionFlexColorScheme.toTheme
method (legacy).FlexSubThemes
sub-theme later.Added a FlexKeyColors
configuration class that can be used with
the FlexColorScheme.keyColors
to enable and configure Material 3 based
key color based tonal palettes' generation that are then used to define
the ColorScheme
. The tonal palettes are generated using existing
built-in or custom colors, as key colors for generating palettes.
The method matches the ColorScheme.fromSeed
Flutter SDK
feature if you only use primary color as input. However, it also offers more
configuration and flexibility on how to use key colors as seed colors. It
does so without the need to go to lower API levels to produce custom tonal
palettes and use them manually in the ColorScheme
definition. The
implementation makes it easy to use use a combination of key seeded colors and
fixed colors, in any combination, to produce the color scheme.
This makes using seeded colors an option for supplementary colors while e.g.
primary color is locked to a given brand or design color value, but
other colors in the ColorScheme are less critical, and it is more important
that they match the tone of the over all theme.
Added bool property useMaterial3ErrorColors
to FlexColorScheme.light
and
FlexColorScheme.dark
. Set to true, to use the new Material 3 error colors,
instead of past Material2 based ones, which are still default. When using key
color seed generated [ColorScheme]s always use the Material 3 based error
colors.
Added custom tone configuration for seeded ColorScheme
. M3 color design
has it own fixed defaults for which tone from the relevant TonalPalette
is used as input on each color property in the light and corresponding dark
ColorScheme
. By configuring and passing in a FlexTones
to tones
in
FlexColorScheme.light
and FlexColorScheme.dark
it is possible
to control which color tone from the relevant TonalPalette
is used for
each color property in generated ColorScheme
.
Obviously making poor selections produces bad results, but there are some
tuning that works very well for different needs, e.g. primary could
be assigned a one step lower value in light mode, to produce seeded color
schemes that are more vivid or saturated.
The Material 3 based seeded ColorScheme
also locks down the chroma level of
seed color for secondary colors to 16 and to 24 for tertiary colors, and keeps
it at min 48 for primary color. The FlexTones
configuration makes it
possible to change these restrictions. You can then get more vivid tonal
palettes also for secondary and tertiary TonalPalettes
. FlexTones has a
FlexTones.light
and FlexTones.dark
constructor that have default values
that gives the same result as using the hard coded ColorScheme.fromSeed
tone mapping and chroma limit behavior on TonalPalette
. These constructors
are also convenient to use when making custom FlexTones
setups. To show
how, it comes with four built in examples. They take a Brightness
value
as input, and return FlexTones
configs with different design goals suitable
for dark or light mode brightness themes. There is FlexTones.material
, it is
an alternative Brightness
input based API for FlexTones.light
and
FlexTones.dark
to get the default Material 3 design guide config.
In a similar fashion there are 3 alternative configurations.
FlexTones.soft
, for even softer and more earthy tones thanFlexTones.vivid
.FlexTones.highContrast
.It is easy to make your own configs with the API. The setup of the
these built-in examples shows how.
Added new alpha blend control blendOnLevel
value for onColors to class
FlexSubThemesData
. It is used to produce onColors for main colors that
can be adjusted and be more in-line with M3 seed color usage design by tuning
their blend level. Before, this was turned on via blendOnColors
toggle
that will remain, but has a slightly modified new function.
The blendOnLevel
introduces a new blend level value for onColor that is not
tied to used blend level on surfaces.
Defined matching color values for new FlexSchemeColor.secondaryContainer
and FlexSchemeColor.tertiaryContainer
for all existing built-in
color schemes. This was surprisingly tedious task.
New color schemes: Added four new built-in color schemes.
Total number of color schemes is now 40 matched light and dark pairs.
FlexScheme.flutterDash
for easy access to it.FlexScheme.materialBaseline
for easy access to it.FlexScheme.verdunHemlock
for easy access to it.FlexScheme.dellGenoa
for easy access to it.CHANGE
Added all the new ColorScheme
M3 color properties to SchemeColor
enum and its static functions schemeColor
and schemeColorPair
.
Deprecated the enum values primaryVariant
and secondaryVariant
. These
deprecated enum values are still available, but return correct replacement M3
color values from the in Flutter 2.10.0 updated ColorScheme
when using
functions schemeColor
and schemeColorPair
.
To class FlexColorScheme
default constructor, light
and
dark
factories, added properties primaryContainer
and
secondaryContainer
. They replace deprecated properties primaryVariant
secondaryVariant
. The old properties still work and are used as fallback to
the new ones, if the new ones are not provided.
The previous properties are still available as deprecated, and will remain
available until version 6.0.0.
In extension FlexThemeData
to extensions FlexThemeData.light
and FlexThemeData.dark
added properties primaryContainer
and
secondaryContainer
. They replace deprecated properties primaryVariant
secondaryVariant
. The old properties still work and are used as fallback to
the new ones, if the new ones are not provided.
The previous properties are still available as deprecated, and will remain
available until version 6.0.0.
The opt-in, custom M3 TextTheme
is now defined using the
new actual M3 TextStyle
names available in Flutter 2.10.0. The change is
none breaking thanks to underlying implementation in Flutter SDK 2.10.0.
It now also includes the new styles headlineMedium
and labelMedium
that do
not directly map to any previous M2 text styles. Flutter SDK automatically
maps the new TextTheme
and its TextStyles
to corresponding M2 text style
names, so they work and can be used as before. This opt-in TextTheme includes
the new M3 typography (text size and letter spacing), for what presumably will
become EnglishLike2021
as Typography
when it is included in Flutter.
This typography (font geometry) is not yet available in Flutter 2.10.0 and
was not even in master at the time when when Flutter 2.10.0 was released.
FlexColorScheme has included a EnglishLike2021 geometry since version
4.0.0, now it also uses the correct TextStyle
names since they became
available in Flutter 2.10.0. The actual EnglishLike2021
will arrive in
the Flutter stable release after 2.10.x. The current custom version of it
will be removed then.
The feature of blendOnColors
has changed design wise slightly, it is now
used as a toggle to indicate that on colors for the main colors,
that is onPrimary, onSecondary, onTertiary and onError should also receive
an alpha bland of its color pair, of strength blendOnLevel
/2 when
blendOnColors
is true. If blendOnColors
is false, they use white or
black contrast color as appropriate for their main color pair. The
blending of onColor only occurs when their main color is not using seed
based ColorScheme based color value.
The darkIsTrueBlack
option in FlexColorScheme.dark
that makes and keeps
scaffold background fully black, now makes other blended surfaces 5% darker
instead of 8%, scaffold remains black.
The lightIsWhite
option in FlexColorScheme.light
that makes and keeps
scaffold background fully white, now makes other blended surfaces 5% lighter
instead of 8%, scaffold remains white.
The built-in description for FlexScheme.material
was changed to
"Default Material 2 color theme, used in the design guide" from
"Default Material color theme, used in the design guide", to make it clear
it came from the M2 guide.
The built-in description for FlexScheme.materialHc
was changed to
"High contrast Material 2 design guide theme" from
"High contrast Material design guide theme", to make it clear it came
from the M2 guide.
The order of the colors, in the rarely outside FlexColorScheme
used demo apps, theme presentation/switch button FlexThemeModeSwitch
was
changed for better placement of new color primaryContainer
and tertiary
.
The Colors primaryVariant
and secondaryVariant
were removed from it
since the colors are deprecated in Flutter SDK. The change was from:
Before | Before |
---|---|
Primary | Primary variant |
Secondary | Secondary variant |
to:
After | After |
---|---|
Primary | Secondary |
Primary container | Tertiary |
FIXED
When using FlexSubThemesData.inputDecoratorSchemeColor
the floating label
did not change to the selected ColorScheme based SchemeColor
. Now it does,
it also keeps the correct error color behavior. Tricky bugger to define this
one by the way.
FIX TO MATCH M2 SPEC and STYLE BREAKING: In all previous versions
of FlexColorScheme, the Flutter
ThemeData.estimateBrightnessForColor
was used to calculate if black or white
on color should be used on the error
colors. In dark mode for the default
error FlexColor.materialDarkError
and the high contrast dark mode error
color FlexColor.materialDarkErrorHc
, this resulted in correctly computed
contrast color value white being used on them. Regardless of this the
Material 2 guide specifies and Flutter SDK uses the on color for these
colors as black. These two cases were added as special considerations
to return black color for these two particular cases, even if the Flutter
contrast color computation says it should be white, but M2 spec is black.
KNOWN ISSUES
FlexColorScheme.themedSystemNavigationBar
. TheEXAMPLES and Themes Playground
Update examples 1...4
RaisedButton
, OutlineButton
and FlatButton
in ALL the examples.Update default example app, the Hot Reload Playground.
Major update for "example 5" the Themes Playground
to include support for all the new features. Updates listed below:
ColorScheme
.usedColors
, it is an olduseMaterial3
toggle.FlexTones
. Made some useful setups as preconfigured FlexTones, and theFlexTones.material
for the defaultFlexTones.soft
, FlexTones.vivid
,FlexTones.vividSurfaces
and FlexTones.highContrast
as built-inTonalPalette
and sliders to adjust chroma. this could later be used toFlexTones
config and get it as part of setup code too.TESTS TODO
SchemeColor
properties.FlexTones
.FlexKeyColors
.FlexCorePalette
.FlexSubThemes
.useMaterial3
property.FlexSubThemes
and its config dataFlexSubThemesData
.primaryVariant
and secondaryVariant
properties.Published by rydmike over 2 years ago
New: Updated required Dart SDK to minimum 2.15 that Flutter 2.8.0 uses.
To use this release at least Flutter 2.8.0 is required.
New: Added support for opinionated sub-theme for the new Material 3 based
NavigationBar
. Flutter version 2.8.0 is the first stable version that
includes the new Material 3 design based NavigationBar
.
Deprecated: The property surfaceStyle
has been deprecated. In
version 4.0.0 it was already recommended to use, the then introduced more
powerful surface branding properties surfaceMode
and blendLevel
instead.
The surfaceStyle
property is still available and works as before, but you
now get a deprecation warning if it is used. The property and all its related features
will be completely removed in version 5.0.
New: Custom FlexColorScheme
based themes can now also be defined by
alternatively passing in a ColorScheme
object to the colorScheme
property in default the constructor, as well as in FlexColorScheme.light
and
FlexColorScheme.dark
factories. When used it overrides the scheme
and
colors
properties in the factories. Same color property in any constructor
that exist as direct property in the constructors, still have the highest
priority and will also override corresponding color properties in passed in
colorScheme
. The capability to make custom FlexColorScheme based themes from
standard Flutter color schemes is useful if you already have a predefined
elaborate ColorScheme
definition. You can now use it directly and still
use FlexColorScheme for its surface color branding and easy sub-theming.
This capability will also be very useful when Material 3 based ColorScheme
in Flutter SDK arrives in the stable channel. With Material 3, color schemes
may be created using new Material 3 design based color tools, e.g. from
seed color(s) or using dynamic colors extracted from system wallpaper colors.
With this feature it will then be able to feed those colors directly into
FlexColorScheme, and use them as colors to create your ThemeData
.
Changed: All properties in all FlexColorScheme
constructors are now
optional. The change is none breaking, and uses Material 2 based
design guide example theme light and dark as defaults for undefined values.
New: Added a ColorScheme
color selection option to selected opinionated
sub-themes configuration class FlexSubThemesData
. The sub-themes that
support changing their ColorScheme
based
used theme color selection, have one or more properties called
nnnSchemeColor
where nnn
describes the color feature that can be set
to an alternative ColorScheme
based color and not just its pre-defined
ColorScheme
based color property.
The color selector is a SchemeColor
enum property value that is used to
select the enum value that corresponds to same named color
property value in theme.colorScheme
. This SchemeColor
color quick
selection option has been added to:
TextField
via FlexSubThemes.inputDecorationTheme
to select aTabBar
sub-theming to select its indicator color, when you want it to be aTabBar
icon and text, which areFlexTabBarStyle
in the FlexColorScheme.tabBarStyle
colorScheme
colors.BottomNavigationBar
via FlexSubThemes.bottomNavigationBar
to set theBottomNavigationBar
, as well as used container background color.NavigationBar
in FlexSubThemes.navigationBarTheme
to set theColorScheme
color of the text, icon in the Material 3 basedNavigationBar
, as well as the pill shaped highlight color separately thatChipThemeData
from FlexSubThemes.chipTheme
to change the usedColorScheme
based base color of Chips.The SchemeColor
properties for the above sub-themes have a default selection
that results in same ColorScheme
color values being used as they had
before. The additional configuration options are none breaking. The enum
properties to modify the used ColorScheme
color can be defined in the
configuration class FlexSubThemesData
using its new properties:
inputDecoratorSchemeColor
chipSchemeColor
tabBarIndicatorSchemeColor
bottomNavigationBarUsedColor
bottomNavigationBarSchemeColor
bottomNavigationBarBackgroundSchemeColor
navigationBarIconSchemeColor
navigationBarTextSchemeColor
navigationBarHighlightSchemeColor
navigationBarBackgroundSchemeColor
Usage examples of the above new configuration possibilities have been added to
the default example, the so-called developers hot reload playground.
The ColorScheme color selection in SchemeColor
includes all colors in
ColorScheme
supported by Flutter 2.8. You may want to avoid using the
primaryVariant
and secondaryVariant
colors if you want to avoid later
migrations. These variant colors are being deprecated in Flutter SDK,
see #93427.
A later FlexColorScheme version will add support for the new Material 3
colors in ColorScheme
when they land in the stable channel.
This quick selection of ColorScheme
based colors as none standard themed
colors of widget sub-themes, may be extended to a few more sub-themes in
future versions. At least if it is seen as a practical and quick way to
customize widget sub-theme colors within the constraints of colors in
the theme.colorScheme
.
As before you can still apply your own total custom sub-themes to the
ThemeData
created with FlexColorScheme
by using copyWith
.
FlexColorScheme is a way to easily make fancy and color wise consistent and
balanced ThemeData
objects using convenience shortcut properties and
methods. It does not prevent you from further modifying and tuning the
produced ThemeData
with standard Flutter SDK features.
Removed: The uses-material-design: true
line from library
pubspec.yaml
file was removed. It is not needed since Material icon
features are not used by this package.
Example 5 - Themes Playground
Example theme - Copy Playground Theme
Documentation: Reviewed and corrected many API docs. The API docs are
very thorough and complete. They usually cover any question you might have and
more. Added a brief "API Intro and Guide" chapter to the readme.
Tests: Added tests to cover the new features, now total 1123 tests.
Published by rydmike almost 3 years ago
Published by rydmike almost 3 years ago
Fix: The defaultRadius
in FlexSubThemesData
now defaults to null
so all sub-themes border radius will default to M3 default border
radius per widget. The const default value it had was a remnant from early
dev phase when widgets all defaulted to single shared radius and not M3
defaults per widget type. If you explicitly passed in null, you did also in
previous version get the M3 defaults. Older tests did that, now they expect
same result when no value is assigned, as it should have been.
Examples: Updated and tuned the examples. Example 5 "Themes Playground"
now includes capability to define custom color schemes starting from built-in ones.
It can also generate the FlexColorScheme setup code needed for any defined
viewed theme setup. You can copy/paste a theme's Flutter Dart code,
from the Themes Playground to your app and use it as its theme. This is a very
quick and convenient way to try a theme you made and see in the Themes
Playground in your own app.
Opt in opinionated sub themes minor style changes:
SnackBarThemeData
whencaption
got a bitListTile
, depend on it forListTile
via the heading levelcaption
text style. The opacity on it is lower though, toMinor details on the opinionated sub themes may still be tuned and
changed slightly as a part of improving them and their appeal. For the
text theme coloring future version may expose parameter(s) that can be
used to adjust the color tint effect on text theme when colored
text theme is enabled.
Major updates to readme doc, and typo corrections.
Tests:
defaultRadius
issue.Published by rydmike almost 3 years ago
Published by rydmike almost 3 years ago
The new V4 docs are still a bit lacking and will be improved in docs
updates later.
The breaking case is a minor difference in produced style for true
black mode. Version 4.0.0 is still fully API compatible with version 3.
Version 4.0.0 does however contain so many new
features, that it in itself warrants a new major release bump.
Breaking: In dark mode, the darkIsTrueBlack
now makes surface
color
8% darker instead of 6%. This change was needed to support overlay color
in dark mode when using darkIsTrueBlack
when using the new surfaceMode
property. For more information see Flutter SDK
issue 90353.
Fix/Breaking: From the color scheme English descriptions the sentence
end "." was removed from all description strings. If and when you want one,
you can add it as needed.
New: Added a more flexible and powerful alpha blending feature for
surface and background colors. The new properties in the FlexColorScheme
factories light
and dark
are surfaceMode
, of type enum FlexSurfaceMode
and integer blendLevel
. Consider using them instead of previous
surfaceStyle
.
The surface color blend style surfaceStyle
is still default, and not yet
deprecated, but may be so in later versions. It is not really needed anymore,
but there was no major reason to break things by removing it either.
New: Major new feature; easy sub-theming of Flutter SDK UI widgets.
FlexColorScheme.useSubThemes
to true, it is false by default.FlexSubThemesData
class, passed toFlexColorScheme.subThemesData
.FlexSubThemesData
class provides parameters for easy adjustmentShapeBorder
or decorations, thatToggleButtons
ButtonThemeData
that as far as possible match the same style.New: Added FlexThemeData
static extension on ThemeData
.
FlexThemeData.light
and FlexThemeData.dark
, instead of usingFlexColorScheme.light().toTheme
and FlexColorScheme.dark().toTheme
.toTheme
method is still available and works as before. It will notFlexColorScheme
based opt-in sub themes. WhenColorScheme
that is defined in current FlexColorScheme()
instance.FlexColorScheme().toScheme
. Then use thisColorScheme
or any of its colors, in your custom sub themeFlexColorScheme().toTheme.copyWith(..."your sub themes and other ThemeData over-rides here")
.New: Added textTheme
and primaryTextTheme
properties to
FlexColorScheme
to enable easy setup of custom TextThemes
, without the
need to add a custom TextTheme
via a copyWith
, plus merge
with the
default text theme.
New: Added FlexColorScheme.dialogBackground
as a background surface
color that can be controlled and themed separately.
New: Added appBarOpacity
to FlexColorScheme.light()
and dark()
.
With it, you can apply themed opacity to the AppBar
background color to
the selected FlexAppBarStyle
it is using.
New: On the FlexColorScheme
factories light
and dark
, exposed
the Color
properties primary
, primaryVariant
, secondary
,
sedondaryVariant
, appBarBackground
, dialogBackground
and error
.
They all default to null, but if provided they can be used as override values
to factory behaviors defined by scheme
, colors
, appBarStyle
,
surfaceMode
and surfaceStyle
that
otherwise via the factories define the colors for these properties. If a value
for one of the new direct color properties is used with the factory, it always
has precedence over other properties that assign or compute colors for it.
New: Exposed boolean property applyElevationOverlayColor
. It has the same
function as the same property in ThemeData
. It applies a semi-transparent
overlay color on Material surfaces to indicate elevation for dark themes.
In FlexColorScheme
it defaults to true. In Flutter ThemeData.from
it
also default to true, but in ThemeData
it defaults to false.
The property is just available for convenience, so you can avoid a copyWith
if you wish to turn it off. It is not necessarily needed or even desired when
using strong alpha blends on surfaces in dark mode, to use an elevation
overlay color.
New: All FlexSchemeData
objects in FlexColor
are exposed as static
const objects, making them easy to pick and reuse as const objects
individually in custom color scheme lists, or as input to the colors
property. Previously only the individual color value definitions were exposed.
New: Added convenience extension .blendAlpha()
on Color
in FlexColorExtensions
.
New: The FlexThemeModeSwitch
got a bool property hasTitle
, if set
to false
it removes the title entirely.
New: The FlexThemeModeSwitch
got a buttonOrder
property using enum
FlexThemeModeButtonOrder
that you can use to define the order of its
light, system and dark theme mode buttons, in all possible combinations.
New: Added edgeToEdge support to
FlexColorScheme.themedSystemNavigationBar
. This brings the previously
experimental support for transparent system navigation bar in Android
into the supported fold in FlexColorScheme. Its functionality
requires min Android SDK level 29, but other than that it works without
Android setup shenanigans. No added APIs, the API for it already existed
in previous version of FlexColorScheme, using it did however require
special Android build configuration setup, this is no longer required.
Change: The FlexColor.schemesList
is now a const
for improved
efficiency.
New color schemes: Added four new built-in color schemes.
Total number of color schemes is now 36 matched light and dark pairs.
FlexScheme.blueWhale
for easy access to it.FlexScheme.sanJuanBlue
for easy access to it.FlexScheme.rosewood
for easy access to it.FlexScheme.blumineBlue
for easy access to it.Documentation:
FlexThemeData
extension syntax to create theThemeData
and surfaceMode
to define the alpha blended surfaces.Tests:
Published by rydmike almost 3 years ago
The breaking case refer to a minor difference in produced style for true
black mode. Version 4.0.0 is still fully API compatible with version 3.
Major version was bumped due to the small change in produced output in some
rare usage options. Version 4.0.0 does however contain so many new
features, that it in itself warrants a new major release bump.
Breaking: In dark mode, the darkIsTrueBlack
now makes surface
color
8% darker instead of 6%. This change was needed to support overlay color
in dark mode when using darkIsTrueBlack
when using the new surfaceMode
property. For more information see Flutter SDK
issue 90353.
Fix/Breaking: From the color scheme English descriptions the sentence
end "." was removed from all description strings. If and when you want one,
you can add it as needed.
New: Added a more flexible and powerful alpha blending feature for
surface and background colors. The new properties in the FlexColorScheme
factories light
and dark
are surfaceMode
, of type enum FlexSurfaceMode
and integer blendLevel
. Consider using them instead of previous
surfaceStyle
.
The surface color blend style surfaceStyle
is still default, and not yet
deprecated, but may be so in later versions. It is not really needed anymore,
but there was no major reason to break things by removing it either.
New: Major new feature; easy sub-theming of Flutter SDK UI widgets.
FlexColorScheme.useSubThemes
to true, it is false by default.FlexSubThemesData
class, passed toFlexColorScheme.subThemesData
.FlexSubThemesData
class provides parameters for easy adjustmentShapeBorder
or decorations, thatToggleButtons
ButtonThemeData
that as far as possible match the same style.New: Added FlexThemeData
static extension on ThemeData
.
FlexThemeData.light
and FlexThemeData.dark
, instead of usingFlexColorScheme.light().toTheme
and FlexColorScheme.dark().toTheme
.toTheme
method is still available and works as before. It will notFlexColorScheme
based opt-in sub themes. WhenColorScheme
that is defined in current FlexColorScheme()
instance.FlexColorScheme().toScheme
. Then use thisColorScheme
or any of its colors, in your custom sub themeFlexColorScheme().toTheme.copyWith(..."your sub themes and other ThemeData over-rides here")
.New: Added textTheme
and primaryTextTheme
properties to
FlexColorScheme
to enable easy setup of custom TextThemes
, without the
need to add a custom TextTheme
via a copyWith
, plus merge
with the
default text theme.
New: Added FlexColorScheme.dialogBackground
as a background surface
color that can be controlled and themed separately.
New: Added appBarOpacity
to FlexColorScheme.light()
and dark()
.
With it, you can apply themed opacity to the AppBar
background color to
the selected FlexAppBarStyle
it is using.
New: On the FlexColorScheme
factories light
and dark
, exposed
the Color
properties primary
, primaryVariant
, secondary
,
sedondaryVariant
, appBarBackground
, dialogBackground
and error
.
They all default to null, but if provided they can be used as override values
to factory behaviors defined by scheme
, colors
, appBarStyle
,
surfaceMode
and surfaceStyle
that
otherwise via the factories define the colors for these properties. If a value
for one of the new direct color properties is used with the factory, it always
has precedence over other properties that assign or compute colors for it.
New: Exposed boolean property applyElevationOverlayColor
. It has the same
function as the same property in ThemeData
. It applies a semi-transparent
overlay color on Material surfaces to indicate elevation for dark themes.
In FlexColorScheme
it defaults to true. In Flutter ThemeData.from
it
also default to true, but in ThemeData
it defaults to false.
The property is just available for convenience, so you can avoid a copyWith
if you wish to turn it off. It is not necessarily needed or even desired when
using strong alpha blends on surfaces in dark mode, to use an elevation
overlay color.
New: All FlexSchemeData
objects in FlexColor
are exposed as static
const objects, making them easy to pick and reuse as const objects
individually in custom color scheme lists, or as input to the colors
property. Previously only the individual color value definitions were exposed.
New: Added convenience extension .blendAlpha()
on Color
in FlexColorExtensions
.
New: The FlexThemeModeSwitch
got a bool property hasTitle
, if set
to false
it removes the title entirely.
New: The FlexThemeModeSwitch
got a buttonOrder
property using enum
FlexThemeModeButtonOrder
that you can use to define the order of its
light, system and dark theme mode buttons, in all possible combinations.
New: Added edgeToEdge support to
FlexColorScheme.themedSystemNavigationBar
. This brings the previously
experimental support for transparent system navigation bar in Android
into the supported fold in FlexColorScheme. Its functionality
requires min Android SDK level 29, but other than that it works without
Android setup shenanigans. No added APIs, the API for it already existed
in previous version of FlexColorScheme, using it did however require
special Android build configuration setup, this is no longer required.
Change: The FlexColor.schemesList
is now a const
for improved
efficiency.
New color schemes: Added four new built-in color schemes.
Total number of color schemes is now 36 matched light and dark pairs.
FlexScheme.blueWhale
for easy access to it.FlexScheme.sanJuanBlue
for easy access to it.FlexScheme.rosewood
for easy access to it.FlexScheme.blumineBlue
for easy access to it.Documentation:
FlexThemeData
extension syntax to create theThemeData
and surfaceMode
to define the alpha blended surfaces.TODO Documentation:
TODO Tests:
Published by rydmike over 3 years ago
FlexSchemeColor.effective(FlexSchemeColor colors, int usedColors, {bool swapColors = false})
matters for the intended result whenPublished by rydmike over 3 years ago
Breaking: The color accentColor
is being deprecated in Flutter SDK ThemeData
starting
from version v2.3.0-0.1.pre.
Usage of accentColor
in FlexColorScheme is removed to support this
transition. The property is deprecated in FlexColorScheme, but is still present. Its
usage does however no longer have impact on produced themes, this is a potential breaking change.
The probability that you might have used it as a property in your
FlexColorScheme based theme is low. It was set before to primary color
in FlexColorScheme, as a way to make the highlight color of outlines and underlines on
text field boxes primary colored in dark theme mode, and not secondary/accent colored as they used
to bve in Flutter's default dark theme mode. The old accentColor
was
not used for anything else in themes anymore when using FlexColorScheme.
The property is now going away totally
in Flutter SDK. The default ThemeData in Flutter SDK in dark mode now creates a
theme for outline and underline indicators on input fields that are based on primary color,
just like FlexColorScheme does and already did before. Flutter SDK no longer uses
accentColor
for it. The resulting default dark mode style on text fields thus now remain
unchanged in FlexColorScheme even with this definition removed. If you
had used accentColor
in FlexColorScheme as a short-cut to define a different text field
outline or underline highlight color in dark theme mode than primary color, then you will need to
recreate it via text field decoration theming.
New: The FlexColorScheme.dark
and FlexColorScheme.light
factories have a new
property called swapColors
. If true, this will swap primary
and primaryVariant
colors with their secondary counter-parts.
This flag can be set to true if you want to make a theme where your primary and secondary
colors are swapped compared to their definition. It is useful if you want to quickly
swap primary and secondary colors when using the pre-defined color
schemes or with computed dark schemes from light schemes. It doubles the
variation possibilities of themes based on the pre-defined color schemes.
If you are explicitly defining all you light or dark scheme colors, you can of course define
them in desired order. This feature will still swap whatever
colors you defined for primary and secondary when set to true. You can thus also
use this feature as an easy end-user modifiable theme option, if you like
to offer the capability to toggle the primary and secondary theme colors the
other way around.
New: The static function FlexSchemeColor.effective(FlexSchemeColor colors, int usedColors, {bool swapColors = false})
is used to implement the above
swapColors
feature. It also exposes the logic behind the FlexColorScheme
dark and light theme usedColors
property. This static method is helpful if
you need to compute effective built-in theme colors externally to FlexColorScheme
to present the active theme, based on these settings. This is used by example 5
to change the colors on the theme mode switch when the swap color settings
is toggled. The usedColors
property is not shown in any bundled
example, but it can be used the same way.
New color schemes: Added four new built-in color schemes.
FlexScheme.bahamaBlue
for easy access to it.FlexScheme.mallardGreen
for easy access to it.FlexScheme.espresso
for easy access to it.FlexScheme.outerSpace
for easy access to it.Inspired by MaterialYou at GoogleIO 2021, I recently hooked up FlexColorScheme
with an algorithm that extracts prominent colors from images. Then fed these
colors to FlexColorScheme to make themes from them. The above new color schemes in
release 3.0.0 came from these image based theme experiments. You can see examples
of FlexColorScheme making color schemes and themes from images in my Tweets about it.
This was a first quick test
of the idea, later I added some more features to it, here and here. This
quick test shows that FlexColorScheme is very versatile.
Tests: Added tests for the new features and removed test related to
accentColor. Total 736 tests, coverage 99.76%.
Published by rydmike over 3 years ago
onSelect
in FlexThemeModeOptionButton
nullable.Published by rydmike over 3 years ago
FlexColorScheme(transparentStatusBar)
from true to false, did not restore theFlexColorScheme.themedSystemNavigationBar(useDivider)
in an AnnotatedRegion
, togglinguseDivider
from true to false, did not remove the system navigation bar divider again, unless theFlexColorScheme.themedSystemNavigationBar
for styling the system navigation bar got asystemNavBarStyle
that takes a FlexSystemNavBarStyle
enum with values:
system
: For default white system nav bar in light theme and black in dark theme mode.surface
: The system navigation bar will be the same color as active theme colorScheme.surface
color.background
: The system navigation bar will be the same color as active theme colorScheme.background
color.scaffoldBackground
: The system navigation bar will be the same color as active theme scaffoldBackground
color.transparent
: An experimental feature. The goal is to make the system navigation bar fully transparent,Published by rydmike over 3 years ago
FlexColorScheme.themedSystemNavigationBar
has beenPublished by rydmike over 3 years ago
Migrated AppBar theming to use the implementation introduced in Flutter 2.0.0 instead of using
its own custom implementation for the "white" app bar theme.
Minor change to the none default tooltipsMatchBackground: true
border style, it now uses
the theme divider color as its default outline color.
The static helper FlexColorScheme.themedSystemNavigationBar
received three new properties
noAppBar
, invertStatusIcons
and systemNavigationBarDividerColor
. The old property
nullContextBackground
was deprecated and replaced with systemNavigationBarColor
. Example 5
has been updated to show how and when the new features can be used.
As stated earlier in the documentation, as a planned change for version 2.0.0 the sub theme for
FloatingActionButtonThemeData
was removed. It is thus now null as in default Flutter ThemeData.
It still produces the same default theme as before, the ThemeData definition was just no
longer needed to do so.
Number of tests increased from 639 to 661. Coverage 99.78%.
Updated the documentation. Added thumbnails to Appendix A. This pub.dev version is also to test the
thumbnails work and how they look on pub.dev before stable 2.0.0 release.
See API documentation for more information.