New In Flutter And Material Design 3, Surface Tints
2 min readApr 28, 2022
Surface tint support is starting to appear in Flutter 2.13.2 beta. Surface tints is the Material Design 3 new way that overlays are applied to Material surfaces. Let me show you how Surface Tints work.
What Do Surface Tints Do
In Material Design 3, overlays applied a dark color to any surface. In Material Design 3 any primary surface gets a surface tint applied. A Surface Tint is just the overlay opacity from elevation applied to the primary color.
In Material Design 3, the primary surfaces are screen surface if no Material Card is applied, Material Card and Navigation elements. A typical Surface Tint usage looks like this:
Using Surface Tints
Thus far, in Flutter 2.13.2 beta, we only have surface tint support in the ColorScheme and Material Card. A typical color scheme usage is:
