Fixing Surface Color Roles In Flutter

Fred Grott
4 min readNov 30, 2023

--

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 screens, we needed more Surface Color Roles in order to denote the color roles of the content panes in the canonical layouts. Added to that is the full final change to dynamic color, in which one will use the dynamic scheme from the Material Color Utilities package that the Flutter SDK imports.

The core of the solution is the understanding that the new Surface Color Roles map to the Elevation values in determining the tint color applied. Here is where some engineering comes in as I use the Flex Color Scheme to generate my themes including the color scheme. Flex Color Scheme uses an independent soft fork of the MCU package as part of the imported Flex Seed Scheme package.

If I re-use the elevation values in determining tint color to fix the surface color per the new surface tones, it will continue to work with my Flex Color Scheme theme generation stack. And when the change to use dynamic scheme finally makes it through in about 6

--

--