A Material Design 3 Outlined Card Implementation

While I am finishing my mobile flutter UI kit, let me show you how to implement the new Material Design 3 Outlined Card.

Hybrid versus Complex widgets

As of material design 3, complex widgets changed to the term hybrid widgets. It’s still the meaning that we have a widget container that has multiple UI elements in it that act as content UI unit.

The tricks are that it requires using some specific APIs to create visually stunning things. I am of course referring to other layout APIs such as the CustomSingleChildLayout and CustomMultiChildlayout classes:

CustomSingleChildLayout class - widgets library - Dart API

CustomMultiChildLayout class - widgets library - Dart API

The Boxy package allows us an easier way to access those APIs and get more power to implement stunning hybrid widgets. I am going to use the MD3 card examples to show you how easy it is.

The Outlined Card Implementation

Now, even though I have soft-forked Ball, and Surface; I am still using the same API calls:

Ball:

ball | Flutter Package

Surface:

surface | Flutter Package

And to get easier access and more power to Single and Multiple Child Layout stuff I use Boxy