Fixing the surface color roles in Material Design 3 in Flutter.
NOTE: My writing about Flutter has moved to my substack at
The story of mid-phase to final tuning in the Material Design specification cycle is all about introduce something new that not only is in the SDK but forces us to change some other UX approach in a major way. Such is the introduction of Canonical Layouts as it not only changes how we implement the material design adaptive scaffold UX patterns but also how surface containers are now implemented, as now they contain a choice of color roles. But, you can use tools out of the Dart SDK and Flutter SDK to fill these implementation holes.
This time around I will explain how to set it up to get more surface role colors before the Flutter SDK fully changes to support it. Why not share this link with your Flutter app designer friends?
Why Do We Have Surface Color Roles?
When the Material Design 3 specification was changed to include Canonical Layouts to adjust to foldables and big…
