A Flutter package to make and use beautiful color scheme based themes.
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
in buttonTheme
added bool alignedDropdown
.
To FlexSubThemesData
added bool alignedDropdown
. Setting it to true improves the style of the DropdownButton
and the DropdownButtonForField
. They no longer expand outside the width of the parent dropdown button but are kept size aligned with it.
To FlexSubThemes
in:
chipTheme
added TextStyle secondaryLabelStyle
dialogTheme
added TextStyle titleTextStyle
and contentTextStyle
floatingActionButtonTheme
added TextStyle extendedTextStyle
menuButtonTheme
added TextStyle textStyle
snackBarTheme
added TextStyle contentTextStyle
timePickerTheme
added TextStyle dayPeriodTextStyle
, dialTextStyle
, helpTextStyle
and hourMinuteTextStyle
toggleButtonsTheme
added TextStyle textStyle
The TextStyle
additions above, to mentioned FlexSubThemes
, do not yet bring any new features usable via FlexColorScheme
theming APIs. They are a preparation for adding more component TextStyles
to FlexSubThemesData
. This in turn, will enable more direct TextStyle
theming via FlexColorScheme
API without using copyWith
to override produced ThemeData
.
As planned in previous versions, made the FlexSubThemesData.useInputDecoratorThemeInDialogs
apply also to DatePickerDialog
and not only to TimePickerDialog
. 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 how InputDecorationTheme
behaves in different component themes, read the proposal "Make InputDecorationTheme usage in components consistent" in issue #131666.
CHANGE
FlexSubThemes.dropdownMenuTextStyle
now default to TextTheme.bodyLarge
if not defined. Previously it used Flutter SDK default TextTheme.bodyLarge
, which is a poor design default as the style does not fit with default style bodyLarge
used as default style in TextField
in M3 mode. See issue #131350 that contains a mention of this style deviant. In Jetpack compose, the DropdownMenu
and its TextField
part correctly defaults to using bodyLarge
, 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 default TextStyle
on menu items, it will however change to follow the default when Flutter stable does. The difference in the DropdownMenu
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 the InputDecorator
, when the value was null or false
, where some properties in the TextField
s in the TimePickerDialog
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 custom themeData.inputDecoratorTheme
is being used.
THEMES PLAYGROUND
NEW
The PopupMenu and Dropdowns panel got a setting for older Material-2 based DropdownButtonFormField
and DropdownButton
to set the new alignment property, which is an ancient theming property in the old ButtonThemeData
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
and DatePickerdialog
. This is the only style currently supported for DatePickerDialog
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 the TimePickerDialog
. Despite the new feature in Flutter SDK, it cannot be removed from the DatePickerDialog
. This is discussed in PR #128950 comment. Additional info is also available in Flutter issue #131666.
FIX
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.July 20, 2023
PACKAGE
NEW
switchThumbFixedSize
to FlexSubThemesData
. When set to true, the Material-3 Switch
themed thumb size is same size when Switch
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.FlexAdaptive
property adaptiveRemoveNavigationBarTint
to FlexSubThemesData
. It is used to control platform adaptive elevation tint removal on the NavigationBar
theme.textSelectionTheme
to FlexSubThemes
, used to make a TextSelectionThemeData
.inputCursorSchemeColor
, inputSelectionSchemeColor
, inputSelectionOpacity
, and inputSelectionHandleSchemeColor
, to FlexSubThemesData
used to configure TextSelectionThemeData
as a part of FlexColorScheme.subThemesData
.adaptiveSplash
a FlexAdaptive
property, and the FlexSplashType
values splashType
and splashTypeAdaptive
in FlexSubThemesData
.splashFactory
property, which can be used to override any splash type setting in FlexSubThemesData
. This addition also removes the need to do a copy with on ThemeData
to provide a custom splashFactory
. Prefer using the FlexSubThemesData
properties splashType
and splashTypeAdaptive
to control the selection of used ink factory together with adaptiveSplash
, unless you have written a custom ink factory that you want to use, in which case using the splashFactory
override is appropriate.adaptiveDialogRadius
a FlexAdaptive
property and double dialogRadiusAdaptive
in FlexSubThemesData
.FlexSubThemesData.tintedDisabledControls
is true
to FilledButton
and FilledButton.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.FlexSubThemesData.tintedDisabledControls
is true
to IconButton
, IconButton.filled
, IconButton.filledTonal
and IconButton.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 the NavigationBar
component. It instead has its own setting in FlexSubThemesData.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 the NavigationBar
, even when otherwise doing so on selected platforms.
In M2 mode, when not using sub-theme, ThemeData.textSelectionTheme
it now gets a default TextSelectionThemeData()
and its themed style defaults to SDK defaults. Enable and use sub-themes and its new theming features to style it further.
Theme.of(context).primaryColorDark
, even when sub-themes where not enabled. They still do by default, but only when sub-themes are enabled.In both M2 and M3 mode bottomNavigationBarElevation
in FlexSubThemesData
and elevation
in FlexSubThemes.bottomNavigationBar
when undefined, now default to elevation 3, giving the BottomNavigationBar
a default elevation of 3 when using FlexColorScheme.
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.In M2 mode navigationBarElevation
in FlexSubThemesData
and elevation
in FlexSubThemes.navigationBarTheme
when undefined, now default to elevation 3, giving the NavigationBar
a default elevation of 3 in M2 mode when using FlexColorScheme.
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.In M2 mode, bottomAppBarElevation
when undefined, now also remains undefined in FlexSubThemes.bottomAppBarTheme
causing default elevation in M2 mode to become 8 like in the SDK default for M2.
AppBar
, when bottomAppBarElevation
was undefined, or 0 if AppBar
'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.In M2 mode, ElevatedButton
, FilledButton
, FilledButton.tonal
, OutlinedButton
, TextButton
and ToggleButtons
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
TextSelectionThemeData
did not automatically use colors that matched and followed subThemes.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.
primary
color. So on iOS their themed color is always colorScheme.primary
. The text selection color and cursor color do follow the theme also on iOS.useFlutterDefaults
when elevation is null in FlexSubThemes.bottomNavigationBar
not using Flutter SDK default elevation of 8.AppBar
animate when it changes. Based on Material spec and observed native Android behavior and compose behavior, the AppBar
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.FlexSubThemes.menuButtonTheme
and the MenuButtonThemeData
it makes, got a style
value, where ButtonStyle.animationDuration
is always Duration.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
Switch
got a setting to control if thumb is fixed sized or not.NavigationBar
got its own setting for elevation tint removal in light and dark mode.VisualDensity.adaptivePlatformDensity
, FlexColorScheme.comfortablePlatformDensity
or default undefined value, that falls back to VisualDensity.adaptivePlatformDensity
, are used.FlexTones.candyPop
and FlexTones.chroma
.IconButton
styles.CHANGE
FIX
BottomNavigationBar
and NavigationBar
when useFlutterDefaults
is true (ON).NavigationBar
when default undefined background color is used.POSTPONED
May 17, 2023
PACKAGE
FIX
elevatedButtonSecondarySchemeColor
and there was no value defined on elevatedButtonSchemeColor
it resulted in wrong color being used as default for elevatedButtonSchemeColor
. Issue and test fixed.CHORE
May 15, 2023
PACKAGE
FIX
textTheme
's color is no longer applied.
GoogleFonts
and its TextTheme
, like GoogleFonts.notoSansTextTheme()
is used in textTheme
or primaryTextTheme
in FlexColorScheme
.GoogleFonts
and its textTheme
color always defaults to the color from M2 mode default light mode ThemeData.light().textTheme
. This when used in ThemeData
forces users to assign correct M2/M3 color and textTheme
/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.TextTheme
.TextTheme
in FlexColorScheme and also allows making custom colored text custom text themes.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 the TextTheme
. See issue GoogleFonts #401 for more info on this.GoogleFonts
default TextTheme
being used and nulling its colors, so they get correct M2/M3 mode default contrast colors in both light and dark mode and for both textTheme
and primaryTextTheme
.THEMES PLAYGROUND
FIX
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 the TextTheme
follows the M2/M3 specification mode default TextTheme
and Typography
. In previous versions, the code setting for useTextTheme
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.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
BottomAppBar
and BottomSheet
.datePickerTheme
to FlexSubThemes
.datePickerDialogRadius
and datePickerHeaderBackgroundSchemeColor
to FlexSubThemesData
.CHANGE
flex_seed_scheme ^1.3.0
. This version, no longer depends on material_color_utilities
, thus avoiding all version issues and conflicts when Flutter changes what breaking version of material_color_utilities
it uses on different channels and versions.THEMES PLAYGROUND
NEW
UPDATE
ListenableBuilder
instead of AnimatedBuilder
where appropriate.Apr 29, 2023
FlexThemeModeSwitch
and FlexThemeModeOptionButton
.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
datePickerTheme
to FlexSubThemes
.datePickerDialogRadius
and datePickerHeaderBackgroundSchemeColor
to FlexSubThemesData
.THEMES PLAYGROUND
NEW
UPDATE
SKIA
Apr 19, 2023
FlexThemeModeSwitch
and FlexThemeModeOptionButton
.