Material Design 3 Themes In Depth

Google never shows the cross-platform way to do themes in Flutter, specifically the Material Design way, where the Cupertino Widgets get the Material Design colors and typography.

I am going to show how to do this using one of the Flutter Platform widgets cross-platform packages; but they all work the same way in that they do Platform Widgets with Material and Cupertino builders so that Cupertino widgets get dynamically delivered to Apple devices.

Let’s get started.

What Am I Using

Flutter Platform Widgets:

flutter_platform_widgets | Flutter Package

These two packages provide the Material Design 3 color features:

material_color_utilities | Dart Package

dynamic_color | Flutter Package

And of course the custom Google open source fonts:

google_fonts | Flutter Package

The Flutter Platform Widgets Wiring

The FPW wiring at the app top level is:

The twist for Material Design on Cupertino Widgets is that you re-use the Theme data logic of: