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.
Flutter SDK: NavigationBar ink ripple moves with height changes (Regression)#
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#
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#
FilledButton.tonal variants separately, see issue #118063.
The new Material 3 buttons
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
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#
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: Cannot set foreground color on SliverAppBar medium and large#
foregroundColor for the new Material 3 style
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#
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#
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#
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#
When opting in on Material 3,
TextField gets wrong
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#
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.
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#
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.
In Flutter 3.0 and 3.3, when opting in on
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
surfaceTintColor to get any elevation effect. When using the
Material widget itself this is easy to address. However, widgets like
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)#
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#
Due to Flutter SDK issue #100027 "Using systemNavigationBarDividerColor changes statusBarIconBrightness and systemNavigationBarIconBrightness on Android 11". Two temporary changes were made to
- 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#
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: Dark mode M2 elevation limitation#
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
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.