LogoFlexColorScheme

Known Issues

The chapter lists known issues. Currently, all known issues impacting FlexColorScheme are rooted in Flutter SDK issues and typically cannot be fixed in the package. All known issues are being tracked, and status changes will be updated below. A few below listed Flutter SDK theming issues, have workarounds or fixes included in FlexColorScheme. Such workaround cases are also mentioned in the issues below.

Found an issue?#

Did you find an 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.

Flutter SDK: NavigationBar ink ripple moves with height changes (Regression)#

Applies only to Flutter 3.7

If you change the NavigationBar from M3 default value of 80dp, the ink level moves up or down with same amount as the devation from the default 80dp height. See issue report and illustration here FCS #114 as well as in Flutter SDK issue #117420. The issue is caused by a regression in Flutter 3.7. It does not exist in Flutter 3.3 and earlier. It is also fixed in the current master channel via PR 117473. Hopefully this fix PR will be cherry-picked into next/first Flutter 3.7 hotfix, so we do not have to wait for the next stable release. This is still not decided though.

Flutter SDK: Known minor M3 specification deviations#

Applies to Flutter 3.7 and earlier, if widget with spec issue supported M3 in earlier versions

The following M3 themes in Flutter 3.7 have minor deviation errors from their Material 3 specification.

  • TimePicker clock-dial use wrong spec color and its web spec has a mistake. See issue #118657. FCS includes a theme fix for this.
  • BottomSheet has incorrect shadow. See issue #118244
  • BottomAppBar does not match M3 spec, incorrect shadow. See issue #118150.
  • Wrong selected and disabled InputChip color, see issue #115826
  • Missing state elevations on Chips. See issue #115825
  • No Ink Splash on Actionable Chips when using color on them. See issue #115824

Flutter SDK: FilledButton theming limitation#

Applies to Flutter 3.7

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 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 SDK: Divider color inconsistencies#

Applies to Flutter 3.7 and earlier

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 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 used theme creation factory and M2/M3 mode. See issue 117755.

FlexColorScheme includes custom 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.

Flutter SDK: Chips in Material 3 mode do not follow the M3 specification#

Applies to Flutter 3.7 and earlier

The Chip does not conform to Material3 design spec when useMaterial3 is enabled. See umbrella issue #115364 for details. No known corrective actions yet (Nov 18, 2022).

Flutter SDK: Cannot set foreground color on SliverAppBar medium and large#

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. This issue has been fixed in the master channel via PR #118322 but it has not landed in stable 3.7.

Flutter SDK: UnderlineInputBorder#

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. This issue has been fixed in the master channel via PR #118284, but it has not landed in Flutter stable 3.7.

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

Applies to Flutter 3.7 and earlier

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 a none issue in FCS. It is included here as information and for tracking purposes.

Flutter SDK: 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. Issue was fixed via PR #115499.

Flutter SDK: TextField in Material 3 has wrong hovered and focused styles#

Only occurred in master, appears to not have landed in any Flutter stable 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 does not exist in the Flutter stable 3.3 channel. Hopefully, this issue will never regress to the stable channel. We will not be sure until the next stable version after Flutter 3.3 is released though.

Flutter SDK: Switching Typography dynamically causes a crash#

Fixed in Flutter 3.7

The Themes Playground version 7, removes the Typography change crash workaround. Typography changes now correctly lerp animate when the setting is toggled in the Themes Playground app.

Applies to Flutter 3.3 and earlier

Switching Typography dynamically in Flutter SDK ThemeData is broken, see issue #103864 for more information. If it is done and the error is ignored, an app doing so eventually becomes unstable.

The Themes Playground app contains a workaround to avoid issue #103864. The workaround is done by always using the 2021 Typography, and simulating 2018 Typography. This is implemented by using a custom TextTheme that looks like the 2018 Typography is used when using the Material 2 theme mode. The Playground App actually always stays in 2021 Typography, but it looks like it switches. Which it does by applying a custom TextTheme using in 2021 Typography, that makes it look like the 2018 Typography is being used. All other examples also avoid the issue by only using the M3 2021 Typography and not even mimicking a switch between M2 and M3 Typography.

The above workaround is needed because the Playground app has toggles that switch Typography frequently, without the workaround it will eventually crash. With this workaround, it never switches Typography. It just looks like it does, but app stays in 2021 Typography all the time. The by Themes Playground generated ThemeData config will use the actual real effective Typography. This is also fine, since an app using the theme will likely never switch used Typography. However, if it does, it will face the same issue as the Playground app did. The issue is a Flutter SDK issue that FlexColorScheme cannot fix. Most likely, 99% of apps will never run into this issue.

A fix PR #110870 for this issue now exists in the master channel, but it is not available in the Flutter 3.3 stable channel.

Flutter SDK: Elevation issues when opting in on useMaterial3#

Fixed in Flutter 3.7

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. Master TimePickerDialog M3 implemntation still has some issues, see 118657.

Applies to Flutter 3.3 and earlier

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.

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 SDK: AppBar icon theme not respected (Regression)#

Fixed in Flutter 3.7
Applies to Flutter 3.3 and earlier

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 SDK: Android System Navigation Bar#

Current status to be re-checked. Partial fix may exist even if the issue is still open

Due to Flutter SDK issue #100027 "Using systemNavigationBarDividerColor changes statusBarIconBrightness and systemNavigationBarIconBrightness on Android 11". Two temporary changes were made to FlexColorScheme.themedSystemNavigationBar implementation:

  • The divider feature is disabled until the issue has been resolved.
  • There is a temporary workaround implemented. It manages to keep system icons from getting the wrong brightness on Android 11 by calling systemChrome twice.

The temporary changes will be reverted when a working fix for the Flutter issue has reached the stable channel. There is a related issue on the topic worth tracking here #112301.

Flutter SDK: 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 has not yet landed in the stable channel.

Flutter SDK: Chips theming limitation#

Applies to Flutter 3.7 and earlier

Cannot make themed Selected and disabled ChoiceChip, FilterChip and InputChip follow M3 spec by using theming, see issue #115827.

Flutter SDK: FloatingActionButton theming limitation#

Applies to Flutter 3.7 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 SDK: SnackBar theming limitation#

Applies to Flutter 3.7 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 SDK: Dark mode M2 elevation limitation#

Applies to Flutter 3.7 and earlier

The 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 #90353"

Version 4.0.0 and later addresses this limitation by introducing more color blend modes that keep the 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 M2 will never be fixed in Flutter, it is documented as something to be aware of. The work-around introduced in FCS is sufficient in most cases. The elevation tint in M3 does not have this equivalent limitation.