New In Flutter And Material Design 3, Surface Tints

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:

And the Material Card Theme

But what about the navigation elements? Okay, let’s look at the elevation overlay code:

That means as long as we have Surface Tint applied in ColorScheme that the color will be applied properly to the surface elements of screen if no card, material card, and navigation elements.