Update SnackBar to allow for support of the new style from Material spec (#31275)

This PR introduces a number of changes and improvements to snack bars. This includes the ability to specify:

floating style of snack bars that adhere to the updated Material spec
elevation and shape on the SnackBar itself instead of relying on fixed values
a snackBarTheme as part of ThemeData which allows you to customize all of the above on an app-wide level.
This PR is includes the changes from #21484 as well as additional fixes and modifications. Thanks to @NikoYuwono for providing these changes and getting this off the ground!

examples/flutter_gallery/lib/demo/material/snack_bar_demo.dart

@@ -83,6 +83,13 @@ class _SnackBarDemoState extends State<SnackBarDemo> {
         // can refer to the Scaffold with Scaffold.of().
         builder: buildBody
       ),
+      floatingActionButton: FloatingActionButton(
+        child: const Icon(Icons.add),
+        tooltip: 'Create',
+        onPressed: () {
+          print('Floating Action Button was pressed');
+        }
+      ),
     );
   }
 }

packages/flutter/lib/material.dart

@@ -94,6 +94,7 @@ export 'src/material/shadows.dart';
 export 'src/material/slider.dart';
 export 'src/material/slider_theme.dart';
 export 'src/material/snack_bar.dart';
+export 'src/material/snack_bar_theme.dart';
 export 'src/material/stepper.dart';
 export 'src/material/switch.dart';
 export 'src/material/switch_list_tile.dart';

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

@@ -23,7 +23,9 @@ import 'floating_action_button.dart';
 import 'floating_action_button_location.dart';
 import 'material.dart';
 import 'snack_bar.dart';
+import 'snack_bar_theme.dart';
 import 'theme.dart';
+import 'theme_data.dart';
 
 // Examples can assume:
 // TabController tabController;
@@ -355,6 +357,7 @@ class _ScaffoldLayout extends MultiChildLayoutDelegate {
     @required this.currentFloatingActionButtonLocation,
     @required this.floatingActionButtonMoveAnimationProgress,
     @required this.floatingActionButtonMotionAnimator,
+    @required this.isSnackBarFloating,
     @required this.extendBody,
   }) : assert(minInsets != null),
        assert(textDirection != null),
@@ -373,6 +376,8 @@ class _ScaffoldLayout extends MultiChildLayoutDelegate {
   final double floatingActionButtonMoveAnimationProgress;
   final FloatingActionButtonAnimator floatingActionButtonMotionAnimator;
 
+  final bool isSnackBarFloating;
+
   @override
   void performLayout(Size size) {
     final BoxConstraints looseConstraints = BoxConstraints.loose(size);
@@ -447,6 +452,12 @@ class _ScaffoldLayout extends MultiChildLayoutDelegate {
     Size bottomSheetSize = Size.zero;
     Size snackBarSize = Size.zero;
 
+    // Set the size of the SnackBar early if the behavior is fixed so
+    // the FAB can be positioned correctly.
+    if (hasChild(_ScaffoldSlot.snackBar) && !isSnackBarFloating) {
+      snackBarSize = layoutChild(_ScaffoldSlot.snackBar, fullWidthConstraints);
+    }
+
     if (hasChild(_ScaffoldSlot.bottomSheet)) {
       final BoxConstraints bottomSheetConstraints = BoxConstraints(
         maxWidth: fullWidthConstraints.maxWidth,
@@ -456,11 +467,6 @@ class _ScaffoldLayout extends MultiChildLayoutDelegate {
       positionChild(_ScaffoldSlot.bottomSheet, Offset((size.width - bottomSheetSize.width) / 2.0, contentBottom - bottomSheetSize.height));
     }
 
-    if (hasChild(_ScaffoldSlot.snackBar)) {
-      snackBarSize = layoutChild(_ScaffoldSlot.snackBar, fullWidthConstraints);
-      positionChild(_ScaffoldSlot.snackBar, Offset(0.0, contentBottom - snackBarSize.height));
-    }
-
     Rect floatingActionButtonRect;
     if (hasChild(_ScaffoldSlot.floatingActionButton)) {
       final Size fabSize = layoutChild(_ScaffoldSlot.floatingActionButton, looseConstraints);
@@ -488,6 +494,16 @@ class _ScaffoldLayout extends MultiChildLayoutDelegate {
       floatingActionButtonRect = fabOffset & fabSize;
     }
 
+    if (hasChild(_ScaffoldSlot.snackBar)) {
+      if (snackBarSize == Size.zero) {
+        snackBarSize = layoutChild(_ScaffoldSlot.snackBar, fullWidthConstraints);
+      }
+      final double snackBarYOffsetBase = floatingActionButtonRect != null && isSnackBarFloating
+        ? floatingActionButtonRect.top
+        : contentBottom;
+      positionChild(_ScaffoldSlot.snackBar, Offset(0.0, snackBarYOffsetBase - snackBarSize.height));
+    }
+
     if (hasChild(_ScaffoldSlot.statusBar)) {
       layoutChild(_ScaffoldSlot.statusBar, fullWidthConstraints.tighten(height: minInsets.top));
       positionChild(_ScaffoldSlot.statusBar, Offset.zero);
@@ -1828,7 +1844,13 @@ class ScaffoldState extends State<Scaffold> with TickerProviderStateMixin {
       );
     }
 
+    bool isSnackBarFloating = false;
     if (_snackBars.isNotEmpty) {
+      final SnackBarBehavior snackBarBehavior = _snackBars.first._widget.behavior
+        ?? themeData.snackBarTheme.behavior
+        ?? SnackBarBehavior.fixed;
+      isSnackBarFloating = snackBarBehavior == SnackBarBehavior.floating;
+
       _addIfNonNull(
         children,
         _snackBars.first._widget,
@@ -1973,6 +1995,7 @@ class ScaffoldState extends State<Scaffold> with TickerProviderStateMixin {
                 geometryNotifier: _geometryNotifier,
                 previousFloatingActionButtonLocation: _previousFloatingActionButtonLocation,
                 textDirection: textDirection,
+                isSnackBarFloating: isSnackBarFloating,
               ),
             );
           }),

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

+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:ui' show lerpDouble;
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/widgets.dart';
+
+import 'theme.dart';
+
+/// Defines where a [SnackBar] should appear within a [Scaffold] and how its
+/// location should be adjusted when the scaffold also includes a
+/// [FloatingActionButton] or a [BottomNavigationBar].
+enum SnackBarBehavior {
+  /// Fixes the [SnackBar] at the bottom of the [Scaffold].
+  ///
+  /// The exception is that the [SnackBar] will be shown above a
+  /// [BottomNavigationBar]. Additionally, the [SnackBar] will cause other
+  /// non-fixed widgets inside [Scaffold] to be pushed above (for example, the
+  /// [FloatingActionButton]).
+  fixed,
+
+  /// This behavior will cause [SnackBar] to be shown above other widgets in the
+  /// [Scaffold]. This includes being displayed above a [BottomNavigationBar]
+  /// and a [FloatingActionButton].
+  ///
+  /// See <https://material.io/design/components/snackbars.html> for more details.
+  floating,
+}
+
+/// Customizes default property values for [SnackBar] widgets.
+///
+/// Descendant widgets obtain the current [SnackBarThemeData] object using
+/// `Theme.of(context).snackBarTheme`. Instances of [SnackBarThemeData] can be
+/// customized with [SnackBarThemeData.copyWith].
+///
+/// Typically a [SnackBarThemeData] is specified as part of the overall [Theme]
+/// with [ThemeData.snackBarTheme]. The default for [ThemeData.snackBarTheme]
+/// provides all `null` properties.
+///
+/// All [SnackBarThemeData] properties are `null` by default. When null, the
+/// [SnackBar] will provide its own defaults.
+///
+/// See also:
+///
+///  * [ThemeData], which describes the overall theme information for the
+///    application.
+class SnackBarThemeData extends Diagnosticable {
+
+  /// Creates a theme that can be used for [ThemeData.snackBarTheme].
+  ///
+  /// The [elevation] must be null or non-negative.
+  const SnackBarThemeData({
+    this.backgroundColor,
+    this.actionTextColor,
+    this.disabledActionTextColor,
+    this.elevation,
+    this.shape,
+    this.behavior,
+  }) : assert(elevation == null || elevation >= 0.0);
+
+  /// Default value for [SnackBar.backgroundColor].
+  ///
+  /// If null, [SnackBar] defaults to dark grey: `Color(0xFF323232)`.
+  final Color backgroundColor;
+
+  /// Default value for [SnackBarAction.textColor].
+  ///
+  /// If null, [SnackBarAction] defaults to [ThemeData.colorScheme.secondaryColor].
+  final Color actionTextColor;
+
+  /// Default value for [SnackBarAction.disabledTextColor].
+  ///
+  /// If null, [SnackBarAction] defaults to [ColorScheme.onSurface] with its
+  /// opacity set to 0.30 if the [Theme]'s brightness is [Brightness.dark], 0.38
+  /// otherwise.
+  final Color disabledActionTextColor;
+
+  /// Default value for [SnackBar.elevation].
+  ///
+  /// If null, [SnackBar] uses a default of 6.0.
+  final double elevation;
+
+  /// Default value for [SnackBar.shape].
+  ///
+  /// If null, [SnackBar] provides different defaults depending on the
+  /// [SnackBarBehavior]. For [SnackBarBehavior.fixed], no overriding shape is
+  /// specified, so the [SnackBar] is rectangular. For
+  /// [SnackBarBehavior.floating], it uses a [RoundedRectangleBorder] with a
+  /// circular corner radius of 4.0.
+  final ShapeBorder shape;
+
+  /// Default value for [SnackBar.behavior].
+  ///
+  /// If null, [SnackBar] will default to [SnackBarBehavior.fixed].
+  final SnackBarBehavior behavior;
+
+  /// Creates a copy of this object with the given fields replaced with the
+  /// new values.
+  SnackBarThemeData copyWith({
+    Color backgroundColor,
+    Color actionTextColor,
+    Color disabledActionTextColor,
+    double elevation,
+    ShapeBorder shape,
+    SnackBarBehavior behavior,
+  }) {
+    return SnackBarThemeData(
+      backgroundColor: backgroundColor ?? this.backgroundColor,
+      actionTextColor: actionTextColor ?? this.actionTextColor,
+      disabledActionTextColor: disabledActionTextColor ?? this.disabledActionTextColor,
+      elevation: elevation ?? this.elevation,
+      shape: shape ?? this.shape,
+      behavior: behavior ?? this.behavior,
+    );
+  }
+
+  /// Linearly interpolate between two SnackBar Themes.
+  ///
+  /// The argument `t` must not be null.
+  ///
+  /// {@macro dart.ui.shadow.lerp}
+  static SnackBarThemeData lerp(SnackBarThemeData a, SnackBarThemeData b, double t) {
+    assert(t != null);
+    return SnackBarThemeData(
+      backgroundColor: Color.lerp(a?.backgroundColor, b?.backgroundColor, t),
+      actionTextColor: Color.lerp(a?.actionTextColor, b?.actionTextColor, t),
+      disabledActionTextColor: Color.lerp(a?.disabledActionTextColor, b?.disabledActionTextColor, t),
+      elevation: lerpDouble(a?.elevation, b?.elevation, t),
+      shape: ShapeBorder.lerp(a?.shape, b?.shape, t),
+      behavior: t < 0.5 ? a.behavior : b.behavior,
+    );
+  }
+
+  @override
+  int get hashCode {
+    return hashValues(
+      backgroundColor,
+      actionTextColor,
+      disabledActionTextColor,
+      elevation,
+      shape,
+      behavior,
+    );
+  }
+
+  @override
+  bool operator ==(dynamic other) {
+    if (identical(this, other))
+      return true;
+    if (other.runtimeType != runtimeType)
+      return false;
+    final SnackBarThemeData typedOther = other;
+    return typedOther.backgroundColor == backgroundColor
+        && typedOther.actionTextColor == actionTextColor
+        && typedOther.disabledActionTextColor == disabledActionTextColor
+        && typedOther.elevation == elevation
+        && typedOther.shape == shape
+        && typedOther.behavior == behavior;
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties.add(DiagnosticsProperty<Color>('backgroundColor', backgroundColor, defaultValue: null));
+    properties.add(DiagnosticsProperty<Color>('actionTextColor', actionTextColor, defaultValue: null));
+    properties.add(DiagnosticsProperty<Color>('disabledActionTextColor', disabledActionTextColor, defaultValue: null));
+    properties.add(DiagnosticsProperty<double>('elevation', elevation, defaultValue: null));
+    properties.add(DiagnosticsProperty<ShapeBorder>('shape', shape, defaultValue: null));
+    properties.add(DiagnosticsProperty<SnackBarBehavior>('behavior', behavior, defaultValue: null));
+  }
+}

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

@@ -23,6 +23,7 @@ import 'ink_well.dart' show InteractiveInkFeatureFactory;
 import 'input_decorator.dart';
 import 'page_transitions_theme.dart';
 import 'slider_theme.dart';
+import 'snack_bar_theme.dart';
 import 'tab_bar_theme.dart';
 import 'text_theme.dart';
 import 'typography.dart';
@@ -163,6 +164,7 @@ class ThemeData extends Diagnosticable {
     FloatingActionButtonThemeData floatingActionButtonTheme,
     Typography typography,
     CupertinoThemeData cupertinoOverrideTheme,
+    SnackBarThemeData snackBarTheme,
   }) {
     brightness ??= Brightness.light;
     final bool isDark = brightness == Brightness.dark;
@@ -256,6 +258,7 @@ class ThemeData extends Diagnosticable {
     dialogTheme ??= const DialogTheme();
     floatingActionButtonTheme ??= const FloatingActionButtonThemeData();
     cupertinoOverrideTheme = cupertinoOverrideTheme?.noDefault();
+    snackBarTheme ??= const SnackBarThemeData();
 
     return ThemeData.raw(
       brightness: brightness,
@@ -309,6 +312,7 @@ class ThemeData extends Diagnosticable {
       floatingActionButtonTheme: floatingActionButtonTheme,
       typography: typography,
       cupertinoOverrideTheme: cupertinoOverrideTheme,
+      snackBarTheme: snackBarTheme,
     );
   }
 
@@ -374,6 +378,7 @@ class ThemeData extends Diagnosticable {
     @required this.floatingActionButtonTheme,
     @required this.typography,
     @required this.cupertinoOverrideTheme,
+    @required this.snackBarTheme,
   }) : assert(brightness != null),
        assert(primaryColor != null),
        assert(primaryColorBrightness != null),
@@ -422,7 +427,8 @@ class ThemeData extends Diagnosticable {
        assert(colorScheme != null),
        assert(dialogTheme != null),
        assert(floatingActionButtonTheme != null),
-       assert(typography != null);
+       assert(typography != null),
+       assert(snackBarTheme != null);
 
   // Warning: make sure these properties are in the exact same order as in
   // hashValues() and in the raw constructor and in the order of fields in
@@ -660,6 +666,9 @@ class ThemeData extends Diagnosticable {
   /// that is possible without significant backwards compatibility breaks.
   final ColorScheme colorScheme;
 
+  /// A theme for customizing colors, shape, elevation, and behavior of a [SnackBar].
+  final SnackBarThemeData snackBarTheme;
+
   /// A theme for customizing the shape of a dialog.
   final DialogTheme dialogTheme;
 
@@ -736,6 +745,7 @@ class ThemeData extends Diagnosticable {
     FloatingActionButtonThemeData floatingActionButtonTheme,
     Typography typography,
     CupertinoThemeData cupertinoOverrideTheme,
+    SnackBarThemeData snackBarTheme,
   }) {
     cupertinoOverrideTheme = cupertinoOverrideTheme?.noDefault();
     return ThemeData.raw(
@@ -790,6 +800,7 @@ class ThemeData extends Diagnosticable {
       floatingActionButtonTheme: floatingActionButtonTheme ?? this.floatingActionButtonTheme,
       typography: typography ?? this.typography,
       cupertinoOverrideTheme: cupertinoOverrideTheme ?? this.cupertinoOverrideTheme,
+      snackBarTheme: snackBarTheme ?? this.snackBarTheme,
     );
   }
 
@@ -922,6 +933,7 @@ class ThemeData extends Diagnosticable {
       floatingActionButtonTheme: FloatingActionButtonThemeData.lerp(a.floatingActionButtonTheme, b.floatingActionButtonTheme, t),
       typography: Typography.lerp(a.typography, b.typography, t),
       cupertinoOverrideTheme: t < 0.5 ? a.cupertinoOverrideTheme : b.cupertinoOverrideTheme,
+      snackBarTheme: SnackBarThemeData.lerp(a.snackBarTheme, b.snackBarTheme, t),
     );
   }
 
@@ -983,7 +995,8 @@ class ThemeData extends Diagnosticable {
            (otherData.dialogTheme == dialogTheme) &&
            (otherData.floatingActionButtonTheme == floatingActionButtonTheme) &&
            (otherData.typography == typography) &&
-           (otherData.cupertinoOverrideTheme == cupertinoOverrideTheme);
+           (otherData.cupertinoOverrideTheme == cupertinoOverrideTheme) &&
+           (otherData.snackBarTheme == snackBarTheme);
   }
 
   @override
@@ -1046,6 +1059,7 @@ class ThemeData extends Diagnosticable {
           floatingActionButtonTheme,
           typography,
           cupertinoOverrideTheme,
+          snackBarTheme,
         ),
       ),
     );
@@ -1103,6 +1117,7 @@ class ThemeData extends Diagnosticable {
     properties.add(DiagnosticsProperty<FloatingActionButtonThemeData>('floatingActionButtonThemeData', floatingActionButtonTheme, defaultValue: defaultData.floatingActionButtonTheme));
     properties.add(DiagnosticsProperty<Typography>('typography', typography, defaultValue: defaultData.typography));
     properties.add(DiagnosticsProperty<CupertinoThemeData>('cupertinoOverrideTheme', cupertinoOverrideTheme, defaultValue: defaultData.cupertinoOverrideTheme));
+    properties.add(DiagnosticsProperty<SnackBarThemeData>('snackBarTheme', snackBarTheme, defaultValue: defaultData.snackBarTheme));
   }
 }