From 00408210c674821aa287ebb4836cb1d390728569 Mon Sep 17 00:00:00 2001 From: darrenaustin Date: Thu, 1 Sep 2022 19:59:39 -0700 Subject: [PATCH] Added support for shadowColor and surfaceTintColor for Drawer widget. --- packages/flutter/lib/src/material/dialog.dart | 3 +- packages/flutter/lib/src/material/drawer.dart | 41 ++++++++++++++++++- .../lib/src/material/drawer_theme.dart | 20 +++++++++ .../test/material/drawer_theme_test.dart | 35 ++++++++++++++-- 4 files changed, 92 insertions(+), 7 deletions(-) diff --git a/packages/flutter/lib/src/material/dialog.dart b/packages/flutter/lib/src/material/dialog.dart index 006926e561de94..405a579afb6247 100644 --- a/packages/flutter/lib/src/material/dialog.dart +++ b/packages/flutter/lib/src/material/dialog.dart @@ -115,8 +115,7 @@ class Dialog extends StatelessWidget { /// If null and [ThemeData.useMaterial3] is true then [ThemeData]'s /// [ColorScheme.surfaceTint] will be used. /// - /// To disable this feature, set [surfaceTintColor] to a transparent color - /// (i.e. [Color.alpha] is 0). + /// To disable this feature, set [surfaceTintColor] to [Colors.transparent]. /// /// See also: /// * [Material.surfaceTintColor], which describes how the surface tint will diff --git a/packages/flutter/lib/src/material/drawer.dart b/packages/flutter/lib/src/material/drawer.dart index fcafbdd5219ab5..0619e6fa7f2e70 100644 --- a/packages/flutter/lib/src/material/drawer.dart +++ b/packages/flutter/lib/src/material/drawer.dart @@ -147,6 +147,8 @@ class Drawer extends StatelessWidget { super.key, this.backgroundColor, this.elevation, + this.shadowColor, + this.surfaceTintColor, this.shape, this.width, this.child, @@ -168,6 +170,40 @@ class Drawer extends StatelessWidget { /// is also null, then it defaults to 16.0. final double? elevation; + /// The color used to paint a drop shadow under the drawer's [Material], + /// which reflects the drawer's [elevation]. + /// + /// If null and [ThemeData.useMaterial3] is true then no drop shadow will + /// be rendered. + /// + /// If null and [ThemeData.useMaterial3] is false then it will default to + /// [ThemeData.shadowColor]. + /// + /// See also: + /// * [Material.shadowColor], which describes how the drop shadow is painted. + /// * [elevation], which affects how the drop shadow is painted. + /// * [surfaceTintColor], which can be used to indicate elevation through + /// tinting the background color. + final Color? shadowColor; + + /// The color used as a surface tint overlay on the drawer's background color, + /// which reflects the drawer's [elevation]. + /// + /// If [ThemeData.useMaterial3] is false property has no effect. + /// + /// If null and [ThemeData.useMaterial3] is true then [ThemeData]'s + /// [ColorScheme.surfaceTint] will be used. + /// + /// To disable this feature, set [surfaceTintColor] to [Colors.transparent]. + /// + /// See also: + /// * [Material.surfaceTintColor], which describes how the surface tint will + /// be applied to the background color of the drawer. + /// * [elevation], which affects the opacity of the surface tint. + /// * [shadowColor], which can be used to indicate elevation through + /// a drop shadow. + final Color? surfaceTintColor; + /// The shape of the drawer. /// /// Defines the drawer's [Material.shape]. @@ -189,7 +225,7 @@ class Drawer extends StatelessWidget { /// {@macro flutter.widgets.ProxyWidget.child} final Widget? child; - /// The semantic label of the dialog used by accessibility frameworks to + /// The semantic label of the drawer used by accessibility frameworks to /// announce screen transitions when the drawer is opened and closed. /// /// If this label is not provided, it will default to @@ -216,6 +252,7 @@ class Drawer extends StatelessWidget { case TargetPlatform.windows: label = semanticLabel ?? MaterialLocalizations.of(context).drawerLabel; } + final bool useMaterial3 = Theme.of(context).useMaterial3; return Semantics( scopesRoute: true, namesRoute: true, @@ -226,6 +263,8 @@ class Drawer extends StatelessWidget { child: Material( color: backgroundColor ?? drawerTheme.backgroundColor, elevation: elevation ?? drawerTheme.elevation ?? 16.0, + shadowColor: shadowColor ?? drawerTheme.shadowColor ?? (useMaterial3 ? Colors.transparent : Theme.of(context).shadowColor), + surfaceTintColor: surfaceTintColor ?? drawerTheme.surfaceTintColor ?? (useMaterial3 ? Theme.of(context).colorScheme.surfaceTint : null), shape: shape ?? drawerTheme.shape, child: child, ), diff --git a/packages/flutter/lib/src/material/drawer_theme.dart b/packages/flutter/lib/src/material/drawer_theme.dart index 1aabcae4aa4505..ac4277f0f8de9d 100644 --- a/packages/flutter/lib/src/material/drawer_theme.dart +++ b/packages/flutter/lib/src/material/drawer_theme.dart @@ -38,6 +38,8 @@ class DrawerThemeData with Diagnosticable { this.backgroundColor, this.scrimColor, this.elevation, + this.shadowColor, + this.surfaceTintColor, this.shape, this.width, }); @@ -51,6 +53,12 @@ class DrawerThemeData with Diagnosticable { /// Overrides the default value of [Drawer.elevation]. final double? elevation; + /// Overrides the default value for [Drawer.shadowColor]. + final Color? shadowColor; + + /// Overrides the default value for [Drawer.surfaceTintColor]. + final Color? surfaceTintColor; + /// Overrides the default value of [Drawer.shape]. final ShapeBorder? shape; @@ -63,6 +71,8 @@ class DrawerThemeData with Diagnosticable { Color? backgroundColor, Color? scrimColor, double? elevation, + Color? shadowColor, + Color? surfaceTintColor, ShapeBorder? shape, double? width, }) { @@ -70,6 +80,8 @@ class DrawerThemeData with Diagnosticable { backgroundColor: backgroundColor ?? this.backgroundColor, scrimColor: scrimColor ?? this.scrimColor, elevation: elevation ?? this.elevation, + shadowColor: shadowColor ?? this.shadowColor, + surfaceTintColor: surfaceTintColor ?? this.surfaceTintColor, shape: shape ?? this.shape, width: width ?? this.width, ); @@ -89,6 +101,8 @@ class DrawerThemeData with Diagnosticable { backgroundColor: Color.lerp(a?.backgroundColor, b?.backgroundColor, t), scrimColor: Color.lerp(a?.scrimColor, b?.scrimColor, t), elevation: lerpDouble(a?.elevation, b?.elevation, t), + shadowColor: Color.lerp(a?.shadowColor, b?.shadowColor, t), + surfaceTintColor: Color.lerp(a?.surfaceTintColor, b?.surfaceTintColor, t), shape: ShapeBorder.lerp(a?.shape, b?.shape, t), width: lerpDouble(a?.width, b?.width, t), ); @@ -99,6 +113,8 @@ class DrawerThemeData with Diagnosticable { backgroundColor, scrimColor, elevation, + shadowColor, + surfaceTintColor, shape, width, ); @@ -115,6 +131,8 @@ class DrawerThemeData with Diagnosticable { && other.backgroundColor == backgroundColor && other.scrimColor == scrimColor && other.elevation == elevation + && other.shadowColor == shadowColor + && other.surfaceTintColor == surfaceTintColor && other.shape == shape && other.width == width; } @@ -125,6 +143,8 @@ class DrawerThemeData with Diagnosticable { properties.add(ColorProperty('backgroundColor', backgroundColor, defaultValue: null)); properties.add(ColorProperty('scrimColor', scrimColor, defaultValue: null)); properties.add(DoubleProperty('elevation', elevation, defaultValue: null)); + properties.add(ColorProperty('shadowColor', shadowColor, defaultValue: null)); + properties.add(ColorProperty('surfaceTintColor', surfaceTintColor, defaultValue: null)); properties.add(DiagnosticsProperty('shape', shape, defaultValue: null)); properties.add(DoubleProperty('width', width, defaultValue: null)); } diff --git a/packages/flutter/test/material/drawer_theme_test.dart b/packages/flutter/test/material/drawer_theme_test.dart index da6b9e8293a003..e84f7f488f04dd 100644 --- a/packages/flutter/test/material/drawer_theme_test.dart +++ b/packages/flutter/test/material/drawer_theme_test.dart @@ -30,6 +30,8 @@ void main() { backgroundColor: Color(0x00000099), scrimColor: Color(0x00000098), elevation: 5.0, + shadowColor: Color(0x00000097), + surfaceTintColor: Color(0x00000096), shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(2.0))), width: 200.0, ).debugFillProperties(builder); @@ -43,6 +45,8 @@ void main() { 'backgroundColor: Color(0x00000099)', 'scrimColor: Color(0x00000098)', 'elevation: 5.0', + 'shadowColor: Color(0x00000097)', + 'surfaceTintColor: Color(0x00000096)', 'shape: RoundedRectangleBorder(BorderSide(width: 0.0, style: none), BorderRadius.circular(2.0))', 'width: 200.0', ]); @@ -50,6 +54,7 @@ void main() { testWidgets('Default values are used when no Drawer or DrawerThemeData properties are specified', (WidgetTester tester) async { final GlobalKey scaffoldKey = GlobalKey(); + final bool useMaterial3 = ThemeData().useMaterial3; await tester.pumpWidget( MaterialApp( home: Scaffold( @@ -63,6 +68,8 @@ void main() { expect(_drawerMaterial(tester).color, null); expect(_drawerMaterial(tester).elevation, 16.0); + expect(_drawerMaterial(tester).shadowColor, useMaterial3 ? Colors.transparent : ThemeData().shadowColor); + expect(_drawerMaterial(tester).surfaceTintColor, useMaterial3 ? ThemeData().colorScheme.surfaceTint : null); expect(_drawerMaterial(tester).shape, null); expect(_scrim(tester).color, Colors.black54); expect(_drawerRenderBox(tester).size.width, 304.0); @@ -72,6 +79,8 @@ void main() { const Color backgroundColor = Color(0x00000001); const Color scrimColor = Color(0x00000002); const double elevation = 7.0; + const Color shadowColor = Color(0x00000003); + const Color surfaceTintColor = Color(0x00000004); const RoundedRectangleBorder shape = RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(16.0))); const double width = 200.0; @@ -83,6 +92,8 @@ void main() { backgroundColor: backgroundColor, scrimColor: scrimColor, elevation: elevation, + shadowColor: shadowColor, + surfaceTintColor: surfaceTintColor, shape: shape, width: width, ), @@ -98,6 +109,8 @@ void main() { expect(_drawerMaterial(tester).color, backgroundColor); expect(_drawerMaterial(tester).elevation, elevation); + expect(_drawerMaterial(tester).shadowColor, shadowColor); + expect(_drawerMaterial(tester).surfaceTintColor, surfaceTintColor); expect(_drawerMaterial(tester).shape, shape); expect(_scrim(tester).color, scrimColor); expect(_drawerRenderBox(tester).size.width, width); @@ -107,6 +120,8 @@ void main() { const Color backgroundColor = Color(0x00000001); const Color scrimColor = Color(0x00000002); const double elevation = 7.0; + const Color shadowColor = Color(0x00000003); + const Color surfaceTintColor = Color(0x00000004); const RoundedRectangleBorder shape = RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(16.0))); const double width = 200.0; @@ -115,8 +130,8 @@ void main() { MaterialApp( theme: ThemeData( drawerTheme: const DrawerThemeData( - backgroundColor: Color(0x00000003), - scrimColor: Color(0x00000004), + backgroundColor: Color(0x00000005), + scrimColor: Color(0x00000006), elevation: 13.0, shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(29.0))), width: 400.0, @@ -128,6 +143,8 @@ void main() { drawer: const Drawer( backgroundColor: backgroundColor, elevation: elevation, + shadowColor: shadowColor, + surfaceTintColor: surfaceTintColor, shape: shape, width: width, ), @@ -139,6 +156,8 @@ void main() { expect(_drawerMaterial(tester).color, backgroundColor); expect(_drawerMaterial(tester).elevation, elevation); + expect(_drawerMaterial(tester).shadowColor, shadowColor); + expect(_drawerMaterial(tester).surfaceTintColor, surfaceTintColor); expect(_drawerMaterial(tester).shape, shape); expect(_scrim(tester).color, scrimColor); expect(_drawerRenderBox(tester).size.width, width); @@ -148,6 +167,8 @@ void main() { const Color backgroundColor = Color(0x00000001); const Color scrimColor = Color(0x00000002); const double elevation = 7.0; + const Color shadowColor = Color(0x00000003); + const Color surfaceTintColor = Color(0x00000004); const RoundedRectangleBorder shape = RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(16.0))); const double width = 200.0; @@ -156,9 +177,11 @@ void main() { MaterialApp( theme: ThemeData( drawerTheme: const DrawerThemeData( - backgroundColor: Color(0x00000003), - scrimColor: Color(0x00000004), + backgroundColor: Color(0x00000005), + scrimColor: Color(0x00000006), elevation: 13.0, + shadowColor: Color(0x00000007), + surfaceTintColor: Color(0x00000007), shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(29.0))), width: 400.0 ), @@ -168,6 +191,8 @@ void main() { backgroundColor: backgroundColor, scrimColor: scrimColor, elevation: elevation, + shadowColor: shadowColor, + surfaceTintColor: surfaceTintColor, shape: shape, width: width, ), @@ -183,6 +208,8 @@ void main() { expect(_drawerMaterial(tester).color, backgroundColor); expect(_drawerMaterial(tester).elevation, elevation); + expect(_drawerMaterial(tester).shadowColor, shadowColor); + expect(_drawerMaterial(tester).surfaceTintColor, surfaceTintColor); expect(_drawerMaterial(tester).shape, shape); expect(_scrim(tester).color, scrimColor); expect(_drawerRenderBox(tester).size.width, width);