Known Issues
All currently known issues impacting FlexColorScheme are rooted in Flutter SDK framework issues and typically cannot be fixed in the package. The known issues are being tracked, and status changes are occasionally reviewed and updated below, especially when there is a new Flutter stable version release, including hot-fixes. Some below-listed Flutter SDK theming issues have workarounds included in FlexColorScheme. Such workaround cases are also mentioned in the issues below.
Found an issue?
Did you find a new issue? Is it a FlexColorScheme issue? Please open it as a new issue in the project GitHub repo. If you have a question about FlexColorScheme and its usage, you can post it as a question in the repo discussions. If it is a theming issue caused by the Flutter SDK framework, please report it directly in Flutter issues.
Not Fixed#
Issues below have not been fixed yet, or if it has a fix, it has not yet been merged into Flutter master.
Flutter: IconButton theming destroys variant styles#
If we add theming to IconButton's IconButtonThemeData, we lose the style of all the variant IconButtons IconButton.filled, IconButton.filledTonal and IconButton.outlined. They all get the same style as IconButton. For more information, see issue #123829.
Flutter: DropdownMenu themed focused item broken#
The style indication of the found and focused/selected item in a DropdownMenu does not use MenuButtonThemeData. Its simulation of the focused state omits the theme. This makes it impossible to provide a consistent style for the focused/selected item when using a custom theme in a DropdownMenu. We have to use the default style for the entire menu, or accept a deviant and out-of-style looking focused/selected item. For more information, see issue #123736.
Flutter: NavigationDrawer wrong default width in M3#
The NavigationDrawer drawer width does not follow Material-3 specification. Reference: Material 3 Design Navigation Drawer specification. It might, however, not be such a good design to use the M3 360 dp spec as width. For more information, see issue #123380.
It remains unknown what the response and view from the Google Material design team on the matter is.
Flutter: Height of SegmentedButton does not match Material3 spec and cannot be changed#
The Material-3 specification gives a height of 40 dp for Segmented buttons and a recommended TapTargetSize of 48 dp. This cannot be achieved in Flutter since the minimumSize style-property does not affect the widget. The correct minimumSize was actually set as default value in PR #120095, but is not honored, see issue #121493.
Flutter: FilledButton theming limitation issue#
Cannot theme FilledButton and FilledButton.tonal variants separately, see issue #118063.
The new Material 3 buttons FilledButton and FilledButton.tonal cannot be themed separately to use different styles from each other. This is in conflict with their default themes where these buttons can use different styles and do look different. However, if you use FilledButtonThemeData in ThemeData to try to color style the buttons, both variants will become identical since they share the same FilledButtonThemeData. This effectively renders theming of the FilledButton less usable, since e.g. theming its color properties makes the variants look identical.
Flutter: Divider color inconsistencies#
The introduction of M3 and some newer theme factories/properties have led to inconsistent divider colors that may cause theme color behavior confusion for developers. Some results are also not according to the M2 or M3 specification.
The issue is seen as where Theme.of(context).dividerColor will have one color, but Divider widget will actually use another color. Which color they get, and what color is actually used where, depends on the used theme creation factory and M2/M3 mode. For more information, please see issue 117755.
FlexColorScheme includes theming for the divider, to ensure consistent color on all divider theme related colors. There is also an optional quick setting to enable using opacity based M2 divider style in Material 3 mode. The M2-styled divider is less prominent than using intended M3 ColorScheme.outlineVariant and may work better on backgrounds that do not have primary color-tinted backgrounds. The default M3 divider has no opacity and is color tinted by the theme's primary color. This may not be visually ideal on backgrounds that are not plain white/black or use primary color-tinted surfaces. With default M3 ColorSchemes this is not a big problem, but even with it, the default Divider color may not work so well on tertiary and its container color in a pure M3 design.
Flutter: Chips theming limitation issues#
Cannot make themed Selected and disabled ChoiceChip, FilterChip and InputChip follow M3 spec by using theming, see issue #115827.
The current messy Chips theming situation and limitations was caused by the fact that Chips M3 implementation should probably not have re-used their old M2 base. It had too many limitations and lacked support for many features required by M3 Chips. In defense of the made choice, when it was decided to re-use their M2 base, the M3 Chip specification did not have all their individual states and interactions included in the M3 guide and specification, that now exist in it.
Chips based on ButtonStyleButton and own theme for each M3 variant Chip, could solve all the issues and allow for flexible styling of the Chips. Currently, the Chips also have some hard coded features that can only be replicated by null theme default behavior via defaults the different M3 Chip variants. As long as you use only the defaults, you are mostly fine, apart from state interactions, but as soon as you try to theme them, you run into limitations and cross over effects between the different M3 Chip variants.
Flutter: Wrong contrast color on ThemeData.primaryTextTheme in dark mode#
When the primary color of the theme requires dark contrast color, the primaryTextTheme gets the wrong contrast color in dark mode. See issue #118146 for more information. FlexColorScheme has always included a theme fix for this issue. It is thus a none issue in FCS. The issue is included here as information and for tracking purposes.
Flutter: Dark mode M2 elevation overlay limitation#
The overlay color or color branding is not applied in Material2 (M2) to Widgets using elevated Material of type canvas in Flutter when using primary-colored surface and backgrounds, and the theme's applyElevationOverlayColor is true. This is caused by this Flutter SDK limitation and issue #90353 "Dark mode elevation overlay color is only applied to Material of type canvas, when surface and background colors are equal".
FCS version 4.0.0 and later addresses this limitation by introducing more color blend modes that keep the surface and background colors equal, in order to not be affected by this limitation. If you are using heavy color branding in dark theme mode, the overlay color may not be necessary.
This limitation in Material-2 will likely never be fixed in Flutter. It is documented here as something to be aware of. The work-around introduced in FCS is sufficient in most cases. The elevation tint in Material-3 does not have this equivalent limitation and thus removes the limitation when going forward with Material-3 theming.
Fixed in Beta or Master#
Issues below have a fix that has been merged in the latest Flutter master channel, some may also be in the latest beta channel, but have not yet landed in any stable version of Flutter. If the mentioned fix is available in current beta 3.10, it will also land in next stable version of Flutter. This version might be called 3.10 or who knows, maybe for marketing purposes Flutter 4.0 with Dart 3.0, but in the next stable none "hot-fix" release anyway. If the fix is only in master channel, it may not make the cut to next stable release.
Flutter: No pressed/splash effects on actionable Chips in M3#
No Ink Splash on actionable 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.
Flutter: SliverAppBar.medium and SliverAppBar.large Theming and Defaults Issue#
The 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 in Stable#
The issues below have a fix that has landed in the latest stable hotfix or earlier version of Flutter. This list is included here since it also shows when past issues apply, if you use another version of Flutter then the latest stable version, with its latest hotfix applied.
Flutter: DropdownMenu's menu overlay size issue#
If a 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.
Flutter: A disabled selected InputChip has wrong color in M3#
Wrong selected plus disabled 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.
Flutter: SegmentedButton segments background cannot be made transparent#
The Material 3 specification depicts 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.
Flutter: NavigationDrawer indicator overlay does not use shape#
If the 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.
Flutter: TabBar bottom divider, used in M3, does not use its theme property color value#
The 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.
Flutter: UnderlineInputBorder#
ShapeBorder on input decorator 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.
Flutter: BottomAppBar background color cannot be changed in M3#
The background color of the 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.
Flutter: BottomAppBar incorrectly has a shadow in M3, should not have based on M3 spec#
The 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.
Flutter: BottomSheet incorrectly has a shadow in M3, should not have based on M3 spec#
The BottomSheet incorrectly has a shadow in M3 mode. See issue #118244. Has a fix PR #121406 in master, is in 3.10.
Flutter: Cannot set foreground color on SliverAppBar medium and large#
When defining 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.
Flutter: SegmentedButton has wrong M3 defaults#
The 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
Flutter: NavigationBar ink ripple moves with height changes (Regression)#
If you change the 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.
Flutter: NavigationBar ink ripple does not follow M3 spec#
The M3 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.
Flutter: Switching Typography dynamically causes a crash#
The Themes Playground version 7, removes the previous extensive 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.
Flutter: AppBar icon theme not respected (Regression)#
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.
Flutter: Elevation issues when opting in on useMaterial3#
The 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.
Flutter: Vanilla Chip has no M3 style#
The 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.
Flutter: Android System Navigation Bar issue on A11#
FlexColorScheme.themedSystemNavigationBar.Due to Flutter SDK issue #100027 "Using systemNavigationBarDividerColor changes statusBarIconBrightness and systemNavigationBarIconBrightness on Android 11", two temporary changes had been made to 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.
Flutter: TextField in Material 3 has wrong hovered and focused styles#
When opting in on Material 3, 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.