A Flutter package to make and use beautiful color scheme based themes.
OTHER License
Bot releases are visible (Hide)
August 17, 2023
Published by rydmike about 1 year ago
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.Published by rydmike over 1 year ago
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
Published by rydmike over 1 year ago
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
Published by rydmike over 1 year ago
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.Published by rydmike over 1 year ago
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.Published by rydmike over 1 year ago
Apr 29, 2023
FlexThemeModeSwitch
and FlexThemeModeOptionButton
.Published by rydmike over 1 year ago
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
Published by rydmike over 1 year ago
Apr 22, 2023
Published by rydmike over 1 year ago
Apr 19, 2023
FlexThemeModeSwitch
and FlexThemeModeOptionButton
.Published by rydmike over 1 year ago
Apr 16, 2023
flex_seed_scheme: ^1.2.4
that depends on material_color_utilities
with version constraint set to >=0.2.0 <0.4.0
from ^0.2.0
.
Published by rydmike over 1 year ago
Apr 6, 2023
Published by rydmike over 1 year ago
Apr 2, 2023
This is a major update to the FlexColorScheme package and a substantial leap for the companion app Themes Playground. For a detailed list of all changes, please refer to the incremental log from its development release linked below.
Changes from 7.0.0-dev.3 to 7.0.0
The Themes Playground app built for this release is unfortunately not a SKIA renderer build, it is using the HTML renderer. This makes it less performant than the app would otherwise be. Additionally, scaled content, like the Themes Simulator panel in the Playground, is also fuzzier than it would be with the SKIA renderer. Due to an issue in Flutter stable 3.7.0 to at least 3.7.9, builds made with the SKIA renderer performs very poorly and crash quickly. For more information, see Flutter issue #122189. A new build using the same package version will be made later and released when a fix for the SKIA issues are available on the Flutter stable channel.
Published by rydmike over 1 year ago
Mar 18, 2023
This is the final beta v7 release before stable v7. There will be no new features or API changes in the FlexColorScheme package from this version to stable version 7.0.0. The only changes to stable will be potential bug fixes, typo corrections, API doc comment improvements and adding more tests.
The companion app Themes Playground, may get label improvements plus spelling and grammar corrections. Layouts in it may also be modified and improved as needed. It will not get any new features, but it may of course receive bug fixes.
The Themes Playground app built for this beta release is unfortunately not a SKIA renderer build, it is using the HTML renderer. This makes it less performant than the app would otherwise be. Additionally, scaled content, like the Themes Simulator panel in the Playground, is also fuzzier than it would be with the SKIA renderer. Due to an issue in Flutter stable (3.7.7), builds made with the SKIA renderer performs very poorly and crashes quite quickly. For more information see Flutter issue #122189. Hopefully, before the stable v7.0.0 release, a fix will be available. If not, a new build using the same package version will be made later and released when a fix is available.
FIX
Fixed bug in legacy theme secondary and tertiary color swapping when using seed generated ColorScheme. In dark mode, combining legacy swapping and seed generation did not swap secondary and tertiary colors for schemes where it should do so. This is now fixed. If seed generation was not used, the swapping worked correctly in dark mode. In light mode it worked correctly also when seed generated schemes were used. The swapLegacyOnMaterial3
feature was introduced in version 6.1.0, it has had this bug for this case since it was introduced.
Fixed bug where FlexSubThemes.drawerTheme
was using BorderRadiusDirectional.horizontal
with end
radius instead of start
radius as its endShape
. This bug was introduced by version 7.0.0-dev.1 and has not been in any stable version.
The FlexThemeModeOptionButton
now correctly displays its hoverColor
, previously it was obscured by the colored boxes inside it.
The systemNavigationBarDividerColor issue #100027 in Flutter that in FCS v5 forced removing support for divider on the system navigation bar in Android, that was available via FlexColorScheme.themedSystemNavigationBar
has been fixed. The issue could no longer be observed on Android versions 8 to 13 on Flutter 3.7.7 stable. The divider has been enabled again, and its test setting is also available in the Themes Playground app again. The extra SystemUiOverlayStyle
call used as a work-around, for the same issue to fix an issue with Android 11, has also been removed, since the workaround was no longer needed.
Fixed a bug where when passing in a custom textTheme
or primaryTextTheme
, instead of defining text theme via fontFamily
, that FCS tinted text feature, via subThemesData.blendTextTheme
, was not being correctly applied to the custom text themes. This is now fixed. If subThemesData.blendTextTheme
is not being used, then the used Typography, either via subThemesData.useTextTheme
, or by using a custom FlexColorScheme.typography
override, always gets correct brightness for both textTheme
and primaryTextTheme
, regardless of brightness on passed in text themes. They also get the used Typography appropriate opacities on their text styles. In practice, this means that M2 style 2018 typography has opacity on some text styles, while M3 style 2021 typography, is fully opaque for all text styles.
NEW
Add: drawerIndicatorOpacity
to FlexSubThemesData
.
It controls the indicatorOpacity
property in the FlexSubThemes.navigationDrawerTheme
used to customize the opacity of used color on the NavigationDrawer
indicator.
Add: segmentedButtonUnselectedForegroundSchemeColor
to FlexSubThemesData
.
It controls the unselectedForegroundSchemeColor
property in the new FlexSubThemes.segmentedButtonTheme
used to customize the SegmentedButton
.
Add: usedColors
value 7.
In FlexColorScheme
and FlexThemeData
light/dark constructors, the usedColors
now accepts value 7. When used, the primary
, secondary
and tertiary
colors in the used input scheme, are used as defined, but primaryContainer
, secondaryContainer
and tertiaryContainer
are computed. This is FlexColorScheme's own more Material2 version of seed generation of the container colors by using their main colors as input colors.
Add: bottomAppBarTheme
, menuBarTheme
and menuButtonTheme
to FlexSubThemes
.
Add: inputDecoratorPrefixIconSchemeColor
, drawerWidth
, drawerIndicatorWidth
, drawerIndicatorRadius
, drawerIndicatorSchemeColor
, navigationBarIndicatorRadius
, navigationRailIndicatorRadius
, menuBarRadius
, menuBarElevation
, menuBarShadowColor
, snackBarActionSchemeColor
and bottomAppBarSchemeColor
to FlexSubThemesData
.
Add: menuRadius
, menuElevation
, menuOpacity
, menuSchemeColor
and dropdownMenuTextStyle
to FlexSubThemesData
.
Add: drawerSelectedItemSchemeColor
, drawerUnselectedItemSchemeColor
, tabBarIndicatorSize
, and tabBarDividerColor
to FlexSubThemesData
.
Add: Static helper function onSchemeColor
to FlexSubThemes
.
Add: To FlexThemeModeOptionButton
added properties semanticLabel
, focusColor
and setFocusOnTap
. If setFocusOnTap
is set to true, the button will request focus when it is tapped. Display of previously not shown hover and focus effects where fixed, they now correctly use hoverColor
and the new focusColor
.
Add: Property snackBarRadius
to FlexSubThemesData
, it controls the border radius via FlexSubThemes.snackBarTheme
by using its radius
property.
Add: Properties tabBarUnselectedItemSchemeColor
, tabBarUnselectedItemOpacity
, tabBarIndicatorWeight
and tabBarIndicatorTopRadius
to FlexSubThemesData
.
Add: New configuration class FlexAdaptive
used to configure on which platforms adaptive theming features are used. Including 100% unit test coverage for the new class.
Add: Four new FlexSubThemesData
properties that uses the FlexAdaptive
configuration class, to configure the features adaptiveRemoveElevationTint
, adaptiveElevationShadowsBack
, adaptiveAppBarScrollUnderOff
and adaptiveRadius
. The adaptiveRadius
controls if the defaultRadiusAdaptive
is used as value for effective global border radius instead of defaultRadius
.
Add: Seven new FlexSubThemesData
properties menuBarBackgroundSchemeColor
, menuPadding
, menuItemBackgroundSchemeColor
, menuItemForegroundSchemeColor
, menuIndicatorBackgroundSchemeColor
, menuIndicatorForegroundSchemeColor
and menuIndicatorRadius
.
Add: Boolean property useInputDecoratorThemeInDialogs
to FlexSubThemesData
. Used to control if the application's themed input decoration is used or not, on time picker dialog theme text input fields. If not used, the time picker dialog uses null as input to its input decorator, in order to get the Flutter time picker default style. This toggle will also be used on date picker when/if it gets supported.
CHANGE
Style breaking: FlexSubThemes.blendTextTheme
defaults to false.
In FCS before version 7, the default for blendTextTheme
in FlexSubThemes
was true, and blended text themes were used by default. Going forward if you want it, and also if you had not defined earlier and do not want to break your apps past style, set blendTextTheme
to true.
Style breaking: Card
elevation default 1 dp.
The Card
opinionated sub-theme now defaults to null elevation, resulting in same default of 1 dp elevation as Flutter SDK in both M2 and M3 mode. Previously, FCS defaulted to elevation 0 dp on Cards
when opting in on sub-themes.
Style breaking: ColorScheme.outline
and ColorScheme.outlineVariant
.
The FCS built-in computed none seeded values for ColorScheme.outline
and ColorScheme.outlineVariant
were modified. The new values are more in line with what you get with the M3 default seed algorithm, but plain grey-scale variants of them without any primary color blend. Technically light mode color for outline
was changed from 30% lighten of light mode onBackground
color to 45%, and outlineVariant
from 60% lighten of onBackground
to 75%. Likewise for the dark mode, but with darkening of the onBackground
with the same percentage changes. The new values match the M3 design intent better.
Style breaking: lightSurfaceVariant
and darkSurfaceVariant
.
FCS v7 introduces FlexColor.lightSurfaceVariant
and FlexColor.darkSurfaceVariant
colors that are used when making none-seeded ColorSchemes. The colors are plain not tinted light and greys, matching the grey level of the tinted versions you get with seed-generated M3 colors. The colors are used as defaults for light and dark surfaceVariant
color in none-seeded versions of generated FlexColorScheme color schemes. In previous versions surfaceVariant
was just white and black in light and dark theme mode. To be able to better match the M3 color system, without using seed generation, this surface color should not be just white or black. The new surfaceVariant
corrects this past design to improve compatibility with the M3 color system when not using seed generated color schemes.
Style breaking: NavigationBar
Changed the default NavigationBar
height from 62 dp to 80 dp. The 80 dp height is also the M3 spec default height for a Material 3 NavigationBar
in Flutter. This makes the FCS default NavigationBar
theme less opinionated compared to M3 spec. The FCS default background color is now using surfaceVariant
in M2 mode, and defaults in M3 to its spec surface
with elevation tint. The FCS M2 surfaceVariant
default makes it look a bit more like the M3 mode surface with elevation tint. Especially if you use a seed-generated ColorScheme or FCS surface blends. This makes the FCS difference in style between M2 and M3 mode less than before. Since M2 does not support surface tint, it cannot match it exactly.
NavigationBar
from M3 default value of 80 dp, the ink level moves up or down with same amount as the deviation from the default 80 dp height. See issue report and illustration here FCS #114 as well as in Flutter SDK issue #117420. The issue is caused by a regression in Flutter 3.7.0 and 3.7.1. It does not exist in Flutter 3.3 and earlier. It is also fixed in the current master channel via PR 117473. This fix has now been cherry-picked (CP) via # 119553. This fix landed in Flutter hot-fix 3.7.2. To avoid the bug, upgrade to Flutter 3.7.2 or later.Style breaking: All component themes have null properties in M3 mode.
When enabling Material 3 and not enabling FCS sub-themes, and if no direct properties in FlexColorScheme raw constructor, or its light and dark factories are set in a way that requires creating a sub-theme to deliver the result, FlexColorScheme no longer creates any component sub-themes with none-null properties in Material 3 mode. In previous versions, it did so in a few cases. This is no longer required to deliver a nice starting point M3 theme, thanks to M3 now being almost fully supported in Flutter 3.7. When using FlexColorScheme with useMaterial3
set to true and its other properties at default values, and not enabling sub-themes, all component sub-themes will have null by default properties in FCS, just like in plain ThemeData
. When using Material 2, FlexColorScheme as before even when not enabling sub-themes, still creates core component themes listed under core default in the documentation. This is done for FCS legacy reasons, and to be able to deliver the default slightly opinionated M2 style it had before component sub-themes were a part of its offering.
Impact: The impact of this style breaking change is only visible on the Material 2 type BottomNavigationBar
in dark mode. When using the M3 mode, its dark mode icons have changed to the Flutter default style. When you opt in on FCS sub-themes in the M3 mode, it gets the same icon color as before, like it still gets in the M2 FCS style, with or without sub-themes enabled. Since the BottomNavigationBar
is a Material 2 component, this should be less relevant in the M3 mode. With component themes on, it looks as before.
Note: Later when theme.scaffoldBackgroundColor
and maybe also some other colors in current ThemeData
are deprecated, FlexColorscheme will need to set those colors in their own sub-theme, also in M3 mode to be able to continue to deliver e.g. surface blends that impacts the scaffold background color separately from ColorScheme colors. Currently, it does this via theme.scaffoldBackgroundColor
without using a component theme.
Style breaking: The SnackBar
action button defaults to inversePrimary
.
The SnackBar
theming got property snackBarActionSchemeColor
in FlexSubThemes
. It defaults to M3 default inversePrimary
. Earlier FCS used its foreground color with alpha 0xDD for the action button text color. Flutter's M2 defaults are poor designs and not very usable, but new Flutter M3 defaults are fine. As before, FCS uses a custom default style to fix M2 when using sub-themes. The M3 mode default is also opinionated, to make it match M3 defaults, set FlexSubThemes.snackBarBackgroundSchemeColor
to SchemeColor.inverseSurface
. By default, it uses the same style as its opinionated M2 style, which is onSurface
alpha blended with primary and opacity, both alpha blend and opacity are different in light and dark theme mode. This was kept as the default also in M3 mode, so it can be used as an option there as well. If you want the pure M3 style, select inverseSurface
instead. This part of the style is same as before so not style breaking, only SnackBar
action button got a new default text color, that can be themed to any ColorScheme
based color.
Style breaking: Tinted TextTheme was made less obviously tinted. M3-seeded ColorSchemes brings color tint to themes, if then also using tinted text, via the optional tinted TextTheme, is becomes too much. It is now more subtle and more usable also with seeded ColorSchemes. The changes are:
Style breaking: FlexColorSchemes own algorithm to compute light and dark theme container colors from their main colors, was modified to align better with expectation by the M3 color system. The changes are:
Style breaking: The border radius on ToolTip
, PopupMenuButton
, DropDownMenu
and Menu
no longer follow the global override for defaultRadius
. These items should generally not be themed together with a large general radius override. They can still be modified individually.
API default value breaking: The unselectedIsColored
parameters in FlexSubThemes
functions switchTheme
, checkboxTheme
and radioTheme
was changed to be nullable and to default to false
if not defined. Previously, they were not nullable and defaulted to true
. If you have not used these FlexSubThemes
functions directly, typically they are not used directly, then this change has no impact on resulting themes, since FlexSubThemedata.unselectedToggleIsColored
defaulted to false
earlier as well, and set these sub-theme values to false by default, or true when so defined.
Label value breaking: The FlexColor.materialBaselineName
name string was changed from 'M3 baseline' to 'Material 3 purple'.
Label value breaking: The FlexColor.materialBaselineDescription
description string was changed from 'Material guide 3 baseline based theme' to 'Material 3 guide and default purple theme'.
Style breaking: The boolean FlexSubThemesData.interactionEffects
now correctly control if color-tinted interaction effects for hover, focus, highlight, pressed and splash are used. The setting affects both M2 and M3 mode, and all in FCS covered component themes, to the extent that the Flutter SDK supports changing their interaction effects. All components have new tinted interaction effects, that are used when setting this property to true. When it is false, all components use Flutter SDK default grey styles.
Style breaking: In Material 2 mode the InputDecorator
's border radius default value was changed from 16 to 10, to be less rounded by default.
Style breaking: The boolean FlexSubThemesData.tintedDisabledControls
now correctly control if color-tinted disabled widgets are used. The setting affects both M2 and M3 mode, and all in FCS covered component themes, to the extent that the Flutter SDK supports changing their disabled color. All components have new tinted disabled styles, that are used when setting this property to true. When it is false, all components use Flutter SDK default disabled grey styles.
Style breaking: The ToggleButtons
theme has a slightly changed style in both M2 and M3 mode. It now also correctly reacts to FlexSubThemesData.interactionEffects
and FlexSubThemesData.tintedDisabledControls
. The slight change of past theme was needed to support this.
Minor style breaking: The FlexColorScheme TimePicker
dialog style in M3 mode was changed. It is now styled closer to the Material 3 specification. It is also closer to correct M3 style than Flutter is in version 3.7. When Flutter fully supports TimePicker
M3 theming in the stable channel, FCS will use its native styling as its default too.
API breaking: In FlexSubThemes
the floatingActionButtonTheme
and timePickerTheme
now require the colorScheme
, previously it was optional in both. Unless you have used FlexSubThemes.floatingActionButtonTheme
or FlexSubThemes.timePickerTheme
directly as helpers to make custom component themes with them, and not as typically used via FlexSubThemesData
, you will not notice this breaking API change.
API default value breaking: The FlexSubThemesData
property useTextTheme
, is now nullable and defaults to null. Previously it was not nullable and defaulted to false. As before, this boolean toggle determines if the Material 3 TextTheme and Typography is used.
Typography.material2021
.ThemeData.useMaterial3
is true, then useTextTheme
defaults to true and Typography.material2021
is used.ThemeData.useMaterial3
is false, then useTextTheme
defaults to false, and Typography.material2018
is used.Typography.material2021
in Material 2 mode, and for using Typography.material2018
in Material 3 mode.ThemeData.useMaterial3
is false and sub themes are not used, the default typography is Typography.material2018
. Note that if FlexColorScheme is not used at all, and your ThemeData
has ThemeData.useMaterial3
set to false, then Flutter defaults to using obsolete Typography.material2014
. In such a case, consider defining your typography manually to Typography.material2018
or why not even Typography.material2021
.typography
for FlexColorScheme
or FlexThemeData
, the useTextTheme
property has no impact on used typography at all.The SegmentedButton
unselected button foreground color defaults to the correct M3 spec color onSurface
. This is a change from 7.0.0-dev.2, but not considered style breaking, since it has not existed in previous stable versions. Flutter 3.7.3 and earlier versions, via a spec deviation bug defaults to using primary
color. See issue #119733 for more information. Using the new segmentedButtonUnselectedForegroundSchemeColor
we can also define it to use the primary
color, that Flutter in version 3.7 uses as default. This selection actually looks quite nice. Some might say it looks better than the M3 specification, but that is why easy theming configurations are there, so you can change it to fit your design preferences.
In FlexSubThemes
the filledButtonTheme
property baseSchemecolor
was renamed to backgroundSchemeColor
. This is a change from 7.0.0-dev.2, but not considered breaking since it has not existed in any previous stable versions.
Remove: The ListTileThemeData
workaround added in version 7.0.0-dev.2 was removed from core defaults. The issue https://github.com/flutter/flutter/issues/117700 never landed in Flutter 3.7 and its workaround is not needed. Extra setting of property value of tileColor: Colors.transparent
in ListTile
s used in elevated popupmenus were also removed from the Playground app. In previous dev releases, they were used to hide the issue in M3 mode in the app, when FCS was not used.
Remove: The creation of IconTheme
and primaryIconTheme
when opting in on sub themes, was removed. Previously, their colors were set to be equal to the color of same typography color as
used on TextTheme
nad PrimaryTextTheme
, by style TitleLarge
. This is no longer needed and also got in the way of getting the undefined default behavior for IconTheme
in some widgets. Like new IconButtonThemeData
in master channel.
THEMES PLAYGROUND
The Themes Playground is example number 5 in the package repository, originally included as the last step in a "how to use FlexColorScheme" training tutorial. Since its humble introduction it has grown into a notable and quite extensive application of its own, and is too extensive to serve as a very helpful tutorial step anymore. Despite having many advanced and useful features as a companion application to the FlexColorScheme package, it is architecturally identical to steps and examples 3 and 4 in the tutorial.
The application has an architecture that is a bit too simplistic to be extended to offer all features users are asking for. There is a plan to refactor it and make it into a proper stand-alone application developed in its own repo. This is potentially the last major release of the Themes Playground in its current form, and as being included with the FlexColorScheme package as "just an example" of how to use the package to build a dynamically themed app, which is how it started. It will still remain in minor and fix versions of v7, but will likely be removed in a future v8 version of the FlexColorScheme package.
As a tutorial and example app, the Themes Playground has never had any functional guarantees or even any tests at all of its own. This is still the case. The FlexColorScheme package has and always aims for 100% test coverage in its stable releases.
Despite Themes Playground not having any formal guarantees, it is extensively used and user tested during development of FlexColorScheme releases. In addition to being a very useful tool to configure and experiment with different themes for Flutter apps, and to quickly copy needed API configuration to get the same theme in your app. It is also an excellent tool to use during development of the FlexColorScheme package. It is used to visually see and verify that all features in the package actually do what is expected of them. The changes to the Themes Playground app are also generally already quite thoroughly tracked, going back many releases. Changes to version v7.0.0-dev.3, from v7.0.0-dev.2 are listed below.
usedColors
value 7 to the "Theme Colors" panel. It is presented more logically in the UI than a number, to make it more understandable.NavigationBar
icon and label colors. API already existed in FCS.NavigationRail
icon and label colors. API already existed in FCS.ExpansionTile
and ExpansionPanelList
to panel ListTile and Widget Showcase.NavigationDrawer
to panel NavigationDrawer.NavigationDrawer
to panel Navigation Drawer.NavigationBar
to panel Navigation Bar.NavigationRail
to panel Navigation Rail.SnackBar
action button to panel BottomSheet, Snack Banner. The UI also got better testing feature of both fixed and floating SnackBar
and correct defaults info for different settings and modes.TabBar
in M3 to panel TabBar. Unfortunately, the feature does not work due to a bug in Flutter. The issue has been fixed in the master channel via [PR #119690](https://github.com/flutter/flutter/pull/119690, but is not available in latest stable (3.7.7).TabBar
to panel TabBar.NavigationDrawer
to panel Navigation Drawer.FocusTraversalGroup
:s and by letting important UI controls get focus on tap. This was done to make keyboard usage of the Playground easier. Its semantics were also improved, by adding the scheme names in the color selector to semantics.defaultRadiusAdaptive
and adaptiveRadius
to panel Component themes. They are used to define to make a platform adaptive override to the global border radius override value.menuBarBackgroundSchemeColor
, menuItemBackgroundSchemeColor
, menuItemForegroundSchemeColor
, menuIndicatorBackgroundSchemeColor
, menuIndicatorForegroundSchemeColor
, menuIndicatorRadius
and for menuPadding
properties via start, end, top, bottom values to panel Menus and codegen for same props.AlertDialog
, TimePicker
and DatePicker
dialogs to panel Dialogs and Widget showcase.TODO BEFORE FCS STABLE 7.0.0 RELEASE
FlexSubThemes
with all its new component themes is only 73% tested now, all other package files have 100% test coverage.TODO AFTER FCS STABLE 7.0.0 RELEASE
Published by rydmike over 1 year ago
Jan 25, 2023
CHANGE
FIX
redM3
faulty dark mode colors.THEMES PLAYGROUND
SegmentedButton
.PopupMenuButton
.Badge
, so it gets featured as well.TODO BEFORE FCS STABLE 7.0 RELEASE
MUST DO: Review and do actionable TODOs in the code.
MUST DO: Review and fix test coverage. Test new colors too.
MUST DO: Review and test all tutorial examples.
MUST DO: Add important changes to docs.flexcolorscheme.com:
After release, more updates to FlexColorScheme docs:
MAYBE: Make tinted disabled controls apply consistently to all controls when applied.
MAYBE: Make tinted interaction effect apply consistently to all controls. New M3 widgets need to define it in their own sub-themes to get them, they don't use the hover, focus, highlight color from ThemeData for their defaults.
Postponed TODOs, that were planned for FCS stable 7.0, but moved forward to 7.1 or later.
Published by rydmike over 1 year ago
Jan 23, 2023
This major release does not contain any breaking API changes. However, the major version is bumped because some past styles and defaults, when opting in on Material 3, have been slightly tuned to better align with new Material 3 widgets and design, included in the Flutter 3.8/4.0 (?) release. The new features are also significant.
NEW
Added 12 new Material 3 color schemes: redM3
,pinkM3
, purpleM3
, indigoM3
, blueM3
, cyanM3
, tealM3
, greenM3
, limeM3
, yellowM3
, orangeM3
and deepOrangeM3
for a total of 52 built-in light and dark theme pairs. These schemes work well in Material 3 with or without seed generation. But using FCS advanced and flexible key color-based seed generation is recommended when using Material 3. You can always lock e.g. primary and tertiary color to custom brand color values you used as keys.
Added support for new ColorScheme
colors scrim
and outlineVariant
.
Added support for fontFamilyFallback
and package
so that a copyWith
on FlexColorScheme
generated ThemeData
is not needed to use them.
Added support for Material 3 buttons FilledButton
and FilledButton.tonal
.
FlexSubThemes.filledButtonTheme
that is controlled via FlexSubThemesData
properties filledButtonRadius
, filledButtonSchemeColor
and filledButtonTextStyle
.FilledButton
it was noticed that variant FilledButton.tonal
cannot be themed separately, see issue: https://github.com/flutter/flutter/issues/115827.Added option to keep using the M2 style Divider in M3. The in M3 used primary color tinted outlineVariant does not fit on any color. The M2 style based on black or white with opacity does. It is also less prominent than the M3 style and may be preferred. Set FlexSubThemesData
property useM2StyleDividerInM3
to true to use the M2 style in M3. Defaults to false.
ThemeData.dividerColor
to ThemeData.colorScheme.outlineVariant
when ThemeData.useMaterial3
is true
. This keeps the in Flutter SDK to be deprecated ThemeData.dividerColor
always same as actually used effective Divider
color. Thus, if an app uses Theme.of(context).dividerColor
while it still exists, to set a color to it, and expects it be the same color as effective Divider
color, it will be so in FCS, regardless of if M2 or M3 is being used. This is not the case in Flutter SDK by default, see issue https://github.com/flutter/flutter/issues/117755 for more information.Added elevation
to FlexSubThemes.timePickerTheme
, and make it use the dialog shared FlexSubThemesData.dialogElevation
setting. This property does not yet exist in Flutter beta 3.7.0-1.4.pre. It is thus unsure if it will land in next stable Flutter, if it does not it will be commented and removed for the next FCS release as well.
Added boolean tintedDisabledControls
to FlexSubThemesData
. If set to true, disabled widgets will get a hint of their active main color when disabled. In future minor versions, this will also apply to components that use own themed settings for disabled color, not only to the ones where disabled color controlled by ThemeData.disabledColor
. Previously tinted disabled color for ThemeData.disabledColor
was included and defined when FlexSubThemesData.interactionEffects
was set to true. It is now instead controlled by this separate tinted disabled-controls setting. Defaults to true, for an FCS opinionated default. This matches past default when it was included in FlexSubThemesData.interactionEffects
.
Added boolean inputDecoratorFocusedHasBorder
to FlexSubThemesData
. Default to true. If set to false, there is no border on the InputDecorator
, typically used by text fields, when the input decorator is focused. It controls the new parameter focusedHasBorder
in FlexSubThemes.inputDecorationTheme
.
Added SchemeColor
value inputDecoratorBorderSchemeColor
to FlexSubThemesData
. It is used to define and customize the border color of InputDecorator
on e.g. TextField. It controls the new parameter borderSchemeColor
in FlexSubThemes.inputDecorationTheme
.
Added appBarTheme
and tabBarTheme
to FlexSubThemes
.
Added Material 3 styling to TabBar
when M3 is used. Use FlexTabBarStyle.flutterDefault
to get the SDK default colors in M3 mode. TabBar
may get more configuration options in the next FCS version.
Added double
value appBarScrolledUnderElevation
to FlexSubThemesData
. It is used to define and customize the themed scrolled under elevation of the AppBar
. It controls the new parameter scrolledUnderElevation
in FlexSubThemes.appBarTheme
.
Added SchemeColor
value toggleButtonsUnselectedSchemeColor
and toggleButtonsBorderSchemeColor
to FlexSubThemesData
. They are used to define and customize the themed unselected button and border color of ToggleButtons
. They control the new parameters unselectedSchemeColor
and borderSchemeColor
in FlexSubThemes.toggleButtonsTheme
.
Added SchemeColor
value sliderIndicatorSchemeColor
, and enum FlexSliderIndicatorType
value sliderValueIndicatorType
, plus enum ShowValueIndicator
value sliderShowValueIndicator
to FlexSubThemesData
. They control the new parameters valueIndicatorColor
, valueIndicatorType
and showValueIndicator
in FlexSubThemes.sliderTheme
.
Added SchemeColor
value drawerBackgroundSchemeColor
and double values drawerRadius
, drawerElevation
to FlexSubThemesData
. They control the new parameters backgroundSchemeColor
, radius
and elevation
in new sub-theme FlexSubThemes.drawerTheme
.
Added menuTheme
to FlexSubThemes
, it provides styling for elevation, radius and background color with optional opacity for the new Mw components MenuAnchor
, MenuBar
and DropDownMenu
. The same FlexSubThemesData
that are used for PopupMenuButton
are used to control this theme. Those are popupMenuRadius
, popupMenuElevation
, popupMenuSchemeColor
, and popupMenuOpacity
.
Added timePickerElementRadius
to FlexSubThemesData
that can be used to control elementRadius
in FlexSubThemes.timePickerTheme
, it changes the themed border radius of the time input entry elements.
Added segmentedButtonRadius
, segmentedButtonSchemeColor
, segmentedButtonUnselectedSchemeColor
, segmentedButtonBorderSchemeColor
and segmentedButtonBorderWidth
to FlexSubThemesData
they control the equivalent properties in the new FlexSubThemes.segmentedButtonTheme
used to customize the SegmentedButton
.
CHANGE
Style change on tinted disabled components when opting in on tintedDisabledControls
. It is visually breaking, but subtle. Disable opacity alpha and alpha blend constants where tuned, kDisabledAlphaBlend from 0xAA (67%) to 0xCC (80%) and kDisabledBackgroundAlpha from 0x31 (19%) to 0x26 (15%). The new tinted disable colors look better. They are close in style to default grey ones, with a subtle primary tint, while still being more legible than in previous versions. Opting in on tinted disabled components is still not yet available on all components. It is more available in M2 mode. In upcoming minor releases, tinted disabled components will be made available on all themed components and consistently applied in both M2 and M3 mode. More visual tuning of this feature may be required in later releases.
Removed in version 6.1.0 included manual M3 elevation tint for BottomSheet
and PopupMenuButton
, in Flutter 3.7.0, the tint is included automatically as it should be and we no longer need the workaround.
The ListTileThemeData
was added to core defaults. It sets ListTileThemeData.tileColor
to Colors.transparent
if ThemeData.useMaterial3
is true. This is done to avoid issue: https://github.com/flutter/flutter/issues/117700. This extra M3 core default theme fix will be removed as soon as the issue is fixed.
Changed FlexColorScheme.bottomAppBarElevation
to be nullable. In M2 mode if is null, it follows defined appBarElevation
as before. In M3, it is kept null in order to default to M3's default elevation of 3, so that BottomAppBar
get elevation tint by default. In M3 mode a minor spec deviation was noted in Flutter SDK and reported here https://github.com/flutter/flutter/issues/118150.
Changed FlexColorScheme default BottomAppBar
color to be colorScheme.surface
, same as Flutter default. Previously FlexColorScheme used colorScheme.background
color as an opinionated default. The change is minor, and in many designs the color values are the same.
The Material buttons ElevatedButton
, OutlinedButton
and TextButon
, now only create custom sub-theme properties in Material 3 mode when using none default (none null) values. Previously, they created sub-themes for some properties corresponding to the default values. This task now falls back to the role of default widget behaviour, as it should. Effective styles are unchanged.
Previously existing "native" Material 3 color schemes, materialBaseline
, verdunHemlock
and dellGenoa
were changed to use Material 3 error colors, also in Material 2 mode and when not using seed colors.
When making seed generated ColorScheme
with a custom surfaceTint
color. This tint color is now also used as seed-key for the neutral and neutral variant tonal palettes. Flutter SDK can only use
primary color as seed-key for the neutral colors. This limitation in Flutter makes using a custom surfaceTint
in seeded ColorSchemes
less usable with often unappealing results. This happens because the custom tint color then differs from the slight primary
tint that is hard coded into Flutter's seeded neutral colors used for surfaces and backgrounds, and the colors may clash. In FlexColorScheme the custom tint color is automatically also used to slightly tint the neutral colors used for surfaces and backgrounds in the seed-generated ColorScheme
. The same color is then also used as ColorScheme.surfaceTint
color. This makes the custom elevation tint color match the custom seed-tinted surface and background colors. This feature is enabled by the FlexSeedScheme package starting from version 1.2.0-dev.1. When using a custom surfaceTint
color, the same color is also used as the surface alpha blend color, when using SurfaceMode
and blendLevel
to adjust surface color with or without using seed generated ColorScheme
. Ensuring that neutral seed tint, elevation and surface blend color always match, as they should.
Changed, or one could call it fixed SnackBarTheme
action and close icon colors. They are now also themed automatically to fit on selected SnackBar color.
The boolean FlexSubThemesData.interactionEffects
no longer modifies ThemeData.disabledColor
. This part of the control is now instead controlled separately by FlexSubThemesData.tintedDisabledControls
.
The InputDecorationTheme
, can now be configured to match Material 3 for critical styles if so desired. It uses a few opinionated values that give it a slightly different style by default. It can be configured to match M3 defaults if so desired. FCS does one opinionated adjustment to error border and suffix icon. It keeps them error
colored on unfocused-hovered error state, instead of onErrorContainer
. The M3 default looks odd. This FCS change is considered an opinionated M3 style fix in FCS. The M3 default of setting unfocused hovered error floating label also to onErrorContainer
, is also keeping FCS own past style error.withAlpha(0xA7)
, which looks more refined. There is no way to set these settings back to the M3 default style within FCS. You can of course as always adjust them and anything with copyWith
on produced ThemeData
if needed.
Added M3 slider support with correct DropSliderValueIndicatorShape
in M3 mode.
Added theming for TimePicker
that corrects Flutter SDK issue https://github.com/flutter/flutter/issues/118657 when using FCS component sub-themes.
Made tabBarStyle
in FlexColorScheme
, FlexColorScheme.light
, FlexColorScheme.dark
, FlexThemeData.light
and FlexThemeData.dark
nullable and null by default. In M2 mode tabBarStyle
defaults to FlexTabBarStyle.forAppBar
as before. However, in M3 mode, if not defined, it defaults to FlexTabBarStyle.flutterDefault
, producing a style matching M3 default TabBar.
THEMES PLAYGROUND
NEW
BottomSheet
independently.Typography
workaround in Playground app. Workaround was used before due to issue https://github.com/flutter/flutter/issues/103864 that is now fixed in Flutter by https://github.com/flutter/flutter/pull/110870.ColorScheme
, when FCS is not in use.FilledButton
and FilledButton.tonal
, see issue: https://github.com/flutter/flutter/issues/115827 for info on current theming limitations in the SDK for these new buttons.useM2StyleDividerInM3
to panel Component Themes with name "Use Material 2 styled Divider in Material 3". Playground defaults this setting to ON (true), but default in API is false. Rationale for keeping it on in the Playground when using component sub-themes; it just looks better than M3:s new default (opinionated). When using M3 and FCS component themes, for a true M3 styled Divider
, turn OFF the setting.SegmentedButton
in panel Selection Buttons and to Widget Showcase.SegementedButton
to control its colors, border radius and width.Drawer
and NavigationDrawer
in the new Drawer panel and to the Widget Showcase. Also added controls to theme color, border radius and elevation of the Drawer
. The border radius follows the global border radius setting if it is used.BottomAppBar
in panel AppBar and also to the Widget Showcase.BottomAppBar
elevation setting to Playground in panel AppBar.DropdownMenu
in panel Text Field, Menu and to Widget Showcase.MenuBar
in panel Menu and to Widget Showcase.MenuAnchor
in panel Menu and to Widget Showcase.PopuMenuButton
not also control the menu style of DropdownMenu
, MenuBar
and MenuAnchor
.TextField
has a border to panel Text Field.TextField
to panel Text Field.TextField
background color to panel Text Field.TextField
settings to match M3 default style.AppBar
to panel AppBar.ToggleButtons
to panel Toggle Buttons.RangeSlider
in panel Slider and to Widget Showcase.Slider
value indicator color, visibility and value indicator type.FIX
tileColor
in M3, until a fix for https://github.com/flutter/flutter/issues/117700 lands via https://github.com/flutter/flutter/pull/117965. By doing this the ListTiles in the app will look OK also when FlexColorScheme theming is not used, even if issue #117965 might still be in effect. May not need this work around in V7.0 release if the issue does not land in new Flutter stable after 3.3. follow-up.Material
in Flutter release.TODO BEFORE STABLE 7.0 RELEASE
The next stable version of Flutter after version 3.3 must be released before FlexColorScheme 7.0 can be released.
Postponed TODOs, that were planned for FCS stable 7.0, but moved forward to 7.1 or later.
Published by rydmike almost 2 years ago
Dec 26, 2022
FIX
Published by rydmike almost 2 years ago
Nov 22, 2022
FIX
Published by rydmike almost 2 years ago
Nov 20, 2022
FlexColorScheme version 6.1.0 contains many new features, more component sub-themes and configurable properties. It improves seed-generated color scheme capabilities by adding more pre-configured seed generation configurations and color contrast accessibility options.
A criticism of Material 3's color system and seed-generated color schemes, is that using colored contrasting colors may be less accessible. FlexColorScheme offers a way to enable in-app modification of its seed-generated color schemes, any seed generation configuration can optionally return results with plain white and black contrasting on colors. This can be applied separately for main on colors and on surfaces.
The Themes Playground application, has been updated to include most of the new features. It has been improved to make it easier to discover some of its previously existing features, like using custom colors in the Playground to define your own theme.
NEW
FlexAppBarStyle
that is used by property appBarStyle
got a new value scaffoldBackground
that enables this. This is useful for matching the AppBar color exactly to the Scaffold background color, when Scaffold background uses different surface blends than the theme's ColorScheme
surface or background colors.materialTapTargetSize
and pageTransitionsTheme
to FlexColorScheme
and FlexThemeData
. They are only convenience properties to avoid having to use a copyWith
on FlexColorScheme produced ThemeData
, to define them.swapLegacyOnMaterial3
in FlexColorScheme.light/dark
and FlexThemeData.light/dark
allows for better automatic adjustment of built-in scheme colors to the Material 3 color-system. It applies to color schemes that were originally designed for Material 2, when using the Material 3 mode with or without seed-generated ColorSchemes.
swapLegacyOnMaterial3
to true
, will when useMaterial3
is true
, swap the built-in scheme colors secondary
and tertiary
and also their container colors.secondary
and tertiary
colors in Material 3 color system.FlexSchemeColor
has a new boolean meta-data property called swapOnMaterial3
, that has been defined to be true
, if the FlexSchemeColor
it defines, benefits design compliance wise from swapping its secondary
and tertiary
colors when using Material 3.swapLegacyOnMaterial3
is false
by default, but it is recommended to always set it to true
. The flag has no impact when using Material 2.swapLegacyOnMaterial3
flag can also be toggled in the Themes Playground, it is on by default there.FlexSchemeColor
, it is done before any other built-in scheme modifier properties, including swapColor
and usedColors
.FloatingActionButton
can now be set to always be circular, also in Material 3 and without assigning a high-radius setting. If you always want a circular FAB, and stadium on extended FAB, then set fabAlwaysCircular
in FlexSubThemesData
to true
, and FAB stays circular regardless of if you use M2 or M3, or how you modify the global default border radius. You could get this effect before too by setting a very high themed radius on the FAB, but this is more convenient.FlexSubThemesData
properties:
Slider
theme can now be adjusted via FlexSubThemesData
properties sliderBaseSchemeColor
, sliderValueTinted
and sliderTrackHeight
.chipSelectedSchemeColor
was added as themed background color, it is used by Chips that are selectable. The chipDeleteIconSchemeColor
can be used to theme the "Delete" icon color on Chips. While adding these features, some Flutter M3 Chip spec and theming issues were found, see issue #115364 for more information.switchThumbSchemeColor
property, to control the thumb color separately. A switch custom color theme was prepared for M3 Switch
, which is not yet available in Flutter 3.3.Tooltip
theme now has FlexSubThemesData
properties tooltipRadius
, tooltipWaitDuration
, tooltipShowDuration
, tooltipSchemeColor
and tooltipSchemeColor
.bottomSheetBackgroundColor
and bottomSheetModalBackgroundColor
can be used to theme the background color of the BottomSheet
.navigationBarElevation
to adjust the themed elevation of NavigationBar
.popupMenuElevation
and popupMenuSchemeColor
to further quick theme the PopupMenuButton
.outlinedButtonBorderWidth
, outlinedButtonPressedBorderWidth
, toggleButtonsBorderWidth
, inputDecoratorBorderWidth
and inputDecoratorFocusedBorderWidth
define the themed outline border thickness in different states of their respective components. These properties use previously existing properties thinBorderWidth
and thickBorderWidth
as their defaults. Resulting in that, the new properties are API backwards compatible, and they have shared global default settings. The new part is that you can now define themed outline border thickness separately for these components.elevatedButtonTextStyle
, outlinedButtonTextStyle
and textButtonTextStyle
were added to be able to theme TextStyle
on ElevatedButton
, OutlinedButton
, TextButton
. These are convenience properties to allow different text styles on buttons without having to use copyWith
on the overall ThemeData
and its button component themes to modify the text styles, often sizes.
ThemeData
and its button themes. The current version does not include adjusting them in the Themes Playground. Adding all possible usage of them is currently not in the scope of the Playground app. However, button font size changes may be added later as a usage example of these properties. These properties are using the tricky MaterialStateProperty
, that have so far been avoided in this flattened simplified theming. It was used for the benefit of offering the text styles as ThemeData
pass along properties. Modifying the ButtonStyle
theme using copyWith
, is a bit more involved than for other sub themes, with these properties you can customize the button text style using FlexSubThemesData
properties instead. If you need to modify the FlexColorScheme
created buttons themes even further for some not included properties, an example of how to do that can be found here.CHANGE
FlexTones
, the FlexTones.oneHue
and FlexTones.vividBackground
.FlexSubThemesData
all component controlling properties except booleans, are now nullable and null by default. FlexColorScheme made sub themes still default to same values as before when assigning a default FlexSubThemesData()
to FlexColorScheme.subThemesData
. The properties are nullable to enable using different defaults in FlexColorScheme made sub-themes for Material 2 and Material 3 modes.thinBorderWidth
to default to 1.0. It was 1.5 before. This is a style breaking change from previous thin outline style in FlexColorScheme.
thinBorderWidth
to 1.5, to get the same result as previous default theme.Chip
style is slightly modified from previous versions. The new opinionated FCS default style is more distinct than before and more aligned with styling borrowed from the Material 3 mode Chip
design. The deleteIconnColor
now defaults to onSurface
instead of primary
and it can be defined to be any color scheme based color. The Chips revised style, look better than before. Using Material 3 and with it themed Chips
is also fully supported, also customizing color on selected state of selectable Chips is available. Color-tinted chips are also available as before. Be aware though that Material 3 theming in the current 3.3 version of Flutter has some limitations. If you assign a custom color to selected chips, the disabled state of Chips can no longer conform, to M3 spec of disabled selected Chips.
FilterChip
and InputeChip
, there is simple not enough theme properties in ChipTheme
to support this. Due to this limitation, we recommend only using Chip theme designs that work with dark text in light mode, and light text in dark mode.BottomSheet
background color now defaults to theme's ColorScheme surface
color, in both M2 and M3 mode. Previously it defaulted to the Material
's default color theme.canvasColor
, that typically equals ColorScheme background
. The new default follows upcoming Material 3 default for BottomSheet
. The style change is minor, in most designs the color values are the same. If needed you can put it back to theme background
color with: final ThemeData themeLight = FlexThemeData.light(
subThemesData: const FlexSubThemesData(
bottomSheetBackgroundColor: SchemeColor.background,
bottomSheetModalBackgroundColor: SchemeColor.background,
),
);
FIX
BottomSheet
gets a manually applied elevation tint to keep it distinguishable from the background. This temporary fix works despite Material tint elevation being broken in Flutter 3.3 and earlier, when useMaterial3
is true.PopupMenuButton
.BottomSheet
and PopupMenuButton
, already exist in the Flutter master channel, they will probably land in next new stable release after Flutter 3.3.BottomSheet
and PopupMenuButton
when opting in on Material 3. Since shadow elevations are still not working for them in M3, it is not perfect, but much better.Material
elevation issue #107190 in M3 mode. As a result we get no elevation tint or any shadow on such Material
using widgets in M3 mode.Material
, also if the components and their themes do not land. In combination with the here made M3 manual elevation tint fix, they would in such a case get the correct M3 default background elevation tint behaviour and shadow.THEMES PLAYGROUND
On Theme colors panel:
swapLegacyOnMaterial3
setting.Updated and shortened the Introduction. Probably nobody reads it, or the package docs with Playground guides, but at least it is there.
The Seeded ColorScheme panel:
FlexSchemeColor
, that gets used as key colors for the Material 3 seeded ColorScheme generation, when it is turned on.
On Surface blends:
ToggleButtons
control, as before, only shows popular options.Other new controllable properties and features:
scaffoldBackground
color as its themed background color. This is useful for matching the AppBar color exactly to the Scaffold background color, when Scaffold background uses different surface blends than the theme's ColorScheme surface or background colors.BottomSheet
.NavigationBar
.PopupMenuButton
.ToggleButtons
border width.OutlineButtons
border widths.InputDecorator
border widths.Dialog
elevation.Slider
via base color, track height and base color tinted value indicator.Tooltip
via scheme color, radius, opacity, show duration and wait duration.Switch
thumb color via scheme color selection.User interface changes:
AppBarStyle
, SchemeColor
selection and SurfaceStyle
. Their style follow ToggleButtons
height and border radius.ToggleButtons
controls in a ListTile
can now for convenience be toggled in sequence by just tapping on the ListTile
it is used in.Slider
widget is now presented in the Widget Showcase panel. Basic theming options are now available. The Slider theme is already excellent out of the box. When you need more radical changes to it, those typically go beyond the scope of FCS and require extending the Slider widget.PageView
is fine when swiping, where it remains, but it was a tad annoying when clicking on the panel page selector.Slider.adaptive
to Slider
.
SwitchListTileAdaptive
to just SwitchListTile
.
SwitchListTileAdaptive
iOS switch on iOS on macOS. However, the app presents Material theming, and the new Material 3 Switch will land in Flutter stable soon. The new Material 3 Switch
is even nicer than the Cupertino Switch, and we want to see it in the app when it lands. We will thus use the Material Switch in the Themes Playground app on all of its own controls on all platforms going forward.SwitchListTileAdaptive
is kept in use on examples 2 to 4. As an example of how to make and use a theme following platform adaptive ListTileSwitch
. In the SwitchListTileAdaptive
doc comments it is mentioned that the plain SwitchListTile.adaptive
is not theme color following on iOS/macOS platforms, nor can it be themed to be so. You have to make a custom wrapper like SwitchListTileAdaptive
.FIX Themes Playground
Published by rydmike about 2 years ago
Sep 21, 2022
FIX
A null check was fixed by sososdk in FlexColorScheme.light
when using custom scheme PR #90. Issue did not exist in FlexColorScheme.dark
.
Cam16 from Material Color Utilities was exported by accident by FlexColorScheme in version 6.0.0 via its FlexSeedScheme package export. This export was removed. Cam16 was not exported before moving features to FlexSeedScheme and should not have been now either. FlexSeedScheme does however export it as before, it is used by the FlexColorPicker.