Update MaterialBanner to support Material 3 (#105957)

dev/tools/gen_defaults/bin/gen_defaults.dart

@@ -17,16 +17,17 @@
 import 'dart:convert';
 import 'dart:io';
 
+import 'package:gen_defaults/action_chip_template.dart';
 import 'package:gen_defaults/app_bar_template.dart';
+import 'package:gen_defaults/banner_template.dart';
 import 'package:gen_defaults/button_template.dart';
 import 'package:gen_defaults/card_template.dart';
 import 'package:gen_defaults/checkbox_template.dart';
-import 'package:gen_defaults/chip_action_template.dart';
-import 'package:gen_defaults/chip_filter_template.dart';
-import 'package:gen_defaults/chip_input_template.dart';
 import 'package:gen_defaults/dialog_template.dart';
 import 'package:gen_defaults/fab_template.dart';
+import 'package:gen_defaults/filter_chip_template.dart';
 import 'package:gen_defaults/icon_button_template.dart';
+import 'package:gen_defaults/input_chip_template.dart';
 import 'package:gen_defaults/input_decorator_template.dart';
 import 'package:gen_defaults/navigation_bar_template.dart';
 import 'package:gen_defaults/navigation_rail_template.dart';
@@ -103,17 +104,18 @@ Future<void> main(List<String> args) async {
   tokens['colorsDark'] = _readTokenFile('color_dark.json');
 
   AppBarTemplate('AppBar', '$materialLib/app_bar.dart', tokens).updateFile();
+  BannerTemplate('Banner', '$materialLib/banner.dart', tokens).updateFile();
   ButtonTemplate('md.comp.elevated-button', 'ElevatedButton', '$materialLib/elevated_button.dart', tokens).updateFile();
   ButtonTemplate('md.comp.filled-button', 'FilledButton', '$materialLib/filled_button.dart', tokens).updateFile();
   ButtonTemplate('md.comp.filled-tonal-button', 'FilledTonalButton', '$materialLib/filled_button.dart', tokens).updateFile();
   ButtonTemplate('md.comp.outlined-button', 'OutlinedButton', '$materialLib/outlined_button.dart', tokens).updateFile();
   ButtonTemplate('md.comp.text-button', 'TextButton', '$materialLib/text_button.dart', tokens).updateFile();
   CardTemplate('Card', '$materialLib/card.dart', tokens).updateFile();
   CheckboxTemplate('Checkbox', '$materialLib/checkbox.dart', tokens).updateFile();
-  ChipActionTemplate('ActionChip', '$materialLib/chip_action.dart', tokens).updateFile();
-  ChipFilterTemplate('FilterChip', '$materialLib/chip_filter.dart', tokens).updateFile();
-  ChipFilterTemplate('FilterChip', '$materialLib/chip_choice.dart', tokens).updateFile();
-  ChipInputTemplate('InputChip', '$materialLib/chip_input.dart', tokens).updateFile();
+  ChipActionTemplate('ActionChip', '$materialLib/action_chip.dart', tokens).updateFile();
+  ChipFilterTemplate('FilterChip', '$materialLib/filter_chip.dart', tokens).updateFile();
+  ChipFilterTemplate('FilterChip', '$materialLib/choice_chip.dart', tokens).updateFile();
+  ChipInputTemplate('InputChip', '$materialLib/input_chip.dart', tokens).updateFile();
   DialogTemplate('Dialog', '$materialLib/dialog.dart', tokens).updateFile();
   FABTemplate('FAB', '$materialLib/floating_action_button.dart', tokens).updateFile();
   IconButtonTemplate('IconButton', '$materialLib/icon_button.dart', tokens).updateFile();

dev/tools/gen_defaults/lib/banner_template.dart

@@ -0,0 +1,31 @@
+// Copyright 2014 The Flutter 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 'template.dart';
+
+class BannerTemplate extends TokenTemplate {
+  const BannerTemplate(super.blockName, super.fileName, super.tokens);
+
+  @override
+  String generate() => '''
+class _${blockName}DefaultsM3 extends MaterialBannerThemeData {
+  const _${blockName}DefaultsM3(this.context)
+    : super(elevation: ${elevation("md.comp.banner.container")});
+
+  final BuildContext context;
+
+  @override
+  Color? get backgroundColor => ${componentColor("md.comp.banner.container")};
+
+  @override
+  Color? get surfaceTintColor => ${color("md.comp.banner.container.surface-tint-layer.color")};
+
+  @override
+  Color? get dividerColor => ${color("md.comp.banner.divider.color")};
+
+  @override
+  TextStyle? get contentTextStyle => ${textStyle("md.comp.banner.supporting-text")};
+}
+''';
+}

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

@@ -102,12 +102,15 @@ class MaterialBanner extends StatefulWidget {
     this.elevation,
     this.leading,
     this.backgroundColor,
+    this.surfaceTintColor,
+    this.shadowColor,
+    this.dividerColor,
     this.padding,
     this.leadingPadding,
     this.forceActionsBelow = false,
     this.overflowAlignment = OverflowBarAlignment.end,
     this.animation,
-    this.onVisible
+    this.onVisible,
   }) : assert(elevation == null || elevation >= 0.0),
        assert(content != null),
        assert(actions != null),
@@ -153,6 +156,29 @@ class MaterialBanner extends StatefulWidget {
   /// also `null`, [ColorScheme.surface] of [ThemeData.colorScheme] is used.
   final Color? backgroundColor;
 
+  /// The color used as an overlay on [backgroundColor] to indicate elevation.
+  ///
+  /// If null, [MaterialBannerThemeData.surfaceTintColor] is used. If that
+  /// is also null, the default value is [ColorScheme.surfaceTint].
+  ///
+  /// See [Material.surfaceTintColor] for more details on how this
+  /// overlay is applied.
+  final Color? surfaceTintColor;
+
+  /// The color of the shadow below the [MaterialBanner].
+  ///
+  /// If this property is null, then [MaterialBannerThemeData.shadowColor] of
+  /// [ThemeData.bannerTheme] is used. If that is also null, the default value
+  /// is null.
+  final Color? shadowColor;
+
+  /// The color of the divider.
+  ///
+  /// If this property is null, then [MaterialBannerThemeData.dividerColor] of
+  /// [ThemeData.bannerTheme] is used. If that is also null, the default value
+  /// is [ColorScheme.surfaceVariant].
+  final Color? dividerColor;
+
   /// The amount of space by which to inset the [content].
   ///
   /// If the [actions] are below the [content], this defaults to
@@ -273,6 +299,7 @@ class _MaterialBannerState extends State<MaterialBanner> {
 
     final ThemeData theme = Theme.of(context);
     final MaterialBannerThemeData bannerTheme = MaterialBannerTheme.of(context);
+    final MaterialBannerThemeData defaults = theme.useMaterial3 ? _BannerDefaultsM3(context) : _BannerDefaultsM2(context);
 
     final bool isSingleRow = widget.actions.length == 1 && !widget.forceActionsBelow;
     final EdgeInsetsGeometry padding = widget.padding ?? bannerTheme.padding ?? (isSingleRow
@@ -296,16 +323,26 @@ class _MaterialBannerState extends State<MaterialBanner> {
     final double elevation = widget.elevation ?? bannerTheme.elevation ?? 0.0;
     final Color backgroundColor = widget.backgroundColor
         ?? bannerTheme.backgroundColor
-        ?? theme.colorScheme.surface;
+        ?? defaults.backgroundColor!;
+    final Color? surfaceTintColor = widget.surfaceTintColor
+        ?? bannerTheme.surfaceTintColor
+        ?? defaults.surfaceTintColor;
+    final Color? shadowColor = widget.shadowColor
+        ?? bannerTheme.shadowColor;
+    final Color? dividerColor = widget.dividerColor
+        ?? bannerTheme.dividerColor
+        ?? defaults.dividerColor;
     final TextStyle? textStyle = widget.contentTextStyle
         ?? bannerTheme.contentTextStyle
-        ?? theme.textTheme.bodyMedium;
+        ?? defaults.contentTextStyle;
 
     Widget materialBanner = Container(
       margin: EdgeInsets.only(bottom: elevation > 0 ? 10.0 : 0.0),
       child: Material(
         elevation: elevation,
         color: backgroundColor,
+        surfaceTintColor: surfaceTintColor,
+        shadowColor: shadowColor,
         child: Column(
           mainAxisSize: MainAxisSize.min,
           children: <Widget>[
@@ -331,9 +368,8 @@ class _MaterialBannerState extends State<MaterialBanner> {
             ),
             if (!isSingleRow)
               buttonBar,
-
             if (elevation == 0)
-              const Divider(height: 0),
+              Divider(height: 0, color: dividerColor),
           ],
         ),
       ),
@@ -394,3 +430,51 @@ class _MaterialBannerState extends State<MaterialBanner> {
     );
   }
 }
+
+class _BannerDefaultsM2 extends MaterialBannerThemeData {
+  _BannerDefaultsM2(this.context)
+    : _theme = Theme.of(context),
+      super(elevation: 0.0);
+
+  final BuildContext context;
+  final ThemeData _theme;
+
+  @override
+  Color? get backgroundColor => _theme.colorScheme.surface;
+
+  @override
+  Color? get dividerColor => Theme.of(context).colorScheme.surfaceVariant;
+
+  @override
+  TextStyle? get contentTextStyle => _theme.textTheme.bodyText2;
+}
+
+// BEGIN GENERATED TOKEN PROPERTIES - Banner
+
+// Do not edit by hand. The code between the "BEGIN GENERATED" and
+// "END GENERATED" comments are generated from data in the Material
+// Design token database by the script:
+//   dev/tools/gen_defaults/bin/gen_defaults.dart.
+
+// Token database version: v0_101
+
+class _BannerDefaultsM3 extends MaterialBannerThemeData {
+  const _BannerDefaultsM3(this.context)
+    : super(elevation: 1.0);
+
+  final BuildContext context;
+
+  @override
+  Color? get backgroundColor => Theme.of(context).colorScheme.surface;
+
+  @override
+  Color? get surfaceTintColor => Theme.of(context).colorScheme.surfaceTint;
+
+  @override
+  Color? get dividerColor => Theme.of(context).colorScheme.surfaceVariant;
+
+  @override
+  TextStyle? get contentTextStyle => Theme.of(context).textTheme.bodyMedium;
+}
+
+// END GENERATED TOKEN PROPERTIES - Banner

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

@@ -35,6 +35,9 @@ class MaterialBannerThemeData with Diagnosticable {
   /// [ThemeData.bannerTheme].
   const MaterialBannerThemeData({
     this.backgroundColor,
+    this.surfaceTintColor,
+    this.shadowColor,
+    this.dividerColor,
     this.contentTextStyle,
     this.elevation,
     this.padding,
@@ -44,6 +47,15 @@ class MaterialBannerThemeData with Diagnosticable {
   /// The background color of a [MaterialBanner].
   final Color? backgroundColor;
 
+  /// Overrides the default value of [MaterialBanner.surfaceTintColor].
+  final Color? surfaceTintColor;
+
+  /// Overrides the default value of [MaterialBanner.shadowColor].
+  final Color? shadowColor;
+
+  /// Overrides the default value of [MaterialBanner.dividerColor].
+  final Color? dividerColor;
+
   /// Used to configure the [DefaultTextStyle] for the [MaterialBanner.content]
   /// widget.
   final TextStyle? contentTextStyle;
@@ -63,13 +75,19 @@ class MaterialBannerThemeData with Diagnosticable {
   /// new values.
   MaterialBannerThemeData copyWith({
     Color? backgroundColor,
+    Color? surfaceTintColor,
+    Color? shadowColor,
+    Color? dividerColor,
     TextStyle? contentTextStyle,
     double? elevation,
     EdgeInsetsGeometry? padding,
     EdgeInsetsGeometry? leadingPadding,
   }) {
     return MaterialBannerThemeData(
       backgroundColor: backgroundColor ?? this.backgroundColor,
+      surfaceTintColor: surfaceTintColor ?? this.surfaceTintColor,
+      shadowColor: shadowColor ?? this.shadowColor,
+      dividerColor: dividerColor ?? this.dividerColor,
       contentTextStyle: contentTextStyle ?? this.contentTextStyle,
       elevation: elevation ?? this.elevation,
       padding: padding ?? this.padding,
@@ -86,6 +104,9 @@ class MaterialBannerThemeData with Diagnosticable {
     assert(t != null);
     return MaterialBannerThemeData(
       backgroundColor: Color.lerp(a?.backgroundColor, b?.backgroundColor, t),
+      surfaceTintColor: Color.lerp(a?.surfaceTintColor, b?.surfaceTintColor, t),
+      shadowColor: Color.lerp(a?.shadowColor, b?.shadowColor, t),
+      dividerColor: Color.lerp(a?.dividerColor, b?.dividerColor, t),
       contentTextStyle: TextStyle.lerp(a?.contentTextStyle, b?.contentTextStyle, t),
       elevation: lerpDouble(a?.elevation, b?.elevation, t),
       padding: EdgeInsetsGeometry.lerp(a?.padding, b?.padding, t),
@@ -96,6 +117,9 @@ class MaterialBannerThemeData with Diagnosticable {
   @override
   int get hashCode => Object.hash(
     backgroundColor,
+    surfaceTintColor,
+    shadowColor,
+    dividerColor,
     contentTextStyle,
     elevation,
     padding,
@@ -111,19 +135,25 @@ class MaterialBannerThemeData with Diagnosticable {
       return false;
     }
     return other is MaterialBannerThemeData
-        && other.backgroundColor == backgroundColor
-        && other.contentTextStyle == contentTextStyle
-        && other.elevation == elevation
-        && other.padding == padding
-        && other.leadingPadding == leadingPadding;
+      && other.backgroundColor == backgroundColor
+      && other.surfaceTintColor == surfaceTintColor
+      && other.shadowColor == shadowColor
+      && other.dividerColor == dividerColor
+      && other.contentTextStyle == contentTextStyle
+      && other.elevation == elevation
+      && other.padding == padding
+      && other.leadingPadding == leadingPadding;
   }
 
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
     properties.add(ColorProperty('backgroundColor', backgroundColor, defaultValue: null));
+    properties.add(ColorProperty('surfaceTintColor', surfaceTintColor, defaultValue: null));
+    properties.add(ColorProperty('shadowColor', shadowColor, defaultValue: null));
+    properties.add(ColorProperty('dividerColor', dividerColor, defaultValue: null));
     properties.add(DiagnosticsProperty<TextStyle>('contentTextStyle', contentTextStyle, defaultValue: null));
-    properties.add(DiagnosticsProperty<double>('elevation', elevation, defaultValue: null));
+    properties.add(DoubleProperty('elevation', elevation, defaultValue: null));
     properties.add(DiagnosticsProperty<EdgeInsetsGeometry>('padding', padding, defaultValue: null));
     properties.add(DiagnosticsProperty<EdgeInsetsGeometry>('leadingPadding', leadingPadding, defaultValue: null));
   }