What Google Is Hiding About The Flutter Theme Mess

Fred Grott
6 min readSep 10, 2022

t would be nice if when we see a new iteration of Material Design in Flutter that we actually get that Material Design iteration fully in Flutter. Yeah, it would be nice, but then we hit the reality of Google having finite resources to put towards 3 different front-end frameworks. But, here you and I as app designers are stuck in that if we follow the Flutter Docs advice we do not get full latest Material Design iteration look of our flutter awesome app. Thus, how do we with code get the design tools to get full Material Design, what is it, oh yeah Material Design 3(aka, Material You).

Now, I want to explain how we got here. When Flutter first started, the Flutter SDK team came up with Material Themes and Material Widgets. Then they targeted the iOS platform and came up with Cupertino Widgets and two modes of theme-ing Cupertino widgets; one is no themes at all and Apple Flat UI default colors and one is Material Theme-ing applied to Cupertino Widgets.

The other reality-intruding aspect is that the Flutter SDK team created a concept of ThemeData but goofed up and kept the definition of that loose and thus polluted that class with 21 grab-bag color items among other things. But together, what does that give us when we attempt to say turn on the useMaterialLatestIteration flag?

At the moment, even though Google has announced Material Design 3 for Flutter 3.3; we in fact cannot get Material Design 3 fully applied to Flutter widgets. In fact, we have overlay mismatches of colors on dark with elevation shadows for things like popups, drawers, etc.

What Google is hiding is that some Flutter Community forces have come together to provide solutions to these areas and that you can really in fact develop a design strategy that gives you 99 percent of the full current Material Design iteration even though the Flutter SDK team really fully never finishes a Material Design iteration implementation. Ah-ah, an example from Material Design 2 is that the navigation rail was never to full material design 2 spec in any version of flutter 2.x. It only recently was brought into material design compliance after…

--

--