Fix BottomAppBar & BottomSheet M3 shadow (#119819)

* remove m3 shadows * fix * fix that test over there
flutter · Feb 8, 2023 · 0a97ef8 · 0a97ef8
1 parent 0588b92
commit 0a97ef8
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 6 deletions.
diff --git a/packages/flutter/lib/src/material/bottom_app_bar.dart b/packages/flutter/lib/src/material/bottom_app_bar.dart
@@ -6,6 +6,7 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/widgets.dart';
 
 import 'bottom_app_bar_theme.dart';
+import 'colors.dart';
 import 'elevation_overlay.dart';
 import 'material.dart';
 import 'scaffold.dart';
@@ -177,6 +178,7 @@ class _BottomAppBarState extends State<BottomAppBar> {
     final Color color = widget.color ?? babTheme.color ?? defaults.color!;
     final Color surfaceTintColor = widget.surfaceTintColor ?? babTheme.surfaceTintColor ?? defaults.surfaceTintColor!;
     final Color effectiveColor = isMaterial3 ? color : ElevationOverlay.applyOverlay(context, color, elevation);
+    final Color? shadowColor = isMaterial3 ? Colors.transparent : null;
 
     final Widget child = Padding(
       padding: widget.padding ?? babTheme.padding ?? (isMaterial3 ? const EdgeInsets.symmetric(vertical: 12.0, horizontal: 16.0) : EdgeInsets.zero),
@@ -187,15 +189,16 @@ class _BottomAppBarState extends State<BottomAppBar> {
       height: height,
       child: PhysicalShape(
         clipper: clipper,
-        elevation: elevation,
         color: effectiveColor,
         clipBehavior: widget.clipBehavior,
+        elevation: isMaterial3 ? 0 : elevation,
         child: Material(
           key: materialKey,
           type: isMaterial3 ? MaterialType.canvas : MaterialType.transparency,
           elevation: elevation,
           color: isMaterial3 ? effectiveColor : null,
           surfaceTintColor: surfaceTintColor,
+          shadowColor: shadowColor,
           child: SafeArea(child: child),
         ),
       ),

diff --git a/packages/flutter/lib/src/material/bottom_sheet.dart b/packages/flutter/lib/src/material/bottom_sheet.dart
@@ -270,14 +270,16 @@ class _BottomSheetState extends State<BottomSheet> {
 
   @override
   Widget build(BuildContext context) {
+    final bool useMaterial3 = Theme.of(context).useMaterial3;
     final BottomSheetThemeData bottomSheetTheme = Theme.of(context).bottomSheetTheme;
-    final BottomSheetThemeData defaults = Theme.of(context).useMaterial3 ? _BottomSheetDefaultsM3(context) : const BottomSheetThemeData();
+    final BottomSheetThemeData defaults = useMaterial3 ? _BottomSheetDefaultsM3(context) : const BottomSheetThemeData();
     final BoxConstraints? constraints = widget.constraints ?? bottomSheetTheme.constraints;
     final Color? color = widget.backgroundColor ?? bottomSheetTheme.backgroundColor ?? defaults.backgroundColor;
     final Color? surfaceTintColor = bottomSheetTheme.surfaceTintColor ?? defaults.surfaceTintColor;
     final double elevation = widget.elevation ?? bottomSheetTheme.elevation ?? defaults.elevation ?? 0;
     final ShapeBorder? shape = widget.shape ?? bottomSheetTheme.shape ?? defaults.shape;
     final Clip clipBehavior = widget.clipBehavior ?? bottomSheetTheme.clipBehavior ?? Clip.none;
+    final Color? shadowColor = useMaterial3 ? Colors.transparent : null;
 
     Widget bottomSheet = Material(
       key: _childKey,
@@ -286,6 +288,7 @@ class _BottomSheetState extends State<BottomSheet> {
       surfaceTintColor: surfaceTintColor,
       shape: shape,
       clipBehavior: clipBehavior,
+      shadowColor: shadowColor,
       child: NotificationListener<DraggableScrollableNotification>(
         onNotification: extentChanged,
         child: widget.builder(context),

diff --git a/packages/flutter/test/material/bottom_app_bar_test.dart b/packages/flutter/test/material/bottom_app_bar_test.dart
@@ -233,6 +233,27 @@ void main() {
     expect(material.color, const Color(0xff0000ff));
   });
 
+  testWidgets('Shadow color is transparent in Material 3', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      MaterialApp(
+        theme: ThemeData(useMaterial3: true,
+        ),
+        home: const Scaffold(
+          floatingActionButton: FloatingActionButton(
+            onPressed: null,
+          ),
+          bottomNavigationBar: BottomAppBar(
+            color: Color(0xff0000ff),
+          ),
+        ),
+      )
+    );
+
+    final Material material = tester.widget(find.byType(Material).at(1));
+
+    expect(material.shadowColor, Colors.transparent); /* no value in Material 2. */
+  });
+
   testWidgets('dark theme applies an elevation overlay color', (WidgetTester tester) async {
     await tester.pumpWidget(
       MaterialApp(

diff --git a/packages/flutter/test/material/bottom_app_bar_theme_test.dart b/packages/flutter/test/material/bottom_app_bar_theme_test.dart
@@ -173,10 +173,10 @@ void main() {
         home: const Scaffold(body: BottomAppBar()),
       ));
 
-      final PhysicalShape widget = _getBabRenderObject(tester);
+      final Material material = tester.widget(find.byType(Material).at(1));
 
-      expect(widget.color, theme.colorScheme.surface);
-      expect(widget.elevation, equals(3.0));
+      expect(material.color, theme.colorScheme.surface);
+      expect(material.elevation, equals(3.0));
     });
 
     testWidgets('BAB theme overrides surfaceTintColor - M3', (WidgetTester tester) async {

diff --git a/packages/flutter/test/material/bottom_sheet_test.dart b/packages/flutter/test/material/bottom_sheet_test.dart
@@ -841,7 +841,7 @@ void main() {
     expect(modalBarrier.color, barrierColor);
   });
 
-  testWidgets('BottomSheet uses fallback values in maretial3',
+  testWidgets('BottomSheet uses fallback values in material 3',
       (WidgetTester tester) async {
     const Color surfaceColor = Colors.pink;
     const Color surfaceTintColor = Colors.blue;
@@ -880,6 +880,30 @@ void main() {
     expect(material.shape, defaultShape);
   });
 
+  testWidgets('BottomSheet has transparent shadow in material3', (WidgetTester tester) async {
+    await tester.pumpWidget(MaterialApp(
+      theme: ThemeData(
+        useMaterial3: true,
+      ),
+      home: Scaffold(
+        body: BottomSheet(
+          onClosing: () {},
+          builder: (BuildContext context) {
+            return Container();
+          },
+        ),
+      ),
+    ));
+
+    final Material material = tester.widget<Material>(
+      find.descendant(
+        of: find.byType(BottomSheet),
+        matching: find.byType(Material),
+      ),
+    );
+    expect(material.shadowColor, Colors.transparent);
+  });
+
   testWidgets('modal BottomSheet with scrollController has semantics', (WidgetTester tester) async {
     final SemanticsTester semantics = SemanticsTester(tester);
     final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();