applyOverlay method Null safety

Color applyOverlay(
  1. BuildContext context,
  2. Color color,
  3. double elevation

Applies an overlay color to a surface color to indicate the level of its elevation in a dark theme.

If using Material Design 3, this type of color overlay is no longer used. Instead a "surface tint" overlay is used instead. See applySurfaceTint, ThemeData.useMaterial3 for more information.

Material drop shadows can be difficult to see in a dark theme, so the elevation of a surface should be portrayed with an "overlay" in addition to the shadow. As the elevation of the component increases, the overlay increases in opacity. This function computes and applies this overlay to a given color as needed.

If the ambient theme is dark (ThemeData.brightness is Brightness.dark), and ThemeData.applyElevationOverlayColor is true, and the given color is ColorScheme.surface then this will return a version of the color with a semi-transparent ColorScheme.onSurface overlaid on top of it. The opacity of the overlay is computed based on the elevation.

Otherwise it will just return the color unmodified.

See also:


static Color applyOverlay(BuildContext context, Color color, double elevation) {
  final ThemeData theme = Theme.of(context);
  if (elevation > 0.0 &&
      theme.applyElevationOverlayColor &&
      theme.brightness == Brightness.dark &&
      color.withOpacity(1.0) == theme.colorScheme.surface.withOpacity(1.0)) {
    return colorWithOverlay(color, theme.colorScheme.onSurface, elevation);
  return color;