M3 snackbar [re-land] (#116218)

* Add M2 defaults and template skeleton * add MaterialStateColor functionality to ActionTextColor (issue #110402) * Add M2 defaults and template skeleton * updated material 3 tokens * Updated snackbar demo * add theme tests * add gen defaults * formatting * more whitespace fixes * add widget type * update docs * code review changes * Add line overflow functionality * whitespace fixes * update M3 animation * whitespace fixes * add insetPadding param * Modifed icon parameter to showCloseIcon * white space fixes * test fixes * rename iconColor to closeIconColor * debug test fix * de-britishification * g3fix * g3fix * debug test fix
flutter · Nov 30, 2022 · 29422d2 · 29422d2
1 parent 24b3c38
commit 29422d2
Show file tree

Hide file tree

Showing 9 changed files with 801 additions and 94 deletions.
diff --git a/dev/tools/gen_defaults/bin/gen_defaults.dart b/dev/tools/gen_defaults/bin/gen_defaults.dart
@@ -44,6 +44,7 @@ import 'package:gen_defaults/progress_indicator_template.dart';
 import 'package:gen_defaults/radio_template.dart';
 import 'package:gen_defaults/segmented_button_template.dart';
 import 'package:gen_defaults/slider_template.dart';
+import 'package:gen_defaults/snackbar_template.dart';
 import 'package:gen_defaults/surface_tint.dart';
 import 'package:gen_defaults/switch_template.dart';
 import 'package:gen_defaults/tabs_template.dart';
@@ -162,6 +163,7 @@ Future<void> main(List<String> args) async {
   ProgressIndicatorTemplate('ProgressIndicator', '$materialLib/progress_indicator.dart', tokens).updateFile();
   RadioTemplate('Radio<T>', '$materialLib/radio.dart', tokens).updateFile();
   SegmentedButtonTemplate('SegmentedButton', '$materialLib/segmented_button.dart', tokens).updateFile();
+  SnackbarTemplate('md.comp.snackbar', 'Snackbar', '$materialLib/snack_bar.dart', tokens).updateFile();
   SliderTemplate('md.comp.slider', 'Slider', '$materialLib/slider.dart', tokens).updateFile();
   SurfaceTintTemplate('SurfaceTint', '$materialLib/elevation_overlay.dart', tokens).updateFile();
   SwitchTemplate('Switch', '$materialLib/switch.dart', tokens).updateFile();

diff --git a/dev/tools/gen_defaults/lib/snackbar_template.dart b/dev/tools/gen_defaults/lib/snackbar_template.dart
@@ -0,0 +1,76 @@
+// 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 SnackbarTemplate extends TokenTemplate {
+  const SnackbarTemplate(
+      this.tokenGroup, super.blockName, super.fileName, super.tokens, {
+        super.colorSchemePrefix = '_colors.'
+  });
+
+  final String tokenGroup;
+
+  @override
+  String generate() => '''
+class _${blockName}DefaultsM3 extends SnackBarThemeData {
+    _${blockName}DefaultsM3(this.context);
+
+  final BuildContext context;
+  late final ThemeData _theme = Theme.of(context);
+
+  late final ColorScheme _colors = _theme.colorScheme;
+
+  @override
+  Color get backgroundColor => ${componentColor("$tokenGroup.container")};
+
+  @override
+  Color get actionTextColor =>  MaterialStateColor.resolveWith((Set<MaterialState> states) {
+    if (states.contains(MaterialState.disabled)) {
+      return ${componentColor("$tokenGroup.action.pressed.label-text")};
+    }
+    if (states.contains(MaterialState.pressed)) {
+      return ${componentColor("$tokenGroup.action.pressed.label-text")};
+    }
+    if (states.contains(MaterialState.hovered)) {
+      return ${componentColor("$tokenGroup.action.hover.label-text")};
+    }
+    if (states.contains(MaterialState.focused)) {
+      return ${componentColor("$tokenGroup.action.focus.label-text")};
+    }
+    return ${componentColor("$tokenGroup.action.label-text")};
+  });
+
+  @override
+  Color get disabledActionTextColor =>
+    ${componentColor("$tokenGroup.action.pressed.label-text")};
+
+
+  @override
+  TextStyle get contentTextStyle =>
+    ${textStyle("$tokenGroup.supporting-text")}!.copyWith
+      (color:  ${componentColor("$tokenGroup.supporting-text")},
+    );
+
+  @override
+  double get elevation => ${elevation("$tokenGroup.container")};
+
+  @override
+  ShapeBorder get shape => ${shape("$tokenGroup.container")};
+
+  @override
+  SnackBarBehavior get behavior => SnackBarBehavior.fixed;
+
+  @override
+  EdgeInsets get insetPadding => const EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 10.0);
+
+  @override
+  bool get showCloseIcon => false;
+
+  @override
+  Color get iconColor => _colors.onInverseSurface;
+  }
+
+''';
+}
diff --git a/examples/api/lib/material/snack_bar/snack_bar.2.dart b/examples/api/lib/material/snack_bar/snack_bar.2.dart
@@ -0,0 +1,168 @@
+// 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.
+
+/// Flutter code sample for [SnackBar] with Material 3 specifications.
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const MyApp());
+
+// A Material 3 [SnackBar] demonstrating an optional icon, in either floating
+// or fixed format.
+class MyApp extends StatelessWidget {
+  const MyApp({super.key});
+
+  static const String _title = 'Flutter Code Sample';
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: _title,
+      theme: ThemeData(useMaterial3: true),
+      home: Scaffold(
+        appBar: AppBar(title: const Text(_title)),
+        body: const Center(
+          child: SnackBarExample(),
+        ),
+      ),
+    );
+  }
+}
+
+class SnackBarExample extends StatefulWidget {
+  const SnackBarExample({super.key});
+
+  @override
+  State<SnackBarExample> createState() => _SnackBarExampleState();
+}
+
+class _SnackBarExampleState extends State<SnackBarExample> {
+  SnackBarBehavior? _snackBarBehavior = SnackBarBehavior.floating;
+  bool _withIcon = true;
+  bool _withAction = true;
+  bool _multiLine = false;
+  bool _longActionLabel = false;
+
+  Padding _configRow(List<Widget> children) => Padding(
+      padding: const EdgeInsets.all(8.0), child: Row(children: children));
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(padding: const EdgeInsets.only(left: 50.0), child: Column(
+      children: <Widget>[
+        _configRow(<Widget>[
+          Text('Snack Bar configuration',
+              style: Theme.of(context).textTheme.bodyLarge),
+        ]),
+        _configRow(
+          <Widget>[
+            const Text('Fixed'),
+            Radio<SnackBarBehavior>(
+              value: SnackBarBehavior.fixed,
+              groupValue: _snackBarBehavior,
+              onChanged: (SnackBarBehavior? value) {
+                setState(() {
+                  _snackBarBehavior = value;
+                });
+              },
+            ),
+            const Text('Floating'),
+            Radio<SnackBarBehavior>(
+              value: SnackBarBehavior.floating,
+              groupValue: _snackBarBehavior,
+              onChanged: (SnackBarBehavior? value) {
+                setState(() {
+                  _snackBarBehavior = value;
+                });
+              },
+            ),
+          ],
+        ),
+        _configRow(
+          <Widget>[
+            const Text('Include Icon '),
+            Switch(
+              value: _withIcon,
+              onChanged: (bool value) {
+                setState(() {
+                  _withIcon = !_withIcon;
+                });
+              },
+            ),
+          ],
+        ),
+        _configRow(
+          <Widget>[
+            const Text('Include Action '),
+            Switch(
+              value: _withAction,
+              onChanged: (bool value) {
+                setState(() {
+                  _withAction = !_withAction;
+                });
+              },
+            ),
+            const SizedBox(width: 16.0),
+            const Text('Long Action Label '),
+            Switch(
+              value: _longActionLabel,
+              onChanged: !_withAction
+                  ? null
+                  : (bool value) {
+                      setState(() {
+                        _longActionLabel = !_longActionLabel;
+                      });
+                    },
+            ),
+          ],
+        ),
+        _configRow(
+          <Widget>[
+            const Text('Multi Line Text'),
+            Switch(
+              value: _multiLine,
+              onChanged: _snackBarBehavior == SnackBarBehavior.fixed ? null : (bool value) {
+                setState(() {
+                  _multiLine = !_multiLine;
+                });
+              },
+            ),
+          ],
+        ),
+        const SizedBox(height: 16.0),
+        ElevatedButton(
+          child: const Text('Show Snackbar'),
+          onPressed: () {
+            ScaffoldMessenger.of(context).showSnackBar(_snackBar());
+          }
+        ),
+      ],
+    ),
+  );
+}
+
+  SnackBar _snackBar() {
+    final SnackBarAction? action = _withAction
+        ? SnackBarAction(
+            label: _longActionLabel ? 'Long Action Text' : 'Action',
+            onPressed: () {
+              // Code to execute.
+            },
+          )
+        : null;
+    final double? width =
+        _snackBarBehavior == SnackBarBehavior.floating && _multiLine ? 400.0 : null;
+    final String label = _multiLine
+        ? 'A Snack Bar with quite a lot of text which spans across multiple lines'
+        : 'Single Line Snack Bar';
+    return SnackBar(
+      content: Text(label),
+      showCloseIcon: _withIcon,
+      width: width,
+      behavior: _snackBarBehavior,
+      action: action,
+      duration: const Duration(seconds: 3),
+    );
+  }
+}