Fixed in Stable
The issues below have a fix that has landed in the latest stable hotfix or earlier version of Flutter.
The status of fixes to known issues is typically reviewed when a new stable release lands.
This list is included to show what older versions of Flutter the theming fixes do not apply to. Prefer using the latest stable version of Flutter to benefit from all fixes listed below.
TextStyles in Menus do not follow Material-3 spec#
labelLarge (M3 14 dp) for its menu items. For a Textfield part in a dropdown menu, the default for Textfield should be used, which is bodyLarge (M3 16 dp). The menus currently do not always use these correct Material-3 defaults.
For more information, see issue #131676, fixed by PR #131930.
DropdownButtonFormField input decorator focus/hover is not clipped#
ThemeData, the form field of the DropdownButtonFormField gets the correct themed result, but the shape is not clipped based on used radius of the input decorator for focused and hovered states.
For more information, see issue #131282, fixed via PR #131481.
TimePicker clock-dial has wrong M3 defaults#
TimePicker clock-dial uses wrong spec color, and its M3 web spec has a mistake.
See issue #118657, fixed by PR #131045
DropdownMenu leading icon usage layout issue#
DropdownMenu in the entry field, the menu nicely automatically aligns the text in the menu entry field, with the text part in the dropdown menu entries, shown when it is opened. However, if we also add a leadingIcon to a DropdownMenuEntry, we also get the extra leading space and things do not line up.
For more information, see issue #131350, fixed by PR #135004.
Chips umbrella issue#
Chip does not conform to Material3 design spec when useMaterial3 is enabled. See umbrella issue #115364 for details.
The theme related issues listed in the Chips umbrella issue have been fixed since Flutter 3.13. However, some of the Chips theming limitation issues will need further investigation and still appears to apply when theming Chips. New issue(s) demonstrating remaining theming limitations will need to be created to get them addressed. One of the issues listed issues in the Chip umbrella issue is still open, but considering the main issues in it closed and will track new specific issues via new issues.
NavigationDrawer selected item has wrong icon color#
NavigationDrawer does not follow Material3 spec.
Based on published spec the color should
in Flutter be ColorScheme.onSecondaryContainer. For more information, see issue #129572. Fixed via PR #129625.
SearchBar InputDecorator issue#
SearchAnchor.bar picks up app InputDecorator theme, and it cannot be removed.
For more information, see issue #126623.
Fixed via PR #127465.
DatePicker divider issue#
Chips state elevation issues in M3#
Chip variants in M3 should have state elevations when interacted with, they do not. See issue #115825. Fixed via PR #128049. Unverified if the fix is 100% correct based on M3 Web spec (like dragged elevations) and all the Chip variants elevations, but it is definitely much better.
Chips missing pressed/splash effects on actionable Chips in M3#
Chips when using color on them. See issue #115824. The ink effects get covered by color on the used Material the button is constructed off.
Fixed via PR #124673.
Chips background cannot be state adaptive#
SliverAppBar.medium and SliverAppBar.large Theming and Default Values Issue#
AppBar's foreground theme color, from theme or widget foreground color properties are not applied to action icon color for SliverAppBar.medium and SliverAppBar.large. The defaults for M2 foreground color on a SliverAppBar.medium and SliverAppBar.large are incorrect in light theme mode when using Material-2. For more information, see issue #123943.
Fixed via PR #123293.
MenuButton text animates on hover/focus/press state#
MenuButton items when using inverse text color on selected item, compared to unselected items, can be removed with a ButtonStyle property on MenuButtonThemeData. FlexColorScheme version 7.2 added this setting to FIX this issue. In FCS 7.1 and earlier, the issue still exists.
Original issue text was: A menu selection label is not supposed to animate when it is highlighted, nor does it do so on icons in the menu, only on the text. For more information, see issue #23615.
DropdownMenu's menu overlay size issue#
DropdownMenu is placed in a ListView, the menu overlay expands to the width of the layout. This is a minor issue. You can work around it by placing the DropdownMenu e.g. in a Column in the ListView. Interestingly, when opening a menu overlay from a MenuBar or the MenuAnchor, even when they are placed in a ListView, they do not exhibit this behavior. Neither does DropdownMenu, if it is in a Column. For more information, see issue #123631.
InputChip, a disabled selected InputChip has wrong color in M3#
InputChip color used in M3, see issue #115826.
A fix exists in master, but based on an initial view of the fix, the fix may still suffer from unexpected results when theming Chips. It will need to be further investigated, and a new issue opened if that is the case. Has a fix PR #120192 in master, is now in 3.10 stable.
SegmentedButton segments background cannot be made transparent#
SegmentedButton unselected button segments, as having transparent color, used to show background color of surface it is placed upon. This is needed for it to work well on elevation-tinted surfaces in Material-3 design. See issue #123292, it has a merged fix in beta 3.10 and master via PR #123293.
SegmentedButton has wrong M3 defaults#
SegmentedButton uses wrong default color for unselected item color, it uses primary color, it should be onSurface. See issue # 119733 for more information. FCS7 includes a theme fix for this working already in Flutter 3.7. Has a fix PR #120095 in beta 3.10 and master, not yet landed in stable, is in 3.10
NavigationDrawer indicator overlay does not use shape#
NavigationDrawer shape is modified via indicatorShape by widget or theme, from its default M3 StadiumBorder shape, the indicator correctly gets the new shape, but InkWell used by overlay color for focus, hover and pressed state do not use the specified shape. For more information, see issue #123324, it has a merged fix in master via PR #123325.
TabBar bottom divider, in M3, does not use its theme property color value#
dividerColor in the TabBarThemeData was never applied to the used divider on the bottom of the TabBar that is part of the M3 spec. It was used when passed via widget dividerColor, but ignored when set via TabBarThemeData. There is no report submitted for this issue. The fix was added in master without any reported issue, or at least there is no linked issue. Has a fix PR #119690 in beta 3.10 and master, is now in stable 3.10.
UnderlineInputBorder missing equality property#
UnderlineInputBorder has gaps in its equality operator and hashCode in Flutter SDK, it is missing the borderRadius property. See issue #118282.
This can be seen in the Themes Playground app where changing the controller value borderRadius on the used UnderlineInputBorder property does not trigger a rebuild of the Theme via Listenable in the AnimatedBuilder, since the value change is not observed because the property is not included in the object equality. Equality remains true, even though one of its property values has changed. Has a fix PR #118284 in master, is now in 3.10 stable.
BottomAppBar background color cannot be changed in M3#
BottomAppBar cannot be changed when enabling Material-3 in Flutter. This applies to using its color property, theme, and any other means of trying to change its background color. This is bug in Flutter 3.7. There is a fix PR #117082 in the master channel. It is from December 16, 2022, but it did not get included in the Flutter 3.7 Jan 25, 2023 release. The issue is also reported in the FlexColorScheme repo here FCS #115.
Has a fix PR #117082 in master, is now in 3.10 stable.
BottomAppBar incorrectly has a shadow in M3, should not have based on M3 spec#
BottomAppBar does not match M3 spec, it incorrectly has a shadow. See issue #118150.
Has a fix PR #121406 in master, is in 3.10.
BottomSheet incorrectly has a shadow in M3, should not have based on M3 spec#
BottomSheet incorrectly has a shadow in M3 mode. See issue #118244. Has a fix PR #121406 in master, is in 3.10.
SliverAppBar medium and large can not set foreground color#
foregroundColor for the new Material-3 style SliverAppBar.large or SliverAppBar.medium either via an AppBarTheme or their properties, the defined color is not getting applied to the AppBaras it should. See issue #110951. Has a fix PR #118322 in master, is in 3.10.
NavigationBar ink ripple moves with height changes (Regression)#
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 was caused by a regression in Flutter 3.7. It did not exist in Flutter 3.3 and earlier. It is also fixed in the current master channel via PR 117473.
NavigationBar ink ripple does not follow M3 spec#
NavigationBar has a Material-2 styled ink effects also when opting in on Material-3. This is not according to Material design specification. See issues #113870 and #114618 for more information. This issue was fixed via PR #115499.
Typography switching causes a crash#
Typography change crash workaround. The Typography changes now also correctly lerp animate when the setting is toggled in the Themes Playground app.
Switching Typography dynamically in Flutter SDK ThemeData was broken for many years, see issue #103864 for more information. If it was done and the error ignored, an app doing so eventually become unstable. A fix PR #110870 solved the issue and is included in Flutter 3.7 stable and later, but it is not available in the Flutter 3.3 stable channel.
Versions 5.0.0 to 6.1.2 of Themes Playground app contained a workaround to avoid issue #103864. The workaround was done by always using the 2021 Typography, and simulating 2018 Typography. This was implemented by using a custom TextTheme that made it look like the 2018 Typography was used when using the Material-2 theme mode. The Playground App actually always stayed in 2021 Typography, but it looked like it switched. Which it accomplished by applying a custom TextTheme to 2021 Typography, that made it look like the 2018 Typography was being used. Other FlexColorScheme example applications, avoided the issue by only using the M3 2021 Typography, and not even mimicking a switch between M2 and M3 Typography.
The above workaround was needed because the Playground app has toggles that switch Typography frequently, without the workaround it eventually crashed. With this workaround, it never switched Typography. It just looked like it did, but the app stayed in 2021 Typography all the time. The by Themes Playground generated ThemeData config use the actual real effective Typography. This was also fine, since an app using the theme would likely never switch used Typography. However, if it does, it will face the same issue as the Playground app did.
AppBar icon theme is not respected (Regression)#
AppBarTheme properties iconTheme and actionsIconTheme are ignored when useMaterial3 is true. This was not seen in Flutter stable 3.0.5, but is now in 3.3.0. See issue#107305, that was fixed via PR #108332 in master. The fix did not land in Flutter 3.3.0, as mentioned in issue #110878 it regressed into stable 3.3 release, even though it was fixed in master 28 days before stable 3.3 release.
Elevation issues when opting in on M3#
TimePickerDialog does however not yet have M3 support in Flutter 3.7. However, FCS 7.0 styles it correctly anyway, but the elevation can not be changed from its default value. The elevation property does not exist in Flutter 3.7 theme for TimePickerDialog, it does exist in master. The TimePickerDialog M3 implementation in master still has some issues, see 118657, which is probably why it did not land in Flutter 3.7.
In Flutter 3.0 and 3.3, when opting in on useMaterial3:true, the Material widget and other SDK widgets built on it, gets no elevation when only the elevation property is defined. It is required to also define shadowColor and/or surfaceTintColor to get any elevation effect. When using the Material widget itself this is easy to address. However, widgets like Drawer, PopupMenuButton, BottomNavigationBar, NavigationRail, Dialog, AlertDialog, TimePickerDialog, DatePickerDialog, MaterialBanner and BottomSheet do not expose these Material properties and cannot be elevated.
The issue is reported and tracked here #107190 and also mentioned in the FlexColorScheme repo here
#54. There are no good workarounds for using elevation on these widgets when useMaterial3 is true. The options are to not use M3. However, if such elevations are important to your app design, one working fix is to wrap those widgets in a theme where useMaterial3 is false, the rest of your app can still use it. This is a rather tedious workaround. Due to this current SDK Material elevation issue when useMaterial3 is true, it is recommended to avoid opting in on Material-3 if correctly elevated Material on Dialogs, Drawers, BottomSheet and PopupMenuButton are critical for the app's design. Dialogs and Drawers use a scrim, so the issue was not so bas when using them, but it was very problematic on e.g. BottomSheet and PopupMenuButton. FlexColorScheme 6.1 release included a theme fix to apply elevation color to the themed backgrounds of these two widgets as a workaround this issue. This workaround has been removed in FlexColorScheme 7 and later as no longer needed in Flutter 3.7.
This PR #110624 addresses the default elevation issue for Material, but it is not yet available in Flutter 3.3. It also does not fully solve the poor dark mode PopupMenuButton style, that needs widget level support for it to work properly.
Chip (vanilla) has no M3 style#
Chip theme in Flutter 3.3 does not M3 style the plain vanilla Chip. A proposal to fix this can be tracked via issue #109470. This issue has been fixed in the master channel via PR #111597, but it never landed in the 3.3 stable releases.
System Navigation Bar issue on A11 (Android)#
FlexColorScheme.themedSystemNavigationBar.FlexColorScheme.themedSystemNavigationBar implementation:
- The divider feature was disabled (until the issue was solved).
- A temporary workaround implemented for Android 11. It managed to keep system icons from getting the wrong brightness on Android 11 by calling systemChrome twice.
The temporary changes were reverted by FlexColorScheme version 7. Other related issues on the Android System Navigation Bar topic worth tracking is the umbrella issue "System Navigation Bar APIs are Confusing" #112301.
TextField in Material-3 has the wrong hovered and focused styles#
TextField gets wrong focused and hovered styles in some states. See issue #113329 for details. The PR #113776 in the master channel fixes the issue. This issue only occurred in the master channel, because M3 mode support for TextField did not exist in the Flutter stable 3.3 channel. This issue never regressed to the stable channel.