How to calculate Card background color if it has non-zero elevation?

[dannylin108]

Sorry, couldn't find the answer in the docs.

So if Card component has zero elevation, its background color is in Theme.of(context).colorScheme.surface. But with non-zero elevation it gets adjusted to visually reflect elevation. So how to calculate it?

[rydmike]

Hi @dannylin108, thanks for your question.

Yes, if the useMaterial3 is false, so that we are using Material2 styles, and when applyElevationOverlayColor is true, which it in Material2 should only be in dark mode (FlexColorScheme defaults to this), then the background color will change with higher elevation and get lighter automatically in dark mode.

This only happens if the used background color of the elevated material has the same color as Theme.of(context).colorScheme.surface. Some FlexColorScheme surfaceModevalues will use a blend strength for ThemeData.backgroundColor that makes it diverge from surface (and canvasColor), such surfaces will then not get an overlay color in dark mode, this is known limitation in the Flutter SDK, see more info here: flutter/flutter#90353

The Flutter SDK framework provides the algorithm for this Card and Material color change due to elevation via the function ElevationOverlay.applyOverlay for Material2 style, it uses alpha blend and a computed elevation based overlay color using this algorithm:

  /// Applies an opacity to [color] based on [elevation].
  static Color _overlayColor(Color color, double elevation) {
    // Compute the opacity for the given elevation
    // This formula matches the values in the spec:
    // https://material.io/design/color/dark-theme.html#properties
    final double opacity = (4.5 * math.log(elevation + 1) + 2) / 100.0;
    return color.withOpacity(opacity);
  }

If you have useMaterial3 set to true, then the algorithm is different and it used in both dark and light mode, there is another function used then called ElevationOverlay.applySurfaceTint.

You can see how the Material widget's (Card widget is built using Material Widget) elevation is done here:
https://github.com/flutter/flutter/blob/a78d8a20b7135a0264d38546a8c52e9519631bad/packages/flutter/lib/src/material/material.dart#L860

And the actual color calculation functions are found in the Flutter SDK class ElevationOverlay that only contains a few of static functions that handle the elevation based color calculations for both Material2 and Material3, you can find it here:

https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/elevation_overlay.dart

Hope this answers your question 😃 💙

BR Mike