Where In The Flutter SDK Is Material Design 3 Elevated Card

With the upcoming Google IO 2022, Android 12, And Material You you would think that we would by now have Elevated Card being found in a recent release of the Flutter SDK. And yet even in Flutter SDK beta it is nowhere to be found. Let me show you how to implement Elevated Card.

What Is Inkwell

In the Material Design 3 Cards, elevated, outlined, and filled, a Material Design Card has UX behavior of state for focused, hover, pressed, and dragged. To get that, we have to start with the Inkwell, and we have to understand what an Inkwell is.

An Inkwell is a deferred Rendering container. What the hell is that? Well, it’s a container that searches up the widget tree to find the nearest Material Widget to do its canvas rendering to.

So now we need to ask another question, is Card a Material Container? As you can see by the last part of the Card dart file:

It is in fact a Material container. What that means is if we make the Inkwell the child of the Card we can cause the surface…