diff --git a/examples/api/lib/material/floating_action_button/floating_action_button.1.dart b/examples/api/lib/material/floating_action_button/floating_action_button.1.dart index 9650247a25..3aef595986 100644 --- a/examples/api/lib/material/floating_action_button/floating_action_button.1.dart +++ b/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) { diff --git a/examples/api/lib/material/floating_action_button/floating_action_button.2.dart b/examples/api/lib/material/floating_action_button/floating_action_button.2.dart new file mode 100644 index 0000000000..dda2e9b6db --- /dev/null +++ b/examples/api/lib/material/floating_action_button/floating_action_button.2.dart @@ -0,0 +1,104 @@ +// 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: [ + // Surface color mapping. + Column( + mainAxisSize: MainAxisSize.min, + children: [ + 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: [ + 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: [ + 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'), + ], + ), + ], + ), + ), + ); + } +} diff --git a/examples/api/test/material/floating_action_button/floating_action_button.1_test.dart b/examples/api/test/material/floating_action_button/floating_action_button.1_test.dart index d618defc16..d503e5df27 100644 --- a/examples/api/test/material/floating_action_button/floating_action_button.1_test.dart +++ b/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)); diff --git a/examples/api/test/material/floating_action_button/floating_action_button.2_test.dart b/examples/api/test/material/floating_action_button/floating_action_button.2_test.dart new file mode 100644 index 0000000000..1d4e9a2623 --- /dev/null +++ b/examples/api/test/material/floating_action_button/floating_action_button.2_test.dart @@ -0,0 +1,37 @@ +// 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(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); + }); +} diff --git a/packages/flutter/lib/src/material/floating_action_button.dart b/packages/flutter/lib/src/material/floating_action_button.dart index e0f11dc604..ab37361f38 100644 --- a/packages/flutter/lib/src/material/floating_action_button.dart +++ b/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.