Design Implications Of Overriding Flutter 3 Material Design 3 Shadows

There are some design implications of overriding shadows to get more powerful shadows for dark mode in designing and developing flutter apps which are not obvious. But, knowing what they are means you are and I are better empowered to implement our Flutter app design vision.

How We Got Here

When Material Design 2 was first implemented in Flutter, the Flutter SDK team came up with two concepts; the Elevation Overlay and the shadows classes. Let me show you, let’s start with the shadows class:

Things to notice is that they are in fact box shadows in a list array, and that those 12 levels correspond to the Material Design 2 elevation levels. And that it is an indirect overlay in that those box shadows are applied to the foreground of the container. In other words, in terms of layering UI elements, we do not actually physically create another layer containing a UI element.

Now, let’s currently see what is not matching up in Flutter 3. First up, let’s look at the elevation overlay…