LogoFlexColorScheme

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: SearchBar InputDecorator issue#

Applies to Flutter stable 3.10.

SearchAnchor.bar picks up app InputDecorator theme and it cannot be removed. For more information, see issue #126623.

Flutter: DatePicker InputDecorator issue#

Applies to Flutter stable 3.10.

DatePicker date entry InputDecorator cannot have own theme. For more information, see issue #126597.

Flutter: DatePicker divider issue#

Applies to Flutter stable 3.10.

DatePicker Divider cannot be removed or styled, it does not fit with a custom header background. For more information, see issue #126597.

Flutter: IconButton theming destroys variant styles#

Applies to Flutter stable 3.10.

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#

Applies to Flutter 3.7 and 3.10.

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: Menu button text animates on hover/focus/press state#

Applies to Flutter 3.7 and 3.10.

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.

Flutter: NavigationDrawer wrong default width in M3#

Applies to Flutter 3.7 and 3.10.
Has a theme fix in FlexColorScheme, so this is not an issue when using FlexColorScheme. However, using the M3 spec width is problematic in many cases.

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: NavigationDrawer indicator is centered when sized#

Applies to Flutter 3.7 and 3.10.

See umbrella issue #123507 for more information.

Flutter: NavigationDrawer ink size does not follow indicator size#

Applies to Flutter 3.7 and 3.10.

See umbrella issue #123507 for more information.

Flutter: NavigationDrawer ink effects do not follow M3 spec#

Applies to Flutter 3.7 and 3.10.

See umbrella issue #123507 for more information.

Flutter: NavigationDrawer ink effect colors cannot be changed#

Applies to Flutter 3.7 and 3.10.

See umbrella issue #123507 for more information.

Flutter: NavigationDrawer drawer size change animation overflows#

Applies to Flutter 3.7 and 3.10.

See umbrella issue #123507 for more information.

Flutter: NavigationDrawer Label is not truncated to fit#

Applies to Flutter 3.7 and 3.10.

See umbrella issue #123507 for more information.

Flutter: Height of SegmentedButton does not match Material3 spec and cannot be changed#

Applies to Flutter 3.7 and 3.10.

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: SegmentedButton OverlayColor MaterialState incorrectly set#

Applies to Flutter 3.7 and 3.10.

The SegmentedButton sets its MaterialState incorrectly for overlayColor in its used ButtonStyleButton segments. See issue 123308.

Flutter: FilledButton theming limitation issue#

Applies to Flutter 3.7 and 3.10.

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#

Applies to Flutter 3.10, 3.7 and earlier.
Has a theme fix in FlexColorScheme, so this is not an issue when using FlexColorScheme.

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 umbrella issue#

Applies to Flutter 3.10 and earlier.

The Chip does not conform to Material3 design spec when useMaterial3 is enabled. See umbrella issue #115364 for details.

Flutter: Chips, which should have state elevations in M3, do not have elevation#

Applies to Flutter 3.7 and 3.10.

Some Chip variants in M3 should have state elevations when interacted with. See issue #115825. They do not.

Flutter: Chips theming limitation issues#

Applies to Flutter 3.10 and earlier.

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: FloatingActionButton theming limitation issue#

Applies to Flutter 3.10 and earlier.

Cannot theme shape and iconSize differently for different sized FloatingActionButton, see issue #107946. This issue does not yet (Nov 18, 2022) have any known corrective actions in the master channel.

Flutter: SnackBar theming limitation issue#

Applies to Flutter 3.10 and earlier.

Cannot theme SnackBar shape independently for its different behaviors, see issue #108539. This issue does not yet (Nov 18, 2022) have any known corrective actions in the master channel.

Flutter: TimePicker clock-dial has wrong M3 defaults#

Applies to Flutter 3.7 and 3.10.
Has a theme default fix in FlexColorScheme, this not an issue when using FlexColorScheme.

The TimePicker clock-dial uses wrong spec color, and its M3 web spec has a mistake. See issue #118657.

Flutter: Wrong contrast color on ThemeData.primaryTextTheme in dark mode#

Applies to Flutter 3.10 and earlier.
This has a theme fix in FlexColorScheme, so this is not an issue when using FlexColorScheme.

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#

Applies to Flutter 3.10 and earlier.

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#

Applies to Flutter 3.7 and 3.10.
Has fix PR #124673 in master, but did not land in stable 3.10..

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#

Applies to Flutter 3.7 and 3.10.
Has a fix PR #123293 in master, not yet landed in stable 3.7 or 3.10.

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#

Fixed in Flutter 3.10.
Applies to Flutter 3.7.

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#

Fixed in Flutter 3.10.
Applies to Flutter 3.7.

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#

Fixed in Flutter 3.10.
Applies to Flutter 3.7.

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#

Fixed in Flutter 3.10.
Applies to Flutter 3.7.

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#

Fixed in Flutter 3.10.
Applies to stable Flutter 3.7.

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#

Fixed in Flutter 3.10.
Applies to Flutter 3.7 and earlier.

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#

Fixed in Flutter 3.10.
Applies to stable Flutter 3.7.

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#

Fixed in Flutter 3.10.
Applies to Flutter 3.7.

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#

Fixed in Flutter 3.10.
Applies to Flutter 3.7.

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#

Fixed in Flutter 3.10.
Applies to Flutter 3.7 and earlier.

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#

Fixed in Flutter 3.10.
Applies to Flutter 3.7.
Has a theme default fix in FlexColorScheme v7, so this is not an issue when using FlexColorScheme.

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)#

Fixed via PR #117473 and cherry-picked via CP #119553 to 3.7.2.
Applies only to stable Flutter 3.7.0 and 3.7.1.

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#

Fixed in Flutter 3.7.
Applies to Flutter 3.3 and earlier.

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#

Fixed in Flutter 3.7.
Applies to Flutter 3.3 and earlier.

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)#

Fixed in Flutter 3.7.
Applies to Flutter 3.3.0 to 3.3.10.

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#

Fixed in Flutter 3.7.
Applies to Flutter 3.3 and earlier.

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#

Fixed in Flutter 3.7.
Applies to Flutter 3.3 and earlier.

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#

Fixed in Flutter 3.7.
FlexColorScheme 7.0.0 has removed past used workaround it used to correct the issue on Android 11. It also again enabled the divider option in its 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#

Only occurred temporarily in master 3.7. Never landed in any stable Flutter version

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.