Added support for M3 filled and filled tonal buttons. (#107382)

dev/tools/gen_defaults/bin/gen_defaults.dart

@@ -103,6 +103,8 @@ Future<void> main(List<String> args) async {
 
   AppBarTemplate('AppBar', '$materialLib/app_bar.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();

examples/api/lib/material/button_style/button_style.0.dart

@@ -58,31 +58,9 @@ class ButtonTypesGroup extends StatelessWidget {
         mainAxisAlignment: MainAxisAlignment.spaceEvenly,
         children: <Widget>[
           ElevatedButton(onPressed: onPressed, child: const Text('Elevated')),
-
-          // Use an ElevatedButton with specific style to implement the
-          // 'Filled' type.
-          ElevatedButton(
-            style: ElevatedButton.styleFrom(
-              foregroundColor: Theme.of(context).colorScheme.onPrimary,
-              backgroundColor: Theme.of(context).colorScheme.primary,
-            ).copyWith(elevation: ButtonStyleButton.allOrNull(0.0)),
-            onPressed: onPressed,
-            child: const Text('Filled'),
-          ),
-
-          // Use an ElevatedButton with specific style to implement the
-          // 'Filled Tonal' type.
-          ElevatedButton(
-            style: ElevatedButton.styleFrom(
-              foregroundColor: Theme.of(context).colorScheme.onSecondaryContainer,
-              backgroundColor: Theme.of(context).colorScheme.secondaryContainer,
-            ).copyWith(elevation: ButtonStyleButton.allOrNull(0.0)),
-            onPressed: onPressed,
-            child: const Text('Filled Tonal'),
-          ),
-
+          FilledButton(onPressed: onPressed, child: const Text('Filled')),
+          FilledButton.tonal(onPressed: onPressed, child: const Text('Filled Tonal')),
           OutlinedButton(onPressed: onPressed, child: const Text('Outlined')),
-
           TextButton(onPressed: onPressed, child: const Text('Text')),
         ],
       ),

examples/api/lib/material/filled_button/filled_button.0.dart

@@ -0,0 +1,61 @@
+// 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 FilledButton
+
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const FilledButtonApp());
+}
+
+class FilledButtonApp extends StatelessWidget {
+  const FilledButtonApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      theme: ThemeData(colorSchemeSeed: const Color(0xff6750a4), useMaterial3: true),
+      home: Scaffold(
+        appBar: AppBar(title: const Text('FilledButton Sample')),
+        body: Center(
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            children: <Widget>[
+              Column(children: <Widget>[
+                const SizedBox(height: 30),
+                const Text('Filled'),
+                const SizedBox(height: 15),
+                FilledButton(
+                  onPressed: () {},
+                  child: const Text('Enabled'),
+                ),
+                const SizedBox(height: 30),
+                const FilledButton(
+                  onPressed: null,
+                  child: Text('Disabled'),
+                ),
+              ]),
+              const SizedBox(width: 30),
+              Column(children: <Widget>[
+                const SizedBox(height: 30),
+                const Text('Filled tonal'),
+                const SizedBox(height: 15),
+                FilledButton.tonal(
+                  onPressed: () {},
+                  child: const Text('Enabled'),
+                ),
+                const SizedBox(height: 30),
+                const FilledButton.tonal(
+                  onPressed: null,
+                  child: Text('Disabled'),
+                ),
+              ])
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

packages/flutter/lib/material.dart

@@ -80,6 +80,8 @@ export 'src/material/expansion_panel.dart';
 export 'src/material/expansion_tile.dart';
 export 'src/material/expansion_tile_theme.dart';
 export 'src/material/feedback.dart';
+export 'src/material/filled_button.dart';
+export 'src/material/filled_button_theme.dart';
 export 'src/material/filter_chip.dart';
 export 'src/material/flexible_space_bar.dart';
 export 'src/material/floating_action_button.dart';

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

@@ -26,14 +26,16 @@ import 'theme_data.dart';
 /// from the themes or from app-specific sources.
 ///
 /// This class is planned to be deprecated in a future release, see
-/// [ButtonStyleButton], the base class of [TextButton], [ElevatedButton], and
-/// [OutlinedButton].
+/// [ButtonStyleButton], the base class of [ElevatedButton], [FilledButton],
+/// [OutlinedButton] and [TextButton].
 ///
 /// See also:
 ///
-///  * [TextButton], a simple flat button without a shadow.
 ///  * [ElevatedButton], a filled button whose material elevates when pressed.
-///  * [OutlinedButton], a [TextButton] with a border outline.
+///  * [FilledButton], a filled button that doesn't elevate when pressed.
+///  * [FilledButton.tonal], a filled button variant that uses a secondary fill color.
+///  * [OutlinedButton], a button with an outlined border and no fill color.
+///  * [TextButton], a button with no outline or fill color.
 @Category(<String>['Material', 'Button'])
 class RawMaterialButton extends StatefulWidget {
   /// Create a button based on [Semantics], [Material], and [InkWell] widgets.

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

@@ -78,8 +78,8 @@ import 'theme_data.dart';
 /// useful to make relatively sweeping changes based on a few initial
 /// parameters with simple values. The button styleFrom() methods
 /// enable such sweeping changes. See for example:
-/// [TextButton.styleFrom], [ElevatedButton.styleFrom],
-/// [OutlinedButton.styleFrom].
+/// [ElevatedButton.styleFrom], [FilledButton.styleFrom],
+/// [OutlinedButton.styleFrom], [TextButton.styleFrom].
 ///
 /// For example, to override the default text and icon colors for a
 /// [TextButton], as well as its overlay color, with all of the
@@ -119,8 +119,8 @@ import 'theme_data.dart';
 /// | Type         | Flutter implementation  |
 /// | :----------- | :---------------------- |
 /// | Elevated     | [ElevatedButton]        |
-/// | Filled       | Styled [ElevatedButton] |
-/// | Filled Tonal | Styled [ElevatedButton] |
+/// | Filled       | [FilledButton]          |
+/// | Filled Tonal | [FilledButton.tonal]    |
 /// | Outlined     | [OutlinedButton]        |
 /// | Text         | [TextButton]            |
 ///
@@ -132,9 +132,10 @@ import 'theme_data.dart';
 ///
 /// See also:
 ///
-///  * [TextButtonTheme], the theme for [TextButton]s.
 ///  * [ElevatedButtonTheme], the theme for [ElevatedButton]s.
+///  * [FilledButtonTheme], the theme for [FilledButton]s.
 ///  * [OutlinedButtonTheme], the theme for [OutlinedButton]s.
+///  * [TextButtonTheme], the theme for [TextButton]s.
 @immutable
 class ButtonStyle with Diagnosticable {
   /// Create a [ButtonStyle].

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

@@ -21,10 +21,13 @@ import 'theme_data.dart';
 /// Concrete subclasses must override [defaultStyleOf] and [themeStyleOf].
 ///
 /// See also:
-///
-///  * [TextButton], a simple ButtonStyleButton without a shadow.
-///  * [ElevatedButton], a filled ButtonStyleButton whose material elevates when pressed.
-///  * [OutlinedButton], similar to [TextButton], but with an outline.
+///  * [ElevatedButton], a filled button whose material elevates when pressed.
+///  * [FilledButton], a filled button that doesn't elevate when pressed.
+///  * [FilledButton.tonal], a filled button variant that uses a secondary fill color.
+///  * [OutlinedButton], a button with an outlined border and no fill color.
+///  * [TextButton], a button with no outline or fill color.
+///  * <https://m3.material.io/components/buttons/overview>, an overview of each of
+///    the Material Design button types and how they should be used in designs.
 abstract class ButtonStyleButton extends StatefulWidget {
   /// Abstract const constructor. This constructor enables subclasses to provide
   /// const constructors so that they can be used in const expressions.
@@ -191,9 +194,10 @@ abstract class ButtonStyleButton extends StatefulWidget {
 /// See also:
 ///
 ///  * [ButtonStyleButton], the [StatefulWidget] subclass for which this class is the [State].
-///  * [TextButton], a simple button without a shadow.
 ///  * [ElevatedButton], a filled button whose material elevates when pressed.
+///  * [FilledButton], a filled ButtonStyleButton that doesn't elevate when pressed.
 ///  * [OutlinedButton], similar to [TextButton], but with an outline.
+///  * [TextButton], a simple button without a shadow.
 class _ButtonStyleState extends State<ButtonStyleButton> with TickerProviderStateMixin {
   AnimationController? controller;
   double? elevation;

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

@@ -48,9 +48,10 @@ enum ButtonBarLayoutBehavior {
 /// This class is planned to be deprecated in a future release.
 /// Please use one or more of these buttons and associated themes instead:
 ///
-///  * [TextButton], [TextButtonTheme], [TextButtonThemeData],
 ///  * [ElevatedButton], [ElevatedButtonTheme], [ElevatedButtonThemeData],
+///  * [FilledButton], [FilledButtonTheme], [FilledButtonThemeData],
 ///  * [OutlinedButton], [OutlinedButtonTheme], [OutlinedButtonThemeData]
+///  * [TextButton], [TextButtonTheme], [TextButtonThemeData],
 ///
 /// A button theme can be specified as part of the overall Material theme
 /// using [ThemeData.buttonTheme]. The Material theme's button theme data

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

@@ -54,8 +54,10 @@ import 'theme_data.dart';
 ///
 /// See also:
 ///
-///  * [TextButton], a simple flat button without a shadow.
-///  * [OutlinedButton], a [TextButton] with a border outline.
+///  * [FilledButton], a filled button that doesn't elevate when pressed.
+///  * [FilledButton.tonal], a filled button variant that uses a secondary fill color.
+///  * [OutlinedButton], a button with an outlined border and no fill color.
+///  * [TextButton], a button with no outline or fill color.
 ///  * <https://material.io/design/components/buttons.html>
 ///  * <https://m3.material.io/components/buttons>
 class ElevatedButton extends ButtonStyleButton {