Unverified Commit 5df335ad authored by MH Johnson's avatar MH Johnson Committed by GitHub

[Material] Add method to get dark mode overlay color without needing BuildContext (#70669)

parent 178b4b83
...@@ -48,7 +48,7 @@ class ElevationOverlay { ...@@ -48,7 +48,7 @@ class ElevationOverlay {
theme.applyElevationOverlayColor && theme.applyElevationOverlayColor &&
theme.brightness == Brightness.dark && theme.brightness == Brightness.dark &&
color.withOpacity(1.0) == theme.colorScheme.surface.withOpacity(1.0)) { color.withOpacity(1.0) == theme.colorScheme.surface.withOpacity(1.0)) {
return Color.alphaBlend(overlayColor(context, elevation), color); return colorWithOverlay(color, theme.colorScheme.onSurface, elevation);
} }
return color; return color;
} }
...@@ -62,10 +62,26 @@ class ElevationOverlay { ...@@ -62,10 +62,26 @@ class ElevationOverlay {
/// specifies the exact overlay values for a given elevation. /// specifies the exact overlay values for a given elevation.
static Color overlayColor(BuildContext context, double elevation) { static Color overlayColor(BuildContext context, double elevation) {
final ThemeData theme = Theme.of(context); final ThemeData theme = Theme.of(context);
return _overlayColor(theme.colorScheme.onSurface, elevation);
}
/// Returns a color blended by laying a semi-transparent overlay (using the
/// [overlay] color) on top of a surface (using the [surface] color).
///
/// The opacity of the overlay depends on [elevation]. As [elevation]
/// increases, the opacity will also increase.
///
/// See https://material.io/design/color/dark-theme.html#properties.
static Color colorWithOverlay(Color surface, Color overlay, double elevation) {
return Color.alphaBlend(_overlayColor(overlay, elevation), surface);
}
/// Applies an opacity to [color] based on [elevation].
static Color _overlayColor(Color color, double elevation) {
// Compute the opacity for the given elevation // Compute the opacity for the given elevation
// This formula matches the values in the spec: // This formula matches the values in the spec:
// https://material.io/design/color/dark-theme.html#properties // https://material.io/design/color/dark-theme.html#properties
final double opacity = (4.5 * math.log(elevation + 1) + 2) / 100.0; final double opacity = (4.5 * math.log(elevation + 1) + 2) / 100.0;
return theme.colorScheme.onSurface.withOpacity(opacity); return color.withOpacity(opacity);
} }
} }
...@@ -362,6 +362,35 @@ void main() { ...@@ -362,6 +362,35 @@ void main() {
expect(model.color, equals(surfaceColorWithOverlay)); expect(model.color, equals(surfaceColorWithOverlay));
expect(model.color, isNot(equals(surfaceColor))); expect(model.color, isNot(equals(surfaceColor)));
}); });
testWidgets('Expected overlay color can be computed using colorWithOverlay', (WidgetTester tester) async {
const Color surfaceColor = Color(0xFF123456);
const Color onSurfaceColor = Color(0xFF654321);
const double elevation = 8.0;
final Color surfaceColorWithOverlay =
ElevationOverlay.colorWithOverlay(surfaceColor, onSurfaceColor, elevation);
await tester.pumpWidget(
Theme(
data: ThemeData(
applyElevationOverlayColor: true,
colorScheme: const ColorScheme.dark(
surface: surfaceColor,
onSurface: onSurfaceColor,
),
),
child: buildMaterial(
color: surfaceColor,
elevation: elevation,
),
),
);
final RenderPhysicalShape model = getModel(tester);
expect(model.color, equals(surfaceColorWithOverlay));
expect(model.color, isNot(equals(surfaceColor)));
});
}); });
group('Transparency clipping', () { group('Transparency clipping', () {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment