Material Design 3 Elevated Card Implementation Walk Through

Look, until Flutter SDK team gets Android migrated to Fuchsia the Flutter SDK will behind in supporting the lasted iteration of Material Design. So I am going to use the Elevated Card in the Material Design 3 spec as an example and show you how to use the Flutter SDK components and some Flutter magic to make your own new MaterialDesign 3 custom widgets rather than waiting on the Flutter SDK team.

You need to pay attention as Material Container surfaces can be canvas, circle(for FABs), buttons, and cards; and thus the things learned in this article can be re-used for all those things in a Flutter app design.

In this article, you will learn about

-Ink Widget

-InkWell

-Material Container

-BoxDecoration

-BoxShadow(Super Secrete Elevation To Shadow Trick)

-MaterialStateProperty Mixins

-MaterialState

First, we need to know how the original card is implemented

The Material Design 2 Card Implementation

If you look at the Card source code, you will see it’s composed of a Semantics wrapper around a Container to have margins and its child is the…