Version 7.2.0

7.2.0

July 20, 2023

PACKAGE

NEW

• Added boolean property 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.
• Added FlexAdaptive property adaptiveRemoveNavigationBarTint to FlexSubThemesData. It is used to control platform adaptive elevation tint removal on the NavigationBar theme.
• Added textSelectionTheme to FlexSubThemes, used to make a TextSelectionThemeData.
• Added properties inputCursorSchemeColor, inputSelectionSchemeColor, inputSelectionOpacity, and inputSelectionHandleSchemeColor, to FlexSubThemesData used to configure TextSelectionThemeData as a part of FlexColorScheme.subThemesData.
• Added a new feature that enables platform adaptive Material ink selection via adaptiveSplash a FlexAdaptive property, and the FlexSplashType values splashType and splashTypeAdaptive in FlexSubThemesData.
• FlexColorScheme got the 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.
• New feature that enable platform adaptive theming of border radius on dialogs via adaptiveDialogRadius a FlexAdaptive property and double dialogRadiusAdaptive in FlexSubThemesData.
• Added tinted disable support when 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.
• Added tinted disable support when 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.

  • In previous versions in M2 mode, text selection handles used Theme.of(context).primaryColorDark, even when sub-themes where not enabled. They still do by default, but only when sub-themes are enabled.

• In 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.

  • Previously default elevation was zero. Flutter SDK defaults to 8. The FlexColorScheme opinionated default value was changed to 3 to make it equal to the default elevation of NavigationBar in M3 mode, so that the bottom navigators share same default elevation when using FlexColorScheme. As before, you can adjust the elevation as needed with the API and in the Themes Playground.

• 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.

  • Previously default elevation was zero. Flutter SDK defaults to 0. The FlexColorScheme opinionated default value was changed to 3 to make it equal to the default elevation of NavigationBar in M3 mode, so that the bottom navigators share same default elevation when using FlexColorScheme. As before, you can adjust the elevation as needed with the API and in the Themes Playground.

• 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.

  • Previous default used same elevation as 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.
  • The default for M3 mode is unchanged, using elevation 3, via SDK defaults when undefined.

• 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

• Fixed that 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.
  • Known limitation: Text selection handles on iOS platform cannot be changed with a theme from 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.
• Fixed useFlutterDefaults when elevation is null in FlexSubThemes.bottomNavigationBar not using Flutter SDK default elevation of 8.
• Added a built-in theme fix to make the elevation tint change in the AppBar animate when it changes. Based on Material spec and observed native Android behavior and compose behavior, 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.
• The 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

• In the Switch Check Radio panel, the Switch got a setting to control if thumb is fixed sized or not.
• The NavigationBar got its own setting for elevation tint removal in light and dark mode.
• Introduction text updated. New information about Material-3 design becoming the default in Flutter SDK soon added, and that Material-2 will be deprecated.
• Added text selection theming to the Text Field panel. By default, cursor color, text selection color and text selection handles, default to following the input decorator default color or its selected color. The cursor color, text selection, and text selection handle colors, can also be overridden and defined separately. These settings for light and dark mode, have their own property values in the Playground.
• Added support for selecting a custom ink splash effect and another custom platform adaptive splash effect on selected other platforms.
• Added support for configuring the used VisualDensity. When using mock platform setting in the Playground, it also affects the result of used setting when VisualDensity.adaptivePlatformDensity, FlexColorScheme.comfortablePlatformDensity or default undefined value, that falls back to VisualDensity.adaptivePlatformDensity, are used.
• Added support for selecting and using FlexTones.candyPop and FlexTones.chroma.
• Added support for making any seed strategy use tone 100 (white) or tone 0 (black) as resulting surface and background tones.
• Added an option to show the new extended tonal palette tones to the seeded color scheme panel.
• Shape and radius now have their own theming topic panel, removed radius from Component Themes topic.
• Add adaptive border radius setting to the Dialogs panel.
• Add TimePicker border radius override value setting to the Dialogs panel.
• Add DatePicker border radius override value setting to the Dialogs panel.
• Added a switch to show TextStyle details to TextTheme presentations.
• Added font NotoSans Medium (W500) to assets.
• On theme showcase and icon button panels, show both tappable and toggleable IconButton styles.
• Theme topic selector uses a group color on icons and selected item. The colors are fixed semantic colors, but the colors are Material-3 harmonized to active theme surface tint color. This makes them fit nicely when the overall color theme of the app changes. It is also a nice additional demo of theme extensions with many colors that are harmonized. The concept is the same as the one used on the code highlighter colors earlier.

CHANGE

• The onColor blend-level and on onMain setting are no longer disabled when using seeded ColorScheme. Rationale: If some colors are locked to use custom colors, using onBlend level has an impact on their contrasting colors and should be allowed in the Playground. The API could use it before too, but Playground could not, now it can.
• Changed the order of theming topic panels. All color and surface related topic panels are now before component theme panels. Theme settings topic panels have been split into more discrete topics and have a new order.
• Changed the order of components and labels on many theme topic panels.
• The apps included in the Theme Simulator now all extend content behind their app bars and bottom navigation. This allows themed opacity settings on app bar and bottom navigation to become observable in the simulated apps.
• The Shop app in the Theme Simulator received some style updates to use more theme dependent styling, like Card as containers for shop items.

FIX

• Fixed allowing elevation changes of BottomNavigationBar and NavigationBar when useFlutterDefaults is true (ON).
• Fixed allowing opacity usage on NavigationBar when default undefined background color is used.

POSTPONED

• The new Squircle and platform adaptive shape selection features were postponed. They may arrive later this year in version 7.3 or a later release. It is pending more investigation into the best choice concerning correct shapes and potential performance issues they might come with.