Unverified Commit 4c21fb90 authored by Darren Austin's avatar Darren Austin Committed by GitHub

Update the requirements for applying the elevation overlay. (#57526)

parent a6357651
...@@ -14,19 +14,19 @@ import 'theme.dart'; ...@@ -14,19 +14,19 @@ import 'theme.dart';
/// This is an internal implementation class and should not be exported by /// This is an internal implementation class and should not be exported by
/// the material package. /// the material package.
class ElevationOverlay { class ElevationOverlay {
// This class is not meant to be instatiated or extended; this constructor // This class is not meant to be instantiated or extended; this constructor
// prevents instantiation and extension. // prevents instantiation and extension.
// ignore: unused_element // ignore: unused_element
ElevationOverlay._(); ElevationOverlay._();
/// Applies an elevation overlay color to a surface color to indicate /// Applies an elevation overlay color to a given color to indicate
/// the level of elevation in a dark theme. /// the level of elevation in a dark theme.
/// ///
/// If the surrounding [Theme.applyElevationOverlayColor] is true, and /// If the ambient [ThemeData.applyElevationOverlayColor] is true,
/// [color] is [Theme.colorScheme.surface] then this will return /// and [ThemeData.brightness] is [Brightness.dark] then this will return
/// a version of the given color with a semi-transparent [Theme.colorScheme.onSurface] /// a version of the given color with a semi-transparent
/// overlaid on top of it. The opacity of the overlay is controlled by the /// [ThemeData.colorScheme.onSurface] overlaid on top of it. The opacity
/// [elevation]. /// of the overlay is computed based on the [elevation].
/// ///
/// Otherwise it will just return the [color] unmodified. /// Otherwise it will just return the [color] unmodified.
/// ///
...@@ -39,7 +39,7 @@ class ElevationOverlay { ...@@ -39,7 +39,7 @@ class ElevationOverlay {
final ThemeData theme = Theme.of(context); final ThemeData theme = Theme.of(context);
if (elevation > 0.0 && if (elevation > 0.0 &&
theme.applyElevationOverlayColor && theme.applyElevationOverlayColor &&
color == theme.colorScheme.surface) { theme.brightness == Brightness.dark) {
return Color.alphaBlend(overlayColor(context, elevation), color); return Color.alphaBlend(overlayColor(context, elevation), color);
} }
......
...@@ -227,9 +227,9 @@ class Material extends StatefulWidget { ...@@ -227,9 +227,9 @@ class Material extends StatefulWidget {
/// [MaterialType.transparency]. /// [MaterialType.transparency].
/// ///
/// To support dark themes, if the surrounding /// To support dark themes, if the surrounding
/// [ThemeData.applyElevationOverlayColor] is true then a semi-transparent /// [ThemeData.applyElevationOverlayColor] is true and [ThemeData.brightness]
/// overlay color will be composited on top this color to indicate /// is [Brightness.dark] then a semi-transparent overlay color will be
/// the elevation. /// composited on top of this color to indicate the elevation.
/// ///
/// By default, the color is derived from the [type] of material. /// By default, the color is derived from the [type] of material.
final Color color; final Color color;
......
...@@ -933,12 +933,13 @@ class ThemeData with Diagnosticable { ...@@ -933,12 +933,13 @@ class ThemeData with Diagnosticable {
/// elevation of a surface should be portrayed with an "overlay" in addition /// elevation of a surface should be portrayed with an "overlay" in addition
/// to the shadow. As the elevation of the component increases, the /// to the shadow. As the elevation of the component increases, the
/// overlay increases in opacity. [applyElevationOverlayColor] turns the /// overlay increases in opacity. [applyElevationOverlayColor] turns the
/// application of this overlay on or off. /// application of this overlay on or off for dark themes.
/// ///
/// If [true] a semi-transparent version of [colorScheme.onSurface] will be /// If [true] and [brightness] is [Brightness.dark], a
/// applied on top of the color of [Material] widgets when their [Material.color] /// semi-transparent version of [colorScheme.onSurface] will be
/// is [colorScheme.surface]. The level of transparency is based on /// applied on top of the color of [Material] widgets. The level of
/// [Material.elevation] as per the Material Dark theme specification. /// transparency is based on [Material.elevation] as per the
/// Material Dark theme specification.
/// ///
/// If [false] the surface color will be used unmodified. /// If [false] the surface color will be used unmodified.
/// ///
...@@ -951,9 +952,9 @@ class ThemeData with Diagnosticable { ...@@ -951,9 +952,9 @@ class ThemeData with Diagnosticable {
/// ///
/// See also: /// See also:
/// ///
/// * [Material.elevation], which effects how transparent the white overlay is. /// * [Material.elevation], which effects the level of transparency of the
/// * [Material.color], the white color overlay will only be applied of the /// overlay color.
/// material's color is [colorScheme.surface]. /// * [Material.color], the elevation overlay will be applied to this color.
/// * <https://material.io/design/color/dark-theme.html>, which specifies how /// * <https://material.io/design/color/dark-theme.html>, which specifies how
/// the overlay should be applied. /// the overlay should be applied.
final bool applyElevationOverlayColor; final bool applyElevationOverlayColor;
......
...@@ -273,20 +273,21 @@ void main() { ...@@ -273,20 +273,21 @@ void main() {
} }
}); });
testWidgets('overlay will only apply to materials using colorScheme.surface', (WidgetTester tester) async { testWidgets('overlay will not apply to materials using a light theme', (WidgetTester tester) async {
await tester.pumpWidget( await tester.pumpWidget(
Theme( Theme(
data: ThemeData( data: ThemeData(
applyElevationOverlayColor: true, applyElevationOverlayColor: true,
colorScheme: const ColorScheme.dark().copyWith(surface: const Color(0xFF121212)), colorScheme: const ColorScheme.light(),
), ),
child: buildMaterial( child: buildMaterial(
color: Colors.cyan, color: Colors.cyan,
elevation: 8.0, elevation: 8.0,
), ),
), ),
); );
final RenderPhysicalShape model = getModel(tester); final RenderPhysicalShape model = getModel(tester);
// Shouldn't change, as it was under a light color scheme.
expect(model.color, equals(Colors.cyan)); expect(model.color, equals(Colors.cyan));
}); });
......
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