Animating Material Layers, Shadows

You might not realize that you can stack in two different directions. There is the declarative widget tree stacking and the Stack widget itself of stacking something via layout. But that is not the only stacking you can do, as the container has three layers of the background, foreground, and the child widget.

Let me show you how to turn off elevation shadows and implement shadows a slightly different way.

Elevation Overlay

So let’s learn about Flutter internals, as once you know them you can go off and create your own design twists of Material Design. The way Elevated Overlays are simulated in Flutter is via the concept of all containers having a background and foreground layer. This is why all containers have both a background decoration labeled decoration and a foreground decoration.

Thus, if you want to have colored shadows in Dark Mode, you can turn off applyElevatedOverlay and wrap the UI elements and simulate the shadows via BoxShadow decorations.

So why do this? Because I can get a consistent visual brand emphasis both ion Light and Dark modes. Now onward to an actual implementation.

The Implementation

Here is a screenshot of a basic implementation: