Releases: rydmike/flex_color_scheme
Version 8.0.0-dev.2
8.0.0-dev.2
Oct 26, 2024
SUMMARY
Version 8.0.0 makes FlexColorScheme fully aligned with Flutter's MAJOR BREAKING Material-3 theming changes introduced in Flutter version 3.22. Due to Flutter 3.22 breaking many past Material styles, introducing new colors to ColorScheme
and deprecating three colors, FlexColorScheme had to undergo major revision and also break many of its past styles and some older APIs.
Most APIs are still there and work as before, but a few produce results that differ slightly from past ones, just like Flutter 3.22 also does over previous versions. Generally, the upgrade should be smooth, but you may need to review the produced theme result to see that you don't get any changes that don't fit with your design goals. Some past defaults have changed in FCS V8, but previous values are still available. You will need to enable them explicitly to get the same results as before. The purpose of these default value changes is to make FCS have less opinionated defaults, and be more aligned with Flutter's Material-3 design defaults. The Themes Playground app will still have some of its own opinionated defaults, done via default settings values the app uses in its default configuration, but the package Material-3 default starting points, are now much more aligned with Flutter's Material-3 defaults.
In the Themes Playground you can now export and import settings to a JSON file, and import them back into the Playground later. This is a great way to save your theme settings for later re-use. The exported JSON contains all the internal controller settings values you have configured in the Playground app, that are needed to restore a given configuration state. This Playground feature was a nice contribution by GitHub user @akiller in !PR 257, thank you!
This contributed feature got enhanced with more error handling and a slightly refined UI to make it production ready. It can now be tried for the first time in the 8.0.0-dev.2 release and build. As a further enhancement of the JSON export feature, the Themes Playground app also got the ability to convert the exported settings JSON config to a shareable URL. You can now share Playground settings with other Flutter developers.
MIGRATION
The most critical changes to migrate from FlexColorScheme V7 to V8 are listed below. For a full list of all breaking changes, see PACKAGE CHANGES and the BREAKING part further below.
-
The flag
useMaterial3
now defaults totrue
inFlexColorScheme
andFlexThemeData
constructors. Set it tofalse
to explicitly use Material-2 theming. It defaulted to true before. Material-2 is still fully supported in FCS v8 and Flutter v3.24, but will eventually be deprecated in Flutter, when that happens, it will also happen in FCS.With the Themes Playground app, you can use a pre-configured Material-3 based theme that looks very similar to legacy Material-2 design. This will continue to be available also after Material-2 is deprecated in Flutter.
-
The
FlexSubThemesData
propertiesinteractionEffects
,tintedDisabledControls
,defaultUseM2StyleDividerInM3
andblendOnColors
now all default tofalse
. In previous versions they defaulted totrue
. If you before had not explicitly turned these propertiesfalse
, they were alltrue
by default. To get the same result as before in FCS V8, you now have to set these properties totrue
. This change was made to have fewer opinionated defaults in FCS to align it more with Flutter SDK default styles. -
The
FlexSubThemesData
propertynavigationRailLabelType
no default toNavigationRailLabelType.none
. To get the same result as before by default, you will need to set it toNavigationRailLabelType.all
. This change was made to have fewer opinionated defaults in FCS to align it more with Flutter SDK default styles. The Playground defaults it toNavigationRailLabelType.all
by adding this by default to new default themes. -
Since
ColorScheme.background
color was deprecated in Flutter 3.22.0 we can no longer use it as a part of surface blends and its modes. For example, whensurfaceMode
is set toFlexSurfaceMode.highBackgroundLowScaffold
it now uses surface and dialog blends set to 2x instead of 1x, so that it represents the "high background" style as before, but done via surface color. Without this breaking change, this mode would produce the same result asFlexSurfaceMode.levelSurfacesLowScaffold
and be redundant.- NOTE: You may want to check your surface mode and blends to see that they still look as you want them to, as they may have changed slightly depending on your configuration. We have tried to keep required changes subtle, you may not notice any difference, but it is good to check. These changes we forced by Flutter 3.22.0 deprecation of
ColorScheme
colorsbackground
,onBackground
andsurfaceVariant
.
- NOTE: You may want to check your surface mode and blends to see that they still look as you want them to, as they may have changed slightly depending on your configuration. We have tried to keep required changes subtle, you may not notice any difference, but it is good to check. These changes we forced by Flutter 3.22.0 deprecation of
This major release has many breaking changes forced via breaking changes in Flutter 3.22.0. Due to this, the release also uses this opportunity to clean up APIs with opinionated defaults, like the ones mentioned above. There are additional smaller and more subtle changes in defaults values, that align FCS to use the same color defaults from the new ColorScheme
colors, that Flutter started using in version 3.22.0 as well. You can find all the details below in the PACKAGE CHANGES chapter.
BACKGROUND
Flutter 3.22 introduced a large number of breaking changes to the ColorScheme
and default color mappings that Flutter's Material components use. In total, the Flutter 3.22.0 release adjusted 249 of its own internal tests to accommodate for new Material-3 spec changes, that all broke past Flutter Material-3 component styles. For a reference to the broken and updated tests, see this issue side comment.
FlexColorScheme V8 now allows you to use the new colors introduced in Flutter 3.22. As before, with FCS you can get fully defined hand-tuned ColorScheme
s without using Material-3 design's Material Color Utilities (MCU) based seed-generated ColorSchemes. You may prefer to use seed generated ColorSchemes with Material-3, but it is nice to know you do not have to.
To the seed generated ColorScheme
s, FCS adds support for all the Flutter DynamicSchemeVariant
seed generated variants. It also improves them by allowing you to use separate seed colors for each palette. With Flutter's ColorScheme.fromSeed
, you can only seed with one color, the primary color. The resulting ColorScheme
always uses computed values for secondary and tertiary palettes, plus a hard coded fixed color for the error palette seeding. Surfaces colors are always tied to primary color as well and include a hint of primary color. With FCS, you do not have these limitations, you can seed with separate colors for each palette with even with Flutter's own dynamic scheme variants. This was always possible with FlexColorScheme and its FlexSeedScheme (FSS) based FlexTones, seed generated scheme variants. FCS now brings this feature to Flutter's own dynamic scheme variants as well.
As before, FCS also has its own even configurable FlexTones
way of making seed generated ColorSchemes. Typically, you use predefined FlexTones
, but you can also create your own FlexTones
configurations. With it, you can define the chroma goals for each palette and define which tone is mapped to what ColorScheme
color. An internal example of using them is the implementation of FlexTones
modifiers.
FlexColorScheme V8 adds three new FlexTones
modifiers. The most useful one is called monochromeSurfaces()
. This tone modifier makes the surface shades of any used FlexTones
configuration use monochrome greyscale shades for the surface and surface variant palettes. It thus gives us greyscale colors for ALL surfaces, instead of primary-tinted ones. It can be applied to any FlexTones
seed generated scheme variant. The other new modifiers are expressiveOnContainer()
and higherContrastFixed()
. Check the API docs for more details.
TODOS BEFORE STABLE RELEASE
- TODO: Flutter 3.22 broke +300 tests in FCS 7.3.1, review and fix them after all updates.
- New features and adapting FCS to Flutter 3.22 also broke many tests.
- Update and review all tests.
- Test fix status:
- At quality assurance start, 309 tests to fix
- Now 59 tests remain to fix.
- Of at start total 2103 tests, and now 2189 total tests.
- Coverage is now at 94%.
- Add tests for new features. Get the FCS package back to 100% test coverage.
- Test fix status:
- Will release 8.0.0-dev releases without all test fixes and updates to them, to test the release WEB build and to offer early access to V8 and try new features.
- TODO: Study and potentially report 14 found new Flutter SDK theming issues. Report if not already existing and if they are still valid after check on master using a simple reproduction sample. Add issue GitHub links to known issue expands in the Playground app and to package doc comments, as well as code TODOs where relevant.
MINOR KNOWN ISSUES
- Playground: Cancelling input colors from custom theme get reset to active ColorScheme, not to input values.
- This is a bug in the Playground app. It should reset them to the input values, not to the active ColorScheme values. It now changes the underlying input color to the scheme and not back to the input value it had when we cancel color editing. We do not see this faulty change in the effective theme, but if we change theme modifiers, we no longer have the original input color. If we show the input colors, we can easily observe this bug. This bug is not new, it has existed a long time.
...
- This is a bug in the Playground app. It should reset them to the input values, not to the active ColorScheme values. It now changes the underlying input color to the scheme and not back to the input value it had when we cancel color editing. We do not see this faulty change in the effective theme, but if we change theme modifiers, we no longer have the original input color. If we show the input colors, we can easily observe this bug. This bug is not new, it has existed a long time.
Version 8.0.0-dev.1
Changelog
All changes to the FlexColorScheme (FCS) package are documented here.
8.0.0-dev.1
Oct 14, 2024
SUMMARY
Version 8.0.0 makes FlexColorScheme fully aligned with Flutter's MAJOR BREAKING Material-3 theming changes introduced in Flutter version 3.22. Due to Flutter 3.22 breaking many past Material styles, introducing new colors to ColorScheme
and deprecating three colors, FlexColorScheme had to undergo major revision and also break many of its past styles and some older APIs.
Most APIs are still there and work as before, but a few produce results that differ slightly from past ones, just like Flutter 3.22 also does over previous versions. Generally, the upgrade should be smooth, but you may need to review the produced theme result to see that you don't get any changes that don't fit with your design goals. Some past defaults have changed in FCS V8, but previous values are still available. You will need to enable them explicitly to get the same results as before. The purpose of these default value changes is to make FCS have less opinionated defaults, and be more aligned with Flutter's Material-3 design defaults. The Themes Playground app will still have some of its own opinionated defaults, done via default settings values the app uses in its default configuration, but the package Material-3 default starting points, are now much more aligned with Flutter's Material-3 defaults.
MIGRATION
The most critical changes to migrate from FlexColorScheme V7 to V8 are listed below. For a full list of all breaking changes, see PACKAGE CHANGES and the BREAKING part further below.
-
The flag
useMaterial3
now defaults totrue
inFlexColorScheme
andFlexThemeData
constructors. Set it tofalse
to explicitly use Material-2 theming. It defaulted to true before. Material-2 is still fully supported in FCS v8 and Flutter v3.24, but will eventually be deprecated in Flutter, when that happens, it will also happen in FCS.With the Themes Playground app, you can use a pre-configured Material-3 based theme that looks very similar to legacy Material-2 design. This will continue to be available also after Material-2 is deprecated in Flutter.
-
The
FlexSubThemesData
propertiesinteractionEffects
,tintedDisabledControls
,defaultUseM2StyleDividerInM3
andblendOnColors
now all default tofalse
. In previous versions they defaulted totrue
. If you before had not explicitly turned these propertiesfalse
, they were alltrue
by default. To get the same result as before in FCS V8, you now have to set these properties totrue
. This change was made to have fewer opinionated defaults in FCS to align it more with Flutter SDK default styles. -
The
FlexSubThemesData
propertynavigationRailLabelType
no default toNavigationRailLabelType.none
. To get the same result as before by default, you will need to set it toNavigationRailLabelType.all
. This change was made to have fewer opinionated defaults in FCS to align it more with Flutter SDK default styles. The Playground defaults it toNavigationRailLabelType.all
by adding this by default to new default themes. -
Since
ColorScheme.background
color was deprecated in Flutter 3.22.0 we can no longer use it as a part of surface blends and its modes. For example, whensurfaceMode
is set toFlexSurfaceMode.highBackgroundLowScaffold
it now uses surface and dialog blends set to 2x instead of 1x, so that it represents the "high background" style as before, but done via surface color. Without this breaking change, this mode would produce the same result asFlexSurfaceMode.levelSurfacesLowScaffold
and be redundant.- NOTE: You may want to check your surface mode and blends to see that they still look as you want them to, as they may have changed slightly depending on your configuration. We have tried to keep required changes subtle, you may not notice any difference, but it is good to check. These changes we forced by Flutter 3.22.0 deprecation of
ColorScheme
colorsbackground
,onBackground
andsurfaceVariant
.
- NOTE: You may want to check your surface mode and blends to see that they still look as you want them to, as they may have changed slightly depending on your configuration. We have tried to keep required changes subtle, you may not notice any difference, but it is good to check. These changes we forced by Flutter 3.22.0 deprecation of
This major release has many breaking changes forced via breaking changes in Flutter 3.22.0. Due to this, the release also uses this opportunity to clean up APIs with opinionated defaults, like the ones mentioned above. There are additional smaller and more subtle changes in defaults values, that align FCS to use the same color defaults from the new ColorScheme
colors, that Flutter started using in version 3.22.0 as well. You can find all the details below in the PACKAGE CHANGES chapter.
BACKGROUND
Flutter 3.22 introduced a large number of breaking changes to the ColorScheme
and default color mappings that Flutter's Material components use. In total, the Flutter 3.22.0 release adjusted 249 of its own internal tests to accommodate for new Material-3 spec changes, that all broke past Flutter Material-3 component styles. For a reference to the broken and updated tests, see this issue side comment.
FlexColorScheme V8 now allows you to use the new colors introduced in Flutter 3.22. As before, with FCS you can get fully defined hand-tuned ColorScheme
s without using Material-3 design's Material Color Utilities (MCU) based seed-generated ColorSchemes. You may prefer to use seed generated ColorSchemes with Material-3, but it is nice to know you do not have to.
To the seed generated ColorScheme
s, FCS adds support for all the Flutter DynamicSchemeVariant
seed generated variants. It also improves them by allowing you to use separate seed colors for each palette. With Flutter's ColorScheme.fromSeed
, you can only seed with one color, the primary color. The resulting ColorScheme
always uses computed values for secondary and tertiary palettes, plus a hard coded fixed color for the error palette seeding. Surfaces colors are always tied to primary color as well and include a hint of primary color. With FCS, you do not have these limitations, you can seed with separate colors for each palette with even with Flutter's own dynamic scheme variants. This was always possible with FlexColorScheme and its FlexSeedScheme (FSS) based FlexTones, seed generated scheme variants. FCS now brings this feature to Flutter's own dynamic scheme variants as well.
As before, FCS also has its own even configurable FlexTones
way of making seed generated ColorSchemes. Typically, you use predefined FlexTones
, but you can also create your own FlexTones
configurations. With it, you can define the chroma goals for each palette and define which tone is mapped to what ColorScheme
color. An internal example of using them is the implementation of FlexTones
modifiers.
FlexColorScheme V8 adds three new FlexTones
modifiers. The most useful one is called monochromeSurfaces()
. This tone modifier makes the surface shades of any used FlexTones
configuration use monochrome greyscale shades for the surface and surface variant palettes. It thus gives us greyscale colors for ALL surfaces, instead of primary-tinted ones. It can be applied to any FlexTones
seed generated scheme variant. The other new modifiers are expressiveOnContainer()
and higherContrastFixed()
. Check the API docs for more details.
TODOS BEFORE STABLE RELEASE
- TODO: Flutter 3.22 broke +150 tests in FCS 7.3.1, review and fix them after all updates.
- New features and adapting FCS to Flutter 3.22 also intentionally introduced more breakage. Currently, 309 tests of 2097 are broken.
- Update and review all tests. Add tests for new features. Get the FCS package back to 100% test coverage.
- Will release 8.0.0-dev releases without all test fixes and updates to them, to test the release WEB build and offer them as early access.
- TODO: Study and potentially report 14 found new Flutter SDK theming issues. Report if not already existing and if they are still issues after check on master using a simple reproduction sample. Add issue GitHub links to known issue expands in the Playground and to package doc comments and code TODOs where relevant.
MINOR KNOWN ISSUES
-
Package: The
toScheme
method may need some updates for the rawFlexColorScheme?
constructor to not provide surprises- Theming and
toScheme
works as intended with light/dark factories. This update would only be for a better raw constructor result. The raw constructor is not supposed to be used directly, so any gaps are not really that relevant.
- Theming and
-
Playground: Cancelling input colors from custom theme get reset to active ColorScheme, not to input values.
- This is a bug in the Playground app. It should reset them to the input values, not to the active ColorScheme values. While this kind of buggy behavior is a bit easier to understand visually, it does change the underlying input color to the scheme and not back to its input it had when we cancel. We do not see this faulty change in the effective theme, but if we change theme modifiers, we no longer have the original input color. If we show the input colors, we can more easily observe this bug.
COMPLETED CRITICAL CHANGES
- DONE: Consider what to do with surfaceTint removal.
- It is basically obsolete now in Flutter 3.22 and later.
- Will keep it around for now, but added info about it being obsolete in Flutter 3.22 or later, in its info-expands.
- DONE: Consider what to do with shadows back.
- Keep and add more fine-grained control later, via shadow color selection per component.
- DONE: Generate full ColorScheme in Themes Playground, also when not seeding. Need all "fixed" and "fixedDim" colors.
- This was tricky, big rework and new features.
- DONE: Figure out how to handle background not existing in ColorScheme; it was critical in FCS for its surface blends....
Version 7.3.1
7.3.1
August 17, 2023
- FIX: Themes Playground: Update the in-app documentation of known Flutter issues to reflect changes brought by Flutter 3.13.
- FIX: Changelog 7.3.0 typos and style corrections by @TahaTesser.
Version 7.3.0
7.3.0
August 16, 2023
This release uses new features in Material-3 theming that are only available in Flutter 3.13 or later. It thus requires minimum Flutter 3.13.0.
In the next Flutter stable release after 3.13, Flutter will change the ThemeData.useMaterial3
default from false
to true. In other words, applications using FCS will get the Material-3 colors, text styles, and other visuals, by default. The FlexColorScheme
API will then be following along with this breaking change. In this release the FlexColorScheme
API useMaterial3
still defaults to false
. The Themes Playground app has for quite some time already defaulted to setting the value to true
. Which is also already the case in Flutter when you create a new application with flutter create
.
PACKAGE
NEW
-
To
FlexSubThemes
inbuttonTheme
added boolalignedDropdown
. -
To
FlexSubThemesData
added boolalignedDropdown
. Setting it to true improves the style of theDropdownButton
and theDropdownButtonForField
. They no longer expand outside the width of the parent dropdown button but are kept size aligned with it. -
To
FlexSubThemes
in:chipTheme
added TextStylesecondaryLabelStyle
dialogTheme
added TextStyletitleTextStyle
andcontentTextStyle
floatingActionButtonTheme
added TextStyleextendedTextStyle
menuButtonTheme
added TextStyletextStyle
snackBarTheme
added TextStylecontentTextStyle
timePickerTheme
added TextStyledayPeriodTextStyle
,dialTextStyle
,helpTextStyle
andhourMinuteTextStyle
toggleButtonsTheme
added TextStyletextStyle
-
The
TextStyle
additions above, to mentionedFlexSubThemes
, do not yet bring any new features usable viaFlexColorScheme
theming APIs. They are a preparation for adding more componentTextStyles
toFlexSubThemesData
. This in turn, will enable more directTextStyle
theming viaFlexColorScheme
API without usingcopyWith
to override producedThemeData
. -
As planned in previous versions, made the
FlexSubThemesData.useInputDecoratorThemeInDialogs
apply also toDatePickerDialog
and not only toTimePickerDialog
. This feature is not optimally supported by the framework. The current implementation has severe limitations. See more info in PR #128950 comment. For more information about the differences in howInputDecorationTheme
behaves in different component themes, read the proposal "Make InputDecorationTheme usage in components consistent" in issue #131666.
CHANGE
- Minor style breaking changes:
FlexSubThemes.dropdownMenuTextStyle
now default toTextTheme.bodyLarge
if not defined. Previously it used Flutter SDK defaultTextTheme.bodyLarge
, which is a poor design default as the style does not fit with default stylebodyLarge
used as default style inTextField
in M3 mode. See issue #131350 that contains a mention of this style deviant. In Jetpack compose, theDropdownMenu
and itsTextField
part correctly defaults to usingbodyLarge
, this is thus assumed to be the correct spec wise. The issue of wrong default text styles in Flutter menus is further discussed in issue #131676. FlexColorScheme will not internally correct the wrong defaultTextStyle
on menu items, it will however change to follow the default when Flutter stable does. The difference in theDropdownMenu
text input field was however significant enough to warrant a change already before the fix lands in Flutter stable.
FIX
-
Fixed the
FlexSubThemes.checkboxTheme
that broke due to an unexpected breaking change in Flutter 3.13 caused by PR #125643. The breaking change is discussed further in issue #130295. The fix to the checkbox theme incorporates the new behavior to keep its custom styling working as before and expected. -
Fixed
useInputDecoratorThemeInDialogs
not working for some properties in theInputDecorator
, when the value was null orfalse
, where some properties in theTextField
s in theTimePickerDialog
did not revert back to default styles. Now they do, but via hard defined values to mimic the default M3 style, as that is the only way to get back to it when a very customthemeData.inputDecoratorTheme
is being used.
THEMES PLAYGROUND
NEW
-
The PopupMenu and Dropdowns panel got a setting for older Material-2 based
DropdownButtonFormField
andDropdownButton
to set the new alignment property, which is an ancient theming property in the oldButtonThemeData
that was used by deprecated and removed Material Buttons, but the theme is still used by these buttons. -
On the TextField panel, added a feature to set the input decoration style back to FlexColorScheme's own defaults.
CHANGE
-
Harmonized custom color activation settings on Theme Colors and Seeded ColorScheme.
-
Removed old switch in custom colors in dark mode, that was used to enable using input scheme color as own seed colors in dark mode when using custom colors. For simplicity, the custom dark mode colors have been used directly as seed colors in a few releases in the Playground already. The control was an old left-over with no function anymore.
-
The global themed input decorator usage is now on by default for
TimePickerdialog
andDatePickerdialog
. This is the only style currently supported forDatePickerDialog
in Flutter, so it makes sense to keep it on by default. Turning it OFF for now only removes the custom, input decorator style from theTimePickerDialog
. Despite the new feature in Flutter SDK, it cannot be removed from theDatePickerDialog
. This is discussed in PR #128950 comment. Additional info is also available in Flutter issue #131666.
FIX
- Fixed the old default color info for the toggles Switch, Checkbox and Radio, that are shown when FlexColorScheme is disabled as default values in Material 2 dark mode. They have been updated in Flutter SDK to
ColorScheme.secondary
color and are no longer not the horrid dark mode teal color. This default color info, shown when FlexColorScheme is disabled in the Themes Playground, had not been updated for the dark M2 mode Switch, Checkbox and Radio colors.
Version 7.2.0
7.2.0
July 20, 2023
PACKAGE
NEW
- Added boolean property
switchThumbFixedSize
toFlexSubThemesData
. When set to true, the Material-3Switch
themed thumb size is same size whenSwitch
is ON and OFF. When the property value is false or undefined, it retains its default behavior and the thumb is smaller when the switch is OFF. Only has any impact in Material-3 mode. - Added
FlexAdaptive
propertyadaptiveRemoveNavigationBarTint
toFlexSubThemesData
. It is used to control platform adaptive elevation tint removal on theNavigationBar
theme. - Added
textSelectionTheme
toFlexSubThemes
, used to make aTextSelectionThemeData
. - Added properties
inputCursorSchemeColor
,inputSelectionSchemeColor
,inputSelectionOpacity
, andinputSelectionHandleSchemeColor
, toFlexSubThemesData
used to configureTextSelectionThemeData
as a part ofFlexColorScheme.subThemesData
. - Added a new feature that enables platform adaptive Material ink selection via
adaptiveSplash
aFlexAdaptive
property, and theFlexSplashType
valuessplashType
andsplashTypeAdaptive
inFlexSubThemesData
. - FlexColorScheme got the
splashFactory
property, which can be used to override any splash type setting inFlexSubThemesData
. This addition also removes the need to do a copy with onThemeData
to provide a customsplashFactory
. Prefer using theFlexSubThemesData
propertiessplashType
andsplashTypeAdaptive
to control the selection of used ink factory together withadaptiveSplash
, unless you have written a custom ink factory that you want to use, in which case using thesplashFactory
override is appropriate. - New feature that enable platform adaptive theming of border radius on dialogs via
adaptiveDialogRadius
aFlexAdaptive
property and doubledialogRadiusAdaptive
inFlexSubThemesData
. - Added tinted disable support when
FlexSubThemesData.tintedDisabledControls
istrue
toFilledButton
andFilledButton.tonal
. They have the same disabled style when not tinted, so we can do the same to their tinted variants. Even if we still cannot theme them to have different themed colors when enabled, due to issue #118063, we can still theme their disabled state with tint when the option is used. - Added tinted disable support when
FlexSubThemesData.tintedDisabledControls
istrue
toIconButton
,IconButton.filled
,IconButton.filledTonal
andIconButton.outlined
foreground colors. They have the same disabled foreground style when not tinted, so we can do the same to their tinted foreground color variants. We still cannot theme them to have different themed background colors when disabled, or at all when enabled, due to issue #118063. We can only theme their disabled foreground color state with tint when the option is used.
CHANGE
-
Updated to use version 1.4.0 of FlexSeedScheme offering two new
FlexTones
and extended tonal palette. -
Minor style breaking changes:
-
Removed elevation tint impact of general
FlexSubThemesData.adaptiveRemoveElevationTint
setting, from theNavigationBar
component. It instead has its own setting inFlexSubThemesData.adaptiveRemoveNavigationBarTint
, that can be used independently of the general tint removal setting. This was done since it may be preferred to not remove the elevation tint from theNavigationBar
, even when otherwise doing so on selected platforms. -
In M2 mode, when not using sub-theme,
ThemeData.textSelectionTheme
it now gets a defaultTextSelectionThemeData()
and its themed style defaults to SDK defaults. Enable and use sub-themes and its new theming features to style it further.- In previous versions in M2 mode, text selection handles used
Theme.of(context).primaryColorDark
, even when sub-themes where not enabled. They still do by default, but only when sub-themes are enabled.
- In previous versions in M2 mode, text selection handles used
-
In both M2 and M3 mode
bottomNavigationBarElevation
inFlexSubThemesData
andelevation
inFlexSubThemes.bottomNavigationBar
when undefined, now default to elevation 3, giving theBottomNavigationBar
a default elevation of 3 when using FlexColorScheme.- Previously default elevation was zero. Flutter SDK defaults to 8. The FlexColorScheme opinionated default value was changed to 3 to make it equal to the default elevation of
NavigationBar
in M3 mode, so that the bottom navigators share same default elevation when using FlexColorScheme. As before, you can adjust the elevation as needed with the API and in the Themes Playground.
- Previously default elevation was zero. Flutter SDK defaults to 8. The FlexColorScheme opinionated default value was changed to 3 to make it equal to the default elevation of
-
In M2 mode
navigationBarElevation
inFlexSubThemesData
andelevation
inFlexSubThemes.navigationBarTheme
when undefined, now default to elevation 3, giving theNavigationBar
a default elevation of 3 in M2 mode when using FlexColorScheme.- Previously default elevation was zero. Flutter SDK defaults to 0. The FlexColorScheme opinionated default value was changed to 3 to make it equal to the default elevation of
NavigationBar
in M3 mode, so that the bottom navigators share same default elevation when using FlexColorScheme. As before, you can adjust the elevation as needed with the API and in the Themes Playground.
- Previously default elevation was zero. Flutter SDK defaults to 0. The FlexColorScheme opinionated default value was changed to 3 to make it equal to the default elevation of
-
In M2 mode,
bottomAppBarElevation
when undefined, now also remains undefined inFlexSubThemes.bottomAppBarTheme
causing default elevation in M2 mode to become 8 like in the SDK default for M2.- Previous default used same elevation as
AppBar
, whenbottomAppBarElevation
was undefined, or 0 ifAppBar
's elevation was also undefined. The rationale for removal of this default behavior is to start cleaning out opinionated behavior that no longer makes sense to keep around, especially since eventually M2 mode is going away in Flutter. - The default for M3 mode is unchanged, using elevation 3, via SDK defaults when undefined.
- Previous default used same elevation as
-
In M2 mode,
ElevatedButton
,FilledButton
,FilledButton.tonal
,OutlinedButton
,TextButton
andToggleButtons
now default to border radius 40 dp. Previously they defaulted to 20 dp. Their style is intended to match the used Stadium border design in M3, which is still the default in M3 mode. When using very tall buttons, the 20 dp default value was not enough to keep the buttons looking Stadium shaped as intended in FCS M2 mode.
FIX
- Fixed that
TextSelectionThemeData
did not automatically use colors that matched and followedsubThemes.inputDecoratorSchemeColor
when it was modified and text selection colors were not explicitly defined. The text selection, cursor and text selection handles should follow the input decoration's base color by default when they are not defined separately. Defining text selection colors was not possible before version 7.2.0, but defining input decoration colors was, but text selection remained using primary. Now they by default follow the input decoration color, but can also be separately defined via new features in version 7.2.0.- Known limitation: Text selection handles on iOS platform cannot be changed with a theme from
primary
color. So on iOS their themed color is alwayscolorScheme.primary
. The text selection color and cursor color do follow the theme also on iOS.
- Known limitation: Text selection handles on iOS platform cannot be changed with a theme from
- Fixed
useFlutterDefaults
when elevation is null inFlexSubThemes.bottomNavigationBar
not using Flutter SDK default elevation of 8. - Added a built-in theme fix to make the elevation tint change in the
AppBar
animate when it changes. Based on Material spec and observed native Android behavior and compose behavior, theAppBar
color change when it is scrolled under should animate. Flutter M3 apps do not do this, the color change is instant. Discovered a theme workaround that makes it animate. This is now always used in FCS themes until Flutter includes its own fix for it. - The
FlexSubThemes.menuButtonTheme
and theMenuButtonThemeData
it makes, got astyle
value, whereButtonStyle.animationDuration
is alwaysDuration.zero
. This solved the issue reported in issue #123615. Consequently, there is no need for a fix for the issue, since it could be solved with a theme property.
THEMES PLAYGROUND
NEW
- In the Switch Check Radio panel, the
Switch
got a setting to control if thumb is fixed sized or not. - The
NavigationBar
got its own setting for elevation tint removal in light and dark mode. - Introduction text updated. New information about Material-3 design becoming the default in Flutter SDK soon added, and that Material-2 will be deprecated.
- Added text selection theming to the Text Field panel. By default, cursor color, text selection color and text selection handles, default to following the input decorator default color or its selected color. The cursor color, text selection, and text selection handle colors, can also be overridden and defined separately. These settings for light and dark mode, have their own property values in the Playground.
- Added support for selecting a custom ink splash effect and another custom platform adaptive splash effect on selected other platforms.
- Added support for configuring the used VisualDensity. When using mock platform setting in the Playground, it also affects the result of used setting when
VisualDensity.adaptivePlatformDensity
,FlexColorScheme.comfortablePlatformDensity
or default undefined value, that falls back toVisualDensity.adaptivePlatformDensity
, are used. - Added support for selecting and using
FlexTones.candyPop
andFlexTones.chroma
. - Added support for making any seed strategy use tone 100 (white) or tone 0 (black) as resulting surface and background tones.
- Added an option to show the new extended tonal palette tones to the seeded color scheme panel.
- Shape and radius now have their own theming topic panel, removed radius from Component Themes topic.
- Add adaptive border...
Version 7.1.2
7.1.2
May 17, 2023
PACKAGE
FIX
- SubThemes ElevatedButton in M3 mode, when using
elevatedButtonSecondarySchemeColor
and there was no value defined onelevatedButtonSchemeColor
it resulted in wrong color being used as default forelevatedButtonSchemeColor
. Issue and test fixed.
CHORE
- Updated Android runner included for all the examples. The previous one no longer worked with Flutter 3.10, and its used Kotlin version. With included updated version, the examples can be built as Android apps again.
Version 7.1.1
7.1.1
May 15, 2023
PACKAGE
FIX
- Fixed regression issue where custom a
textTheme
's color is no longer applied.- See issue #151.
- The issue was introduced in version 7.0.0, when adding a feature that provided automatic correct default contrast text color for GoogleFonts, when a default
GoogleFonts
and itsTextTheme
, likeGoogleFonts.notoSansTextTheme()
is used intextTheme
orprimaryTextTheme
inFlexColorScheme
. - The
GoogleFonts
and itstextTheme
color always defaults to the color from M2 mode default light modeThemeData.light().textTheme
. This when used inThemeData
forces users to assign correct M2/M3 color andtextTheme
/primaryTextTheme
contrast color, to all its styles, whenever used in a situation where the default is light theme mode M2 color is the wrong color. The default contrast color is basically only correct for a light theme when using Material 2. For anything else, it is incorrect. - FCS version 7.0.0 got rid of the need to make such correction assignment, but it also incorrectly disabled using custom colors used in any custom
TextTheme
. - The applied FIX keeps the desired "no need to give correct contrast color" to a default GoogleFonts
TextTheme
in FlexColorScheme and also allows making custom colored text custom text themes. - The FIX is a bit involved, it also led to an idea that maybe
GoogleFonts
, should just keep the font color default as null, and let Flutter's default Theme behavior handle the assignment of correct color for the M2/M3 mode and light/dark theme mode, using each mode's default contrast color, for each style in theTextTheme
. See issue GoogleFonts #401 for more info on this. - Tests added for the regression and for the new
GoogleFonts
defaultTextTheme
being used and nulling its colors, so they get correct M2/M3 mode default contrast colors in both light and dark mode and for bothtextTheme
andprimaryTextTheme
.
THEMES PLAYGROUND
FIX
- Fixed the code gen for
useTextTheme
setting to always generate code for setting's value in Playground code gen when it is not null. When it is undefined or null, it means that theTextTheme
follows the M2/M3 specification mode defaultTextTheme
andTypography
. In previous versions, the code setting foruseTextTheme
only showed up in the generated code when it was needed to produce the viewed end result. If the M2/m3 mode default produced the same result, the setting was not added to the generated API config. This may be confusing. It is clearer to always show it in code gen when it is set to a none null value. See discussion in repo Q&A #150.
Version 7.1.0
7.1.0
May 12, 2023
FlexColorScheme v7.1.0 supports new theming features in Flutter 3.10, it thus requires minimum Flutter 3.10 and Dart 3.0.
NEW
- Added support for "bring shadows back" adaptive theming feature to
BottomAppBar
andBottomSheet
. - Added
datePickerTheme
toFlexSubThemes
. - Added properties
datePickerDialogRadius
anddatePickerHeaderBackgroundSchemeColor
toFlexSubThemesData
.
CHANGE
- Updated to use minimum
flex_seed_scheme ^1.3.0
. This version, no longer depends onmaterial_color_utilities
, thus avoiding all version issues and conflicts when Flutter changes what breaking version ofmaterial_color_utilities
it uses on different channels and versions.
THEMES PLAYGROUND
- Themes Playground 7.1 for FlexColorScheme 7.1 can be found here.
-
NEW
- Added selection of themed header color scheme color for the DatePickerDialog on the Dialogs panel.
- Added showing SearchBar with SearchView to the AppBar panel.
- Added showing SearchBar with SearchView to the Widget Showcase.
-
UPDATE
- Reviewed and updated status of all known theming issues in info expands.
- The SKIA canvaskit renderer is again being used to build all the web examples, including the Themes Playground.
- Updated all examples to use new
ListenableBuilder
instead ofAnimatedBuilder
where appropriate.
Version 7.0.5
7.0.5
Apr 29, 2023
- Fix: #143 Glitches in highlighting effect on mouse hover over
FlexThemeModeSwitch
andFlexThemeModeOptionButton
.
Version 7.1.0-dev.1
7.1.0-dev.1
Apr 24, 2023
This beta-1 of FlexColorScheme v7.1.0. It is a dev release using Flutter 3.10 beta channel. It requires Flutter version 3.10.0-1.3.pre or later. This beta version is a first preparation version of FlexColorScheme for the next stable Flutter release after version 3.7.x.
NEW
- Added
datePickerTheme
toFlexSubThemes
. - Added properties
datePickerDialogRadius
anddatePickerHeaderBackgroundSchemeColor
toFlexSubThemesData
.
THEMES PLAYGROUND
-
NEW
- Added selection of themed header color scheme color for the DatePickerDialog on the Dialogs panel.
- Added showing SearchBar with SearchView to the AppBar panel.
- Added showing SearchBar with SearchView to the Widget Showcase.
-
UPDATE
- Reviewed and updated status of all known theming issues in info expands.
-
SKIA
- The SKIA canvaskit renderer is again being used to build all the web examples, including the Themes Playground.
- The beta-1 version of Themes Playground 7.1 for FCS 7.1 can be tested here.