Skip to content

Commit

Permalink
Added support for shadowColor and surfaceTintColor for Drawer widget.
Browse files Browse the repository at this point in the history
  • Loading branch information
@darrenaustin
darrenaustin committed Sep 6, 2022
1 parent 478c372 commit 0040821
Show file tree
Hide file tree
Showing 4 changed files with 92 additions and 7 deletions.
3 changes: 1 addition & 2 deletions packages/flutter/lib/src/material/dialog.dart
View file
Expand Up @@ -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
Expand Down
41 changes: 40 additions & 1 deletion packages/flutter/lib/src/material/drawer.dart
View file
Expand Up @@ -147,6 +147,8 @@ class Drawer extends StatelessWidget {
super.key,
this.backgroundColor,
this.elevation,
this.shadowColor,
this.surfaceTintColor,
this.shape,
this.width,
this.child,
Expand All @@ -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].
Expand All @@ -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
Expand All @@ -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,
Expand All @@ -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,
),
Expand Down
20 changes: 20 additions & 0 deletions packages/flutter/lib/src/material/drawer_theme.dart
View file
Expand Up @@ -38,6 +38,8 @@ class DrawerThemeData with Diagnosticable {
this.backgroundColor,
this.scrimColor,
this.elevation,
this.shadowColor,
this.surfaceTintColor,
this.shape,
this.width,
});
Expand All @@ -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;

Expand All @@ -63,13 +71,17 @@ class DrawerThemeData with Diagnosticable {
Color? backgroundColor,
Color? scrimColor,
double? elevation,
Color? shadowColor,
Color? surfaceTintColor,
ShapeBorder? shape,
double? width,
}) {
return DrawerThemeData(
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,
);
Expand All @@ -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),
);
Expand All @@ -99,6 +113,8 @@ class DrawerThemeData with Diagnosticable {
backgroundColor,
scrimColor,
elevation,
shadowColor,
surfaceTintColor,
shape,
width,
);
Expand All @@ -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;
}
Expand All @@ -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<ShapeBorder>('shape', shape, defaultValue: null));
properties.add(DoubleProperty('width', width, defaultValue: null));
}
Expand Down
35 changes: 31 additions & 4 deletions packages/flutter/test/material/drawer_theme_test.dart
View file
Expand Up @@ -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);
Expand All @@ -43,13 +45,16 @@ 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',
]);
});

testWidgets('Default values are used when no Drawer or DrawerThemeData properties are specified', (WidgetTester tester) async {
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
final bool useMaterial3 = ThemeData().useMaterial3;
await tester.pumpWidget(
MaterialApp(
home: Scaffold(
Expand All @@ -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);
Expand All @@ -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;

Expand All @@ -83,6 +92,8 @@ void main() {
backgroundColor: backgroundColor,
scrimColor: scrimColor,
elevation: elevation,
shadowColor: shadowColor,
surfaceTintColor: surfaceTintColor,
shape: shape,
width: width,
),
Expand All @@ -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);
Expand All @@ -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;

Expand All @@ -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,
Expand All @@ -128,6 +143,8 @@ void main() {
drawer: const Drawer(
backgroundColor: backgroundColor,
elevation: elevation,
shadowColor: shadowColor,
surfaceTintColor: surfaceTintColor,
shape: shape,
width: width,
),
Expand All @@ -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);
Expand All @@ -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;

Expand All @@ -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
),
Expand All @@ -168,6 +191,8 @@ void main() {
backgroundColor: backgroundColor,
scrimColor: scrimColor,
elevation: elevation,
shadowColor: shadowColor,
surfaceTintColor: surfaceTintColor,
shape: shape,
width: width,
),
Expand All @@ -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);
Expand Down

0 comments on commit 0040821

Please sign in to comment.