Add ThemeData.shadowColor (#60337)

packages/flutter/lib/src/material/material.dart

@@ -172,7 +172,7 @@ class Material extends StatefulWidget {
     this.type = MaterialType.canvas,
     this.elevation = 0.0,
     this.color,
-    this.shadowColor = const Color(0xFF000000),
+    this.shadowColor,
     this.textStyle,
     this.borderRadius,
     this.shape,
@@ -182,7 +182,6 @@ class Material extends StatefulWidget {
     this.child,
   }) : assert(type != null),
        assert(elevation != null && elevation >= 0.0),
-       assert(shadowColor != null),
        assert(!(shape != null && borderRadius != null)),
        assert(animationDuration != null),
        assert(!(identical(type, MaterialType.circle) && (borderRadius != null || shape != null))),
@@ -238,7 +237,17 @@ class Material extends StatefulWidget {
 
   /// The color to paint the shadow below the material.
   ///
-  /// Defaults to fully opaque black.
+  /// If null, [ThemeData.shadowColor] is used, which defaults to fully opaque black.
+  ///
+  /// 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.
+  ///
+  /// See also:
+  ///
+  ///  * [ThemeData.applyElevationOverlayColor], which turns elevation overlay
+  /// on or off for dark themes.
   final Color shadowColor;
 
   /// The typographical style to use for text within this material.
@@ -308,7 +317,7 @@ class Material extends StatefulWidget {
     properties.add(EnumProperty<MaterialType>('type', type));
     properties.add(DoubleProperty('elevation', elevation, defaultValue: 0.0));
     properties.add(ColorProperty('color', color, defaultValue: null));
-    properties.add(ColorProperty('shadowColor', shadowColor, defaultValue: const Color(0xFF000000)));
+    properties.add(ColorProperty('shadowColor', shadowColor, defaultValue: null));
     textStyle?.debugFillProperties(properties, prefix: 'textStyle.');
     properties.add(DiagnosticsProperty<ShapeBorder>('shape', shape, defaultValue: null));
     properties.add(DiagnosticsProperty<bool>('borderOnForeground', borderOnForeground, defaultValue: true));
@@ -391,7 +400,7 @@ class _MaterialState extends State<Material> with TickerProviderStateMixin {
         borderRadius: BorderRadius.zero,
         elevation: widget.elevation,
         color: ElevationOverlay.applyOverlay(context, backgroundColor, widget.elevation),
-        shadowColor: widget.shadowColor,
+        shadowColor: widget.shadowColor ?? Theme.of(context).shadowColor,
         animateColor: false,
         child: contents,
       );
@@ -416,7 +425,7 @@ class _MaterialState extends State<Material> with TickerProviderStateMixin {
       clipBehavior: widget.clipBehavior,
       elevation: widget.elevation,
       color: backgroundColor,
-      shadowColor: widget.shadowColor,
+      shadowColor: widget.shadowColor ?? Theme.of(context).shadowColor,
       child: contents,
     );
   }

packages/flutter/lib/src/material/theme_data.dart

@@ -216,6 +216,7 @@ class ThemeData with Diagnosticable {
     Color accentColor,
     Brightness accentColorBrightness,
     Color canvasColor,
+    Color shadowColor,
     Color scaffoldBackgroundColor,
     Color bottomAppBarColor,
     Color cardColor,
@@ -294,6 +295,7 @@ class ThemeData with Diagnosticable {
     accentColorBrightness ??= estimateBrightnessForColor(accentColor);
     final bool accentIsDark = accentColorBrightness == Brightness.dark;
     canvasColor ??= isDark ? Colors.grey[850] : Colors.grey[50];
+    shadowColor ??= Colors.black;
     scaffoldBackgroundColor ??= canvasColor;
     bottomAppBarColor ??= isDark ? Colors.grey[800] : Colors.white;
     cardColor ??= isDark ? Colors.grey[800] : Colors.white;
@@ -403,6 +405,7 @@ class ThemeData with Diagnosticable {
       accentColor: accentColor,
       accentColorBrightness: accentColorBrightness,
       canvasColor: canvasColor,
+      shadowColor: shadowColor,
       scaffoldBackgroundColor: scaffoldBackgroundColor,
       bottomAppBarColor: bottomAppBarColor,
       cardColor: cardColor,
@@ -484,6 +487,7 @@ class ThemeData with Diagnosticable {
     @required this.primaryColorLight,
     @required this.primaryColorDark,
     @required this.canvasColor,
+    @required this.shadowColor,
     @required this.accentColor,
     @required this.accentColorBrightness,
     @required this.scaffoldBackgroundColor,
@@ -555,6 +559,7 @@ class ThemeData with Diagnosticable {
        assert(accentColor != null),
        assert(accentColorBrightness != null),
        assert(canvasColor != null),
+       assert(shadowColor != null),
        assert(scaffoldBackgroundColor != null),
        assert(bottomAppBarColor != null),
        assert(cardColor != null),
@@ -759,6 +764,21 @@ class ThemeData with Diagnosticable {
   /// The default color of [MaterialType.canvas] [Material].
   final Color canvasColor;
 
+  /// The color that [Material] widget uses to draw elevation shadows.
+  ///
+  /// Defaults to fully opaque black.
+  ///
+  /// 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.
+  ///
+  /// See also:
+  ///
+  ///  * [applyElevationOverlayColor], which turns elevation overlay on or off
+  /// for dark themes.
+  final Color shadowColor;
+
   /// The foreground color for widgets (knobs, text, overscroll edge effect, etc).
   ///
   /// Accent color is also known as the secondary color.
@@ -1098,6 +1118,7 @@ class ThemeData with Diagnosticable {
     Color accentColor,
     Brightness accentColorBrightness,
     Color canvasColor,
+    Color shadowColor,
     Color scaffoldBackgroundColor,
     Color bottomAppBarColor,
     Color cardColor,
@@ -1170,6 +1191,7 @@ class ThemeData with Diagnosticable {
       accentColor: accentColor ?? this.accentColor,
       accentColorBrightness: accentColorBrightness ?? this.accentColorBrightness,
       canvasColor: canvasColor ?? this.canvasColor,
+      shadowColor: shadowColor ?? this.shadowColor,
       scaffoldBackgroundColor: scaffoldBackgroundColor ?? this.scaffoldBackgroundColor,
       bottomAppBarColor: bottomAppBarColor ?? this.bottomAppBarColor,
       cardColor: cardColor ?? this.cardColor,
@@ -1318,6 +1340,7 @@ class ThemeData with Diagnosticable {
       primaryColorLight: Color.lerp(a.primaryColorLight, b.primaryColorLight, t),
       primaryColorDark: Color.lerp(a.primaryColorDark, b.primaryColorDark, t),
       canvasColor: Color.lerp(a.canvasColor, b.canvasColor, t),
+      shadowColor: Color.lerp(a.shadowColor, b.shadowColor, t),
       accentColor: Color.lerp(a.accentColor, b.accentColor, t),
       accentColorBrightness: t < 0.5 ? a.accentColorBrightness : b.accentColorBrightness,
       scaffoldBackgroundColor: Color.lerp(a.scaffoldBackgroundColor, b.scaffoldBackgroundColor, t),
@@ -1403,6 +1426,7 @@ class ThemeData with Diagnosticable {
         && other.scaffoldBackgroundColor == scaffoldBackgroundColor
         && other.bottomAppBarColor == bottomAppBarColor
         && other.cardColor == cardColor
+        && other.shadowColor == shadowColor
         && other.dividerColor == dividerColor
         && other.highlightColor == highlightColor
         && other.splashColor == splashColor
@@ -1475,6 +1499,7 @@ class ThemeData with Diagnosticable {
       accentColor,
       accentColorBrightness,
       canvasColor,
+      shadowColor,
       scaffoldBackgroundColor,
       bottomAppBarColor,
       cardColor,
@@ -1551,6 +1576,7 @@ class ThemeData with Diagnosticable {
     properties.add(ColorProperty('accentColor', accentColor, defaultValue: defaultData.accentColor, level: DiagnosticLevel.debug));
     properties.add(EnumProperty<Brightness>('accentColorBrightness', accentColorBrightness, defaultValue: defaultData.accentColorBrightness, level: DiagnosticLevel.debug));
     properties.add(ColorProperty('canvasColor', canvasColor, defaultValue: defaultData.canvasColor, level: DiagnosticLevel.debug));
+    properties.add(ColorProperty('shadowColor', shadowColor, defaultValue: defaultData.shadowColor, level: DiagnosticLevel.debug));
     properties.add(ColorProperty('scaffoldBackgroundColor', scaffoldBackgroundColor, defaultValue: defaultData.scaffoldBackgroundColor, level: DiagnosticLevel.debug));
     properties.add(ColorProperty('bottomAppBarColor', bottomAppBarColor, defaultValue: defaultData.bottomAppBarColor, level: DiagnosticLevel.debug));
     properties.add(ColorProperty('cardColor', cardColor, defaultValue: defaultData.cardColor, level: DiagnosticLevel.debug));

packages/flutter/test/material/flat_button_test.dart

@@ -36,7 +36,7 @@ void main() {
     expect(material.clipBehavior, Clip.none);
     expect(material.color, null);
     expect(material.elevation, 0.0);
-    expect(material.shadowColor, const Color(0xff000000));
+    expect(material.shadowColor, null);
     expect(material.shape, RoundedRectangleBorder(borderRadius: BorderRadius.circular(2.0)));
     expect(material.textStyle.color, const Color(0xdd000000));
     expect(material.textStyle.fontFamily, 'Roboto');
@@ -56,7 +56,7 @@ void main() {
     expect(material.clipBehavior, Clip.none);
     expect(material.color, null);
     expect(material.elevation, 0.0);
-    expect(material.shadowColor, const Color(0xff000000));
+    expect(material.shadowColor, null);
     expect(material.shape, RoundedRectangleBorder(borderRadius: BorderRadius.circular(2.0)));
     expect(material.textStyle.color, const Color(0xdd000000));
     expect(material.textStyle.fontFamily, 'Roboto');
@@ -81,7 +81,7 @@ void main() {
     expect(material.clipBehavior, Clip.none);
     expect(material.color, null);
     expect(material.elevation, 0.0);
-    expect(material.shadowColor, const Color(0xff000000));
+    expect(material.shadowColor, null);
     expect(material.shape, RoundedRectangleBorder(borderRadius: BorderRadius.circular(2.0)));
     expect(material.textStyle.color, const Color(0x61000000));
     expect(material.textStyle.fontFamily, 'Roboto');

packages/flutter/test/material/material_button_test.dart

@@ -40,7 +40,7 @@ void main() {
     expect(material.clipBehavior, Clip.none);
     expect(material.color, null);
     expect(material.elevation, 2.0);
-    expect(material.shadowColor, const Color(0xff000000));
+    expect(material.shadowColor, null);
     expect(material.shape, RoundedRectangleBorder(borderRadius: BorderRadius.circular(2.0)));
     expect(material.textStyle.color, const Color(0xdd000000));
     expect(material.textStyle.fontFamily, 'Roboto');
@@ -60,7 +60,7 @@ void main() {
     expect(material.clipBehavior, Clip.none);
     expect(material.color, null);
     expect(material.elevation, 8.0);
-    expect(material.shadowColor, const Color(0xff000000));
+    expect(material.shadowColor, null);
     expect(material.shape, RoundedRectangleBorder(borderRadius: BorderRadius.circular(2.0)));
     expect(material.textStyle.color, const Color(0xdd000000));
     expect(material.textStyle.fontFamily, 'Roboto');
@@ -85,7 +85,7 @@ void main() {
     expect(material.clipBehavior, Clip.none);
     expect(material.color, null);
     expect(material.elevation, 0.0);
-    expect(material.shadowColor, const Color(0xff000000));
+    expect(material.shadowColor, null);
     expect(material.shape, RoundedRectangleBorder(borderRadius: BorderRadius.circular(2.0)));
     expect(material.textStyle.color, const Color(0x61000000));
     expect(material.textStyle.fontFamily, 'Roboto');

packages/flutter/test/material/material_test.dart

@@ -84,6 +84,7 @@ void main() {
     const Material(
       type: MaterialType.canvas,
       color: Color(0xFFFFFFFF),
+      shadowColor: Color(0xffff0000),
       textStyle: TextStyle(color: Color(0xff00ff00)),
       borderRadius: BorderRadiusDirectional.all(Radius.circular(10)),
     ).debugFillProperties(builder);
@@ -96,6 +97,7 @@ void main() {
     expect(description, <String>[
       'type: canvas',
       'color: Color(0xffffffff)',
+      'shadowColor: Color(0xffff0000)',
       'textStyle.inherit: true',
       'textStyle.color: Color(0xff00ff00)',
       'borderRadius: BorderRadiusDirectional.circular(10.0)',

packages/flutter/test/material/outline_button_test.dart

@@ -36,7 +36,7 @@ void main() {
     expect(material.clipBehavior, Clip.none);
     expect(material.color, const Color(0x00000000));
     expect(material.elevation, 0.0);
-    expect(material.shadowColor, const Color(0xff000000));
+    expect(material.shadowColor, null);
     expect(material.textStyle.color, const Color(0xdd000000));
     expect(material.textStyle.fontFamily, 'Roboto');
     expect(material.textStyle.fontSize, 14);
@@ -55,7 +55,7 @@ void main() {
     expect(material.clipBehavior, Clip.none);
     expect(material.color, const Color(0x00000000));
     expect(material.elevation, 0.0);
-    expect(material.shadowColor, const Color(0xff000000));
+    expect(material.shadowColor, null);
     expect(material.textStyle.color, const Color(0xdd000000));
     expect(material.textStyle.fontFamily, 'Roboto');
     expect(material.textStyle.fontSize, 14);
@@ -79,7 +79,7 @@ void main() {
     expect(material.clipBehavior, Clip.none);
     expect(material.color, const Color(0x00000000));
     expect(material.elevation, 0.0);
-    expect(material.shadowColor, const Color(0xff000000));
+    expect(material.shadowColor, null);
     expect(material.textStyle.color, const Color(0x61000000));
     expect(material.textStyle.fontFamily, 'Roboto');
     expect(material.textStyle.fontSize, 14);

packages/flutter/test/material/raised_button_test.dart

@@ -36,7 +36,7 @@ void main() {
     expect(material.clipBehavior, Clip.none);
     expect(material.color, const Color(0xffe0e0e0));
     expect(material.elevation, 2.0);
-    expect(material.shadowColor, const Color(0xff000000));
+    expect(material.shadowColor, null);
     expect(material.shape, RoundedRectangleBorder(borderRadius: BorderRadius.circular(2.0)));
     expect(material.textStyle.color, const Color(0xdd000000));
     expect(material.textStyle.fontFamily, 'Roboto');
@@ -56,7 +56,7 @@ void main() {
     expect(material.clipBehavior, Clip.none);
     expect(material.color, const Color(0xffe0e0e0));
     expect(material.elevation, 8.0);
-    expect(material.shadowColor, const Color(0xff000000));
+    expect(material.shadowColor, null);
     expect(material.shape, RoundedRectangleBorder(borderRadius: BorderRadius.circular(2.0)));
     expect(material.textStyle.color, const Color(0xdd000000));
     expect(material.textStyle.fontFamily, 'Roboto');
@@ -81,7 +81,7 @@ void main() {
     expect(material.clipBehavior, Clip.none);
     expect(material.color, const Color(0x61000000));
     expect(material.elevation, 0.0);
-    expect(material.shadowColor, const Color(0xff000000));
+    expect(material.shadowColor, null);
     expect(material.shape, RoundedRectangleBorder(borderRadius: BorderRadius.circular(2.0)));
     expect(material.textStyle.color, const Color(0x61000000));
     expect(material.textStyle.fontFamily, 'Roboto');

packages/flutter/test/material/theme_data_test.dart

@@ -226,6 +226,7 @@ void main() {
       accentColor: Colors.black,
       accentColorBrightness: Brightness.dark,
       canvasColor: Colors.black,
+      shadowColor: Colors.black,
       scaffoldBackgroundColor: Colors.black,
       bottomAppBarColor: Colors.black,
       cardColor: Colors.black,
@@ -311,6 +312,7 @@ void main() {
       accentColor: Colors.white,
       accentColorBrightness: Brightness.light,
       canvasColor: Colors.white,
+      shadowColor: Colors.white,
       scaffoldBackgroundColor: Colors.white,
       bottomAppBarColor: Colors.white,
       cardColor: Colors.white,
@@ -382,6 +384,7 @@ void main() {
       accentColor: otherTheme.accentColor,
       accentColorBrightness: otherTheme.accentColorBrightness,
       canvasColor: otherTheme.canvasColor,
+      shadowColor: otherTheme.shadowColor,
       scaffoldBackgroundColor: otherTheme.scaffoldBackgroundColor,
       bottomAppBarColor: otherTheme.bottomAppBarColor,
       cardColor: otherTheme.cardColor,
@@ -453,9 +456,7 @@ void main() {
     expect(themeDataCopy.accentColor, equals(otherTheme.accentColor));
     expect(themeDataCopy.accentColorBrightness, equals(otherTheme.accentColorBrightness));
     expect(themeDataCopy.canvasColor, equals(otherTheme.canvasColor));
-    expect(themeDataCopy.scaffoldBackgroundColor, equals(otherTheme.scaffoldBackgroundColor));
-    expect(themeDataCopy.bottomAppBarColor, equals(otherTheme.bottomAppBarColor));
-    expect(themeDataCopy.canvasColor, equals(otherTheme.canvasColor));
+    expect(themeDataCopy.shadowColor, equals(otherTheme.shadowColor));
     expect(themeDataCopy.scaffoldBackgroundColor, equals(otherTheme.scaffoldBackgroundColor));
     expect(themeDataCopy.bottomAppBarColor, equals(otherTheme.bottomAppBarColor));
     expect(themeDataCopy.cardColor, equals(otherTheme.cardColor));