Add FAB Additional Color Mappings example (#133453)

fixes [Additional color mappings for FAB in Material 3](https://github.com/flutter/flutter/issues/130702)

### Preview
![image](https://github.com/flutter/flutter/assets/48603081/a6f9aef6-af80-41ce-8e59-50f095db047d)

examples/api/lib/material/floating_action_button/floating_action_button.1.dart

@@ -14,14 +14,14 @@ class FloatingActionButtonExampleApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
-      theme: ThemeData(colorSchemeSeed: const Color(0xff6750a4), useMaterial3: true),
-      home: const FabExample(),
+      theme: ThemeData(useMaterial3: true),
+      home: const FloatingActionButtonExample(),
     );
   }
 }
 
-class FabExample extends StatelessWidget {
-  const FabExample({super.key});
+class FloatingActionButtonExample extends StatelessWidget {
+  const FloatingActionButtonExample({super.key});
 
   @override
   Widget build(BuildContext context) {

examples/api/lib/material/floating_action_button/floating_action_button.2.dart

+// 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 'package:flutter/material.dart';
+
+/// Flutter code sample for [FloatingActionButton].
+
+void main() => runApp(const FloatingActionButtonExampleApp());
+
+class FloatingActionButtonExampleApp extends StatelessWidget {
+  const FloatingActionButtonExampleApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      theme: ThemeData(useMaterial3: true),
+      home: const FloatingActionButtonExample(),
+    );
+  }
+}
+
+class FloatingActionButtonExample extends StatelessWidget {
+  const FloatingActionButtonExample({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final ColorScheme colorScheme = Theme.of(context).colorScheme;
+
+    Widget titleBox(String title) {
+      return DecoratedBox(
+        decoration: BoxDecoration(
+          color: colorScheme.inverseSurface,
+          borderRadius: BorderRadius.circular(4),
+        ),
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+          child: Text(title, style: TextStyle(color: colorScheme.onInverseSurface)),
+        ),
+      );
+    }
+
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('FAB Additional Color Mappings'),
+      ),
+      body: Center(
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          children: <Widget>[
+            // Surface color mapping.
+            Column(
+              mainAxisSize: MainAxisSize.min,
+              children: <Widget>[
+                FloatingActionButton.large(
+                  foregroundColor: colorScheme.primary,
+                  backgroundColor: colorScheme.surface,
+                  onPressed: () {
+                    // Add your onPressed code here!
+                  },
+                  child: const Icon(Icons.edit_outlined),
+                ),
+                const SizedBox(height: 20),
+                titleBox('Surface'),
+              ],
+            ),
+            // Secondary color mapping.
+            Column(
+              mainAxisSize: MainAxisSize.min,
+              children: <Widget>[
+                FloatingActionButton.large(
+                  foregroundColor: colorScheme.onSecondaryContainer,
+                  backgroundColor: colorScheme.secondaryContainer,
+                  onPressed: () {
+                    // Add your onPressed code here!
+                  },
+                  child: const Icon(Icons.edit_outlined),
+                ),
+                const SizedBox(height: 20),
+                titleBox('Secondary'),
+              ],
+            ),
+            // Tertiary color mapping.
+            Column(
+              mainAxisSize: MainAxisSize.min,
+              children: <Widget>[
+                FloatingActionButton.large(
+                  foregroundColor: colorScheme.onTertiaryContainer,
+                  backgroundColor: colorScheme.tertiaryContainer,
+                  onPressed: () {
+                    // Add your onPressed code here!
+                  },
+                  child: const Icon(Icons.edit_outlined),
+                ),
+                const SizedBox(height: 20),
+                titleBox('Tertiary'),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

examples/api/test/material/floating_action_button/floating_action_button.1_test.dart

@@ -17,7 +17,7 @@ void main() {
       const example.FloatingActionButtonExampleApp(),
     );
 
-    final ThemeData theme = ThemeData(colorSchemeSeed: const Color(0xff6750a4), useMaterial3: true);
+    final ThemeData theme = ThemeData(useMaterial3: true);
 
     expect(find.byType(FloatingActionButton), findsNWidgets(4));
     expect(find.byIcon(Icons.add), findsNWidgets(4));

examples/api/test/material/floating_action_button/floating_action_button.2_test.dart

+// 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 'package:flutter/material.dart';
+import 'package:flutter_api_samples/material/floating_action_button/floating_action_button.2.dart'
+    as example;
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  testWidgets('FloatingActionButton variants', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const example.FloatingActionButtonExampleApp(),
+    );
+
+    FloatingActionButton getFAB(Finder finder) {
+      return tester.widget<FloatingActionButton>(finder);
+    }
+
+    final ColorScheme colorScheme = ThemeData(useMaterial3: true).colorScheme;
+
+    // Test the FAB with surface color mapping.
+    FloatingActionButton fab = getFAB(find.byType(FloatingActionButton).at(0));
+    expect(fab.foregroundColor, colorScheme.primary);
+    expect(fab.backgroundColor, colorScheme.surface);
+
+    // Test the FAB with secondary color mapping.
+    fab = getFAB(find.byType(FloatingActionButton).at(1));
+    expect(fab.foregroundColor, colorScheme.onSecondaryContainer);
+    expect(fab.backgroundColor, colorScheme.secondaryContainer);
+
+    // Test the FAB with tertiary color mapping.
+    fab = getFAB(find.byType(FloatingActionButton).at(2));
+    expect(fab.foregroundColor, colorScheme.onTertiaryContainer);
+    expect(fab.backgroundColor, colorScheme.tertiaryContainer);
+  });
+}

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

@@ -67,6 +67,13 @@ enum _FloatingActionButtonType {
 /// ** See code in examples/api/lib/material/floating_action_button/floating_action_button.1.dart **
 /// {@end-tool}
 ///
+/// {@tool dartpad}
+/// This sample shows [FloatingActionButton] with additional color mappings as
+/// described in: https://m3.material.io/components/floating-action-button/overview.
+///
+/// ** See code in examples/api/lib/material/floating_action_button/floating_action_button.2.dart **
+/// {@end-tool}
+///
 /// See also:
 ///
 ///  * [Scaffold], in which floating action buttons typically live.