Container inside Card not same surface color

[abibiano]

Can someone explain me why if I put a container inside a Card with Theme.of(context).colorScheme.surface is not the same color as if I use it on the Card background?

  Card(
    color: Theme.of(context).colorScheme.surface,
    child: Row(
      children: [Container(color: Theme.of(context).colorScheme.surface)],
    ),
  ),

I'm using useMaterial3: true

[rydmike]

Hi @abibiano thanks for the question and for posting it directly here. It is a good question about Material 3 in general that I think other devs will face at some point too.

Yes what you describe is indeed the case, but only when useMaterial3 is set to true. This is because Card uses elevation tint and defaults to elevation 1.

Elevation "tint" is a new concept in Material 3 design, where surfaces with higher elevation get an increasing mix of colorScheme.primary mixed into the surface color. The higher the elevation (to a certain point) the higher the mix. Actually the mix color is colorScheme.surfaceTint, but it in turn defaults to colorScheme.primary here in SDK, tint color can thus also be different from primary, but it is seldom a good idea design wise.

You can read more about the elevation tint design here: https://m3.material.io/styles/elevation/overview

To get the same color in M3 on Cards, set the Card.elevation to 0, or set the Card's surfaceTint to Colors.transparent, to remove the elevation tint.

But probably you want to keep the elevation tint of Cards in M3, and you really should, and need that same color somewhere else in your Card, I totally get that. Then you can use the same algorithm the framework uses to also calculate the same tinted surface color, and use it e.g. in the Container.

To do so we need to see how the Card gets its surface tint. It does so from Material here.

There it uses the ElevationOverlay.applySurfaceTint function to modify the surface color based on elevation. The tint is basically just a simple alpha blend, but it is has a step function with inputs that matches the M3 elevation color spec. See details here and dig further into how it gets the values it uses for the alpha blend. Not so relevant to using it though, but interesting to know.

Long story short, to give the Container the same color as the M3 elevated Card, you can use:

 final ColorScheme scheme = Theme.of(context).colorScheme;
 final Color currentBackground = ElevationOverlay.applySurfaceTint(scheme.surface, scheme.surfaceTint, elevation);

Where elevation is whatever elevation your Card has.

---

Material 2 actually use a similar elevation tint, but only in dark mode, it makes higher elevated surfaces and Cards less dark. This only happens if you in ThemeData set applyElevationOverlayColor to true, which you should for a correct M2 design. It is false by default in standard ThemeData, to not break legacy designs/apps. FlexColorScheme sets it to true by default in M2 dark mode, as it is the more correct M2 design.

---

Below Cards are shown in M3 at different elevation with M3 baseline theme, showing the tint strength increasing at higher elevation:

Hope this helps and answers the question 😄 💙

BR
Mike

[abibiano]

Thank you very much for your very detailed answer.