The Dart package site pub.dev restricts the size of the main CHANGELOG.md file size to maximum 128kB. To work around this limitation, older changelogs and dev release changelogs have been moved into individual files linked from the main changelog.
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 tuned to better align with new Material 3 widgets and design in the Flutter 3.7 release. The new features are also significant.
Requires Flutter beta 3.7.0-1.4.pre or later.
NEW
-
Added 12 new Material 3 color schemes:
redM3
,pinkM3
,purpleM3
,indigoM3
,blueM3
,cyanM3
,tealM3
,greenM3
,limeM3
,yellowM3
,orangeM3
anddeepOrangeM3
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 the color values you used, typically brand colors, as key colors for the seed generation. -
Added support for new
ColorScheme
colorsscrim
andoutlineVariant
. -
Added support for
fontFamilyFallback
andpackage
, so acopyWith
onFlexColorScheme
generatedThemeData
is not needed to use them. -
Added support for Material 3 buttons
FilledButton
andFilledButton.tonal
.- Supported via
FlexSubThemes.filledButtonTheme
that is controlled viaFlexSubThemesData
propertiesfilledButtonRadius
,filledButtonSchemeColor
andfilledButtonTextStyle
. - When setting up theming for
FilledButton
it was noticed that variantFilledButton.tonal
cannot be themed separately, see issue: flutter/flutter#115827.
- Supported via
-
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
propertyuseM2StyleDividerInM3
to true to use the M2 style in M3. Defaults to false.- FlexColorScheme also sets
ThemeData.dividerColor
toThemeData.colorScheme.outlineVariant
whenThemeData.useMaterial3
istrue
. This keeps the in Flutter SDK to be deprecatedThemeData.dividerColor
always same as actually used effectiveDivider
color. Thus, if an app usesTheme.of(context).dividerColor
while it still exists, to set a color to it, and expects it be the same color as effectiveDivider
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 flutter/flutter#117755 for more information.
- FlexColorScheme also sets
-
Added
elevation
toFlexSubThemes.timePickerTheme
, and make it use the dialog sharedFlexSubThemesData.dialogElevation
setting. This property works with the Flutter master channel, but does not yet exist in Flutter beta 3.7.0-1.4.pre. It was commented out of this released based on Flutter beta. It is unsure if it will land in the next stable Flutter, it probably will not. If it does not land, it will remain commented in next FCS7 stable release as well. Its addition will have to be left pending inclusion in the following Flutter stable release, probably in 3 to 4 months. -
Added boolean
tintedDisabledControls
toFlexSubThemesData
. If set to true, disabled widgets will get a hint of primary color or 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 is controlled byThemeData.disabledColor
. Previously tinted disabled color forThemeData.disabledColor
was included and defined whenFlexSubThemesData.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 inFlexSubThemesData.interactionEffects
. -
Added boolean
inputDecoratorFocusedHasBorder
toFlexSubThemesData
. Defaults to true. If set to false, there is no border on theInputDecorator
, typically used by text fields, when the input decorator is focused. It controls the new parameterfocusedHasBorder
inFlexSubThemes.inputDecorationTheme
. -
Added
SchemeColor
valueinputDecoratorBorderSchemeColor
toFlexSubThemesData
. It is used to define and customize the border color ofInputDecorator
on e.g. TextField. It controls the new parameterborderSchemeColor
inFlexSubThemes.inputDecorationTheme
. -
Added
appBarTheme
andtabBarTheme
toFlexSubThemes
. -
Added Material 3 styling to
TabBar
when M3 is used. UseFlexTabBarStyle.flutterDefault
to get the SDK default colors in M3 mode.TabBar
may get more configuration options in the next FCS version. -
Added
double
valueappBarScrolledUnderElevation
toFlexSubThemesData
. It is used to define and customize the themed scrolled under elevation of theAppBar
. It controls the new parameterscrolledUnderElevation
inFlexSubThemes.appBarTheme
. -
Added
SchemeColor
valuetoggleButtonsUnselectedSchemeColor
andtoggleButtonsBorderSchemeColor
toFlexSubThemesData
. They are used to define and customize the themed unselected button and border color ofToggleButtons
. They control the new parametersunselectedSchemeColor
andborderSchemeColor
inFlexSubThemes.toggleButtonsTheme
. -
Added
SchemeColor
valuesliderIndicatorSchemeColor
, and enumFlexSliderIndicatorType
valuesliderValueIndicatorType
, plus enumShowValueIndicator
valuesliderShowValueIndicator
toFlexSubThemesData
. They control the new parametersvalueIndicatorColor
,valueIndicatorType
andshowValueIndicator
inFlexSubThemes.sliderTheme
. -
Added
SchemeColor
valuedrawerBackgroundSchemeColor
and double valuesdrawerRadius
,drawerElevation
toFlexSubThemesData
. They control the new parametersbackgroundSchemeColor
,radius
andelevation
in new sub-themeFlexSubThemes.drawerTheme
. -
Added
menuTheme
toFlexSubThemes
, it provides styling for elevation, radius and background color with optional opacity for the new Mw componentsMenuAnchor
,MenuBar
andDropDownMenu
. The sameFlexSubThemesData
that are used forPopupMenuButton
are used to control this theme. Those arepopupMenuRadius
,popupMenuElevation
,popupMenuSchemeColor
, andpopupMenuOpacity
. -
Added
timePickerElementRadius
toFlexSubThemesData
that can be used to controlelementRadius
inFlexSubThemes.timePickerTheme
, it changes the themed border radius of the time input entry elements. -
Added
segmentedButtonRadius
,segmentedButtonSchemeColor
,segmentedButtonUnselectedSchemeColor
,segmentedButtonBorderSchemeColor
andsegmentedButtonBorderWidth
toFlexSubThemesData
they control the equivalent properties in the newFlexSubThemes.segmentedButtonTheme
used to customize theSegmentedButton
.
CHANGE
-
Style breaking: Tinted disabled components style.
Style change on tinted disabled components when opting in ontintedDisabledControls
. 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. -
Style breaking:
BottomAppBar
color.
Changed FlexColorScheme defaultBottomAppBar
color to becolorScheme.surface
, same as Flutter default. Previously FlexColorScheme usedcolorScheme.background
color as an opinionated default. The change is minor, and in many designs the color values are the same. -
Style breaking: Error colors in M2 for
materialBaseline
,verdunHemlock
anddellGenoa
.
Previously existing native Material 3 color schemes,materialBaseline
,verdunHemlock
anddellGenoa
were changed to use Material 3 error colors, also in Material 2 mode and when not using seed colors. -
Removed in version 6.1.0 included manual M3 elevation tint for
BottomSheet
andPopupMenuButton
. In Flutter 3.7.0, the tint is included automatically as it should be and workaround is not needed anymore. -
The
ListTileThemeData
was added to core defaults. It setsListTileThemeData.tileColor
toColors.transparent
ifThemeData.useMaterial3
is true. This is done to avoid issue: flutter/flutter#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 definedappBarElevation
as before. In M3, it is kept null in order to default to M3's default elevation of 3, so thatBottomAppBar
get elevation tint by default. Not considered style breaking becauseBottomAppBar
was not supported before in M3. In M3 mode a minor spec deviation was noted in Flutter SDK and reported here flutter/flutter#118150. -
The Material buttons
ElevatedButton
,OutlinedButton
andTextButon
, 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 to the role of default widget behaviour, as it should. Effective styles are unchanged. -
When making seed generated
ColorScheme
with a customsurfaceTint
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 customsurfaceTint
in seededColorSchemes
less usable with often unappealing results. This happens because the custom tint color then differs from the slightprimary
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-generatedColorScheme
. The same color is then also used asColorScheme.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 customsurfaceTint
color, the same color is also used as the surface alpha blend color, when usingSurfaceMode
andblendLevel
to adjust surface color with or without using seed generatedColorScheme
. 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 modifiesThemeData.disabledColor
. This part of the control is now instead controlled separately byFlexSubThemesData.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 themerror
colored on unfocused-hovered error state, instead ofonErrorContainer
. 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 toonErrorContainer
, is also keeping FCS own past styleerror.withAlpha(0xA7)
, which looks more refined. There is currently no way to set these settings back to the M3 default style within FCS. You can of course as always adjust them and anything withcopyWith
on producedThemeData
if needed. -
Added M3 slider support with correct
DropSliderValueIndicatorShape
in M3 mode. -
Added theming for
TimePicker
that corrects Flutter SDK issue flutter/flutter#118657 when using FCS component sub-themes. -
Made
tabBarStyle
inFlexColorScheme
,FlexColorScheme.light
,FlexColorScheme.dark
,FlexThemeData.light
andFlexThemeData.dark
nullable and null by default. In M2 modetabBarStyle
defaults toFlexTabBarStyle.forAppBar
as before. However, in M3 mode, if not defined, it defaults toFlexTabBarStyle.flutterDefault
, producing a style matching M3 default TabBar.
THEMES PLAYGROUND
NEW
- Add UI to set elevation and background color of modal and none modal
BottomSheet
independently. - Removed used
Typography
workaround in Playground app. Workaround was used before due to issue flutter/flutter#103864 that is now fixed in Flutter by flutter/flutter#110870. - Improved codegen for used Typography selection, it is now only shown when needed.
- Improved codegen for when FlexColorScheme is not used at all. It can now use the setting for using Material 3 and Typography. It still does not support generating code for the active
ColorScheme
, when FCS is not in use. - Added UI for theming
FilledButton
andFilledButton.tonal
, see issue: flutter/flutter#115827 for info on current theming limitations in the SDK for these new buttons. - Added UI for
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 styledDivider
, turn OFF the setting. - Added showing
SegmentedButton
in panel Selection Buttons and to Widget Showcase. - Added settings for
SegementedButton
to control its colors, border radius and width. - Added showing
Drawer
andNavigationDrawer
in the new Drawer panel and to the Widget Showcase. Also added controls to theme color, border radius and elevation of theDrawer
. The border radius follows the global border radius setting if it is used. - Added showing
BottomAppBar
in panel AppBar and also to the Widget Showcase. - Added
BottomAppBar
elevation setting to Playground in panel AppBar. - Added showing new M3
DropdownMenu
in panel Text Field, Menu and to Widget Showcase. - Added showing new M3
MenuBar
in panel Menu and to Widget Showcase. - Added showing new M3
MenuAnchor
in panel Menu and to Widget Showcase. - In panel Menu the previous controls for
PopuMenuButton
now also control the menu style ofDropdownMenu
,MenuBar
andMenuAnchor
. - Added setting for focused
TextField
has a border to panel Text Field. - Added setting for border color selection of
TextField
to panel Text Field. - Added setting for alpha control of
TextField
background color to panel Text Field. - Added a button in panel Text Field, that can set
TextField
settings to match M3 default style. - Added setting for scrolled under elevation of
AppBar
to panel AppBar. - Added settings for unselected button and border colors for
ToggleButtons
to panel Toggle Buttons. - Added showing
RangeSlider
in panel Slider and to Widget Showcase. - Added settings for
Slider
value indicator color, visibility and value indicator type. - Added setting for time picker input element border radius to pane Dialogs.
FIX
-
ListTiles in the Themes Playground App must use and set transparent
tileColor
in M3, until a fix for flutter/flutter#117700 lands via flutter/flutter#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. -
Fixed Material Showcase surface tint and shadow presentation to support changes in
Material
in Flutter release.