Unverified Commit d8d7e019 authored by Taha Tesser's avatar Taha Tesser Committed by GitHub

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)
parent f6c20db6
...@@ -14,14 +14,14 @@ class FloatingActionButtonExampleApp extends StatelessWidget { ...@@ -14,14 +14,14 @@ class FloatingActionButtonExampleApp extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return MaterialApp( return MaterialApp(
theme: ThemeData(colorSchemeSeed: const Color(0xff6750a4), useMaterial3: true), theme: ThemeData(useMaterial3: true),
home: const FabExample(), home: const FloatingActionButtonExample(),
); );
} }
} }
class FabExample extends StatelessWidget { class FloatingActionButtonExample extends StatelessWidget {
const FabExample({super.key}); const FloatingActionButtonExample({super.key});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
......
// 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'),
],
),
],
),
),
);
}
}
...@@ -17,7 +17,7 @@ void main() { ...@@ -17,7 +17,7 @@ void main() {
const example.FloatingActionButtonExampleApp(), 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.byType(FloatingActionButton), findsNWidgets(4));
expect(find.byIcon(Icons.add), findsNWidgets(4)); expect(find.byIcon(Icons.add), findsNWidgets(4));
......
// 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);
});
}
...@@ -67,6 +67,13 @@ enum _FloatingActionButtonType { ...@@ -67,6 +67,13 @@ enum _FloatingActionButtonType {
/// ** See code in examples/api/lib/material/floating_action_button/floating_action_button.1.dart ** /// ** See code in examples/api/lib/material/floating_action_button/floating_action_button.1.dart **
/// {@end-tool} /// {@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: /// See also:
/// ///
/// * [Scaffold], in which floating action buttons typically live. /// * [Scaffold], in which floating action buttons typically live.
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment