firka/flutter
firka/flutter
5
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add FAB Additional Color Mappings example (#133453)

Browse Source 
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)
This commit is contained in:
Taha Tesser 2023-08-29 20:31:02 +03:00 committed by GitHub
parent f6c20db64b
commit d8d7e019c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 153 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
examples/api/lib/material/floating_action_button/floating_action_button.1.dart
View File

@ -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) {

104
examples/api/lib/material/floating_action_button/floating_action_button.2.dart Normal file
View File

@ -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: <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'),
],
),
],
),
),
);
}
}

2
examples/api/test/material/floating_action_button/floating_action_button.1_test.dart
View File

@ -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));

37
examples/api/test/material/floating_action_button/floating_action_button.2_test.dart Normal file
View File

@ -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<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);
});
}

7
packages/flutter/lib/src/material/floating_action_button.dart
View File

@ -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.