Unverified Commit 5454bab6 authored by Darren Austin's avatar Darren Austin Committed by GitHub

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

parent e6ed4c46
...@@ -103,6 +103,8 @@ Future<void> main(List<String> args) async { ...@@ -103,6 +103,8 @@ Future<void> main(List<String> args) async {
AppBarTemplate('AppBar', '$materialLib/app_bar.dart', tokens).updateFile(); AppBarTemplate('AppBar', '$materialLib/app_bar.dart', tokens).updateFile();
ButtonTemplate('md.comp.elevated-button', 'ElevatedButton', '$materialLib/elevated_button.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.outlined-button', 'OutlinedButton', '$materialLib/outlined_button.dart', tokens).updateFile();
ButtonTemplate('md.comp.text-button', 'TextButton', '$materialLib/text_button.dart', tokens).updateFile(); ButtonTemplate('md.comp.text-button', 'TextButton', '$materialLib/text_button.dart', tokens).updateFile();
CardTemplate('Card', '$materialLib/card.dart', tokens).updateFile(); CardTemplate('Card', '$materialLib/card.dart', tokens).updateFile();
......
...@@ -58,31 +58,9 @@ class ButtonTypesGroup extends StatelessWidget { ...@@ -58,31 +58,9 @@ class ButtonTypesGroup extends StatelessWidget {
mainAxisAlignment: MainAxisAlignment.spaceEvenly, mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[ children: <Widget>[
ElevatedButton(onPressed: onPressed, child: const Text('Elevated')), ElevatedButton(onPressed: onPressed, child: const Text('Elevated')),
FilledButton(onPressed: onPressed, child: const Text('Filled')),
// Use an ElevatedButton with specific style to implement the FilledButton.tonal(onPressed: onPressed, child: const Text('Filled Tonal')),
// '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'),
),
OutlinedButton(onPressed: onPressed, child: const Text('Outlined')), OutlinedButton(onPressed: onPressed, child: const Text('Outlined')),
TextButton(onPressed: onPressed, child: const Text('Text')), TextButton(onPressed: onPressed, child: const Text('Text')),
], ],
), ),
......
// 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'),
),
])
],
),
),
),
);
}
}
...@@ -80,6 +80,8 @@ export 'src/material/expansion_panel.dart'; ...@@ -80,6 +80,8 @@ export 'src/material/expansion_panel.dart';
export 'src/material/expansion_tile.dart'; export 'src/material/expansion_tile.dart';
export 'src/material/expansion_tile_theme.dart'; export 'src/material/expansion_tile_theme.dart';
export 'src/material/feedback.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/filter_chip.dart';
export 'src/material/flexible_space_bar.dart'; export 'src/material/flexible_space_bar.dart';
export 'src/material/floating_action_button.dart'; export 'src/material/floating_action_button.dart';
......
...@@ -26,14 +26,16 @@ import 'theme_data.dart'; ...@@ -26,14 +26,16 @@ import 'theme_data.dart';
/// from the themes or from app-specific sources. /// from the themes or from app-specific sources.
/// ///
/// This class is planned to be deprecated in a future release, see /// This class is planned to be deprecated in a future release, see
/// [ButtonStyleButton], the base class of [TextButton], [ElevatedButton], and /// [ButtonStyleButton], the base class of [ElevatedButton], [FilledButton],
/// [OutlinedButton]. /// [OutlinedButton] and [TextButton].
/// ///
/// See also: /// See also:
/// ///
/// * [TextButton], a simple flat button without a shadow.
/// * [ElevatedButton], a filled button whose material elevates when pressed. /// * [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']) @Category(<String>['Material', 'Button'])
class RawMaterialButton extends StatefulWidget { class RawMaterialButton extends StatefulWidget {
/// Create a button based on [Semantics], [Material], and [InkWell] widgets. /// Create a button based on [Semantics], [Material], and [InkWell] widgets.
......
...@@ -78,8 +78,8 @@ import 'theme_data.dart'; ...@@ -78,8 +78,8 @@ import 'theme_data.dart';
/// useful to make relatively sweeping changes based on a few initial /// useful to make relatively sweeping changes based on a few initial
/// parameters with simple values. The button styleFrom() methods /// parameters with simple values. The button styleFrom() methods
/// enable such sweeping changes. See for example: /// enable such sweeping changes. See for example:
/// [TextButton.styleFrom], [ElevatedButton.styleFrom], /// [ElevatedButton.styleFrom], [FilledButton.styleFrom],
/// [OutlinedButton.styleFrom]. /// [OutlinedButton.styleFrom], [TextButton.styleFrom].
/// ///
/// For example, to override the default text and icon colors for a /// For example, to override the default text and icon colors for a
/// [TextButton], as well as its overlay color, with all of the /// [TextButton], as well as its overlay color, with all of the
...@@ -119,8 +119,8 @@ import 'theme_data.dart'; ...@@ -119,8 +119,8 @@ import 'theme_data.dart';
/// | Type | Flutter implementation | /// | Type | Flutter implementation |
/// | :----------- | :---------------------- | /// | :----------- | :---------------------- |
/// | Elevated | [ElevatedButton] | /// | Elevated | [ElevatedButton] |
/// | Filled | Styled [ElevatedButton] | /// | Filled | [FilledButton] |
/// | Filled Tonal | Styled [ElevatedButton] | /// | Filled Tonal | [FilledButton.tonal] |
/// | Outlined | [OutlinedButton] | /// | Outlined | [OutlinedButton] |
/// | Text | [TextButton] | /// | Text | [TextButton] |
/// ///
...@@ -132,9 +132,10 @@ import 'theme_data.dart'; ...@@ -132,9 +132,10 @@ import 'theme_data.dart';
/// ///
/// See also: /// See also:
/// ///
/// * [TextButtonTheme], the theme for [TextButton]s.
/// * [ElevatedButtonTheme], the theme for [ElevatedButton]s. /// * [ElevatedButtonTheme], the theme for [ElevatedButton]s.
/// * [FilledButtonTheme], the theme for [FilledButton]s.
/// * [OutlinedButtonTheme], the theme for [OutlinedButton]s. /// * [OutlinedButtonTheme], the theme for [OutlinedButton]s.
/// * [TextButtonTheme], the theme for [TextButton]s.
@immutable @immutable
class ButtonStyle with Diagnosticable { class ButtonStyle with Diagnosticable {
/// Create a [ButtonStyle]. /// Create a [ButtonStyle].
......
...@@ -21,10 +21,13 @@ import 'theme_data.dart'; ...@@ -21,10 +21,13 @@ import 'theme_data.dart';
/// Concrete subclasses must override [defaultStyleOf] and [themeStyleOf]. /// Concrete subclasses must override [defaultStyleOf] and [themeStyleOf].
/// ///
/// See also: /// See also:
/// /// * [ElevatedButton], a filled button whose material elevates when pressed.
/// * [TextButton], a simple ButtonStyleButton without a shadow. /// * [FilledButton], a filled button that doesn't elevate when pressed.
/// * [ElevatedButton], a filled ButtonStyleButton whose material elevates when pressed. /// * [FilledButton.tonal], a filled button variant that uses a secondary fill color.
/// * [OutlinedButton], similar to [TextButton], but with an outline. /// * [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 class ButtonStyleButton extends StatefulWidget {
/// Abstract const constructor. This constructor enables subclasses to provide /// Abstract const constructor. This constructor enables subclasses to provide
/// const constructors so that they can be used in const expressions. /// const constructors so that they can be used in const expressions.
...@@ -191,9 +194,10 @@ abstract class ButtonStyleButton extends StatefulWidget { ...@@ -191,9 +194,10 @@ abstract class ButtonStyleButton extends StatefulWidget {
/// See also: /// See also:
/// ///
/// * [ButtonStyleButton], the [StatefulWidget] subclass for which this class is the [State]. /// * [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. /// * [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. /// * [OutlinedButton], similar to [TextButton], but with an outline.
/// * [TextButton], a simple button without a shadow.
class _ButtonStyleState extends State<ButtonStyleButton> with TickerProviderStateMixin { class _ButtonStyleState extends State<ButtonStyleButton> with TickerProviderStateMixin {
AnimationController? controller; AnimationController? controller;
double? elevation; double? elevation;
......
...@@ -48,9 +48,10 @@ enum ButtonBarLayoutBehavior { ...@@ -48,9 +48,10 @@ enum ButtonBarLayoutBehavior {
/// This class is planned to be deprecated in a future release. /// This class is planned to be deprecated in a future release.
/// Please use one or more of these buttons and associated themes instead: /// Please use one or more of these buttons and associated themes instead:
/// ///
/// * [TextButton], [TextButtonTheme], [TextButtonThemeData],
/// * [ElevatedButton], [ElevatedButtonTheme], [ElevatedButtonThemeData], /// * [ElevatedButton], [ElevatedButtonTheme], [ElevatedButtonThemeData],
/// * [FilledButton], [FilledButtonTheme], [FilledButtonThemeData],
/// * [OutlinedButton], [OutlinedButtonTheme], [OutlinedButtonThemeData] /// * [OutlinedButton], [OutlinedButtonTheme], [OutlinedButtonThemeData]
/// * [TextButton], [TextButtonTheme], [TextButtonThemeData],
/// ///
/// A button theme can be specified as part of the overall Material theme /// A button theme can be specified as part of the overall Material theme
/// using [ThemeData.buttonTheme]. The Material theme's button theme data /// using [ThemeData.buttonTheme]. The Material theme's button theme data
......
...@@ -54,8 +54,10 @@ import 'theme_data.dart'; ...@@ -54,8 +54,10 @@ import 'theme_data.dart';
/// ///
/// See also: /// See also:
/// ///
/// * [TextButton], a simple flat button without a shadow. /// * [FilledButton], a filled button that doesn't elevate when pressed.
/// * [OutlinedButton], a [TextButton] with a border outline. /// * [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://material.io/design/components/buttons.html>
/// * <https://m3.material.io/components/buttons> /// * <https://m3.material.io/components/buttons>
class ElevatedButton extends ButtonStyleButton { class ElevatedButton extends ButtonStyleButton {
......
This diff is collapsed.
// 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/foundation.dart';
import 'package:flutter/widgets.dart';
import 'button_style.dart';
import 'theme.dart';
// Examples can assume:
// late BuildContext context;
/// A [ButtonStyle] that overrides the default appearance of
/// [FilledButton]s when it's used with [FilledButtonTheme] or with the
/// overall [Theme]'s [ThemeData.filledButtonTheme].
///
/// The [style]'s properties override [FilledButton]'s default style,
/// i.e. the [ButtonStyle] returned by [FilledButton.defaultStyleOf]. Only
/// the style's non-null property values or resolved non-null
/// [MaterialStateProperty] values are used.
///
/// See also:
///
/// * [FilledButtonTheme], the theme which is configured with this class.
/// * [FilledButton.defaultStyleOf], which returns the default [ButtonStyle]
/// for text buttons.
/// * [FilledButton.styleFrom], which converts simple values into a
/// [ButtonStyle] that's consistent with [FilledButton]'s defaults.
/// * [MaterialStateProperty.resolve], "resolve" a material state property
/// to a simple value based on a set of [MaterialState]s.
/// * [ThemeData.filledButtonTheme], which can be used to override the default
/// [ButtonStyle] for [FilledButton]s below the overall [Theme].
@immutable
class FilledButtonThemeData with Diagnosticable {
/// Creates an [FilledButtonThemeData].
///
/// The [style] may be null.
const FilledButtonThemeData({ this.style });
/// Overrides for [FilledButton]'s default style.
///
/// Non-null properties or non-null resolved [MaterialStateProperty]
/// values override the [ButtonStyle] returned by
/// [FilledButton.defaultStyleOf].
///
/// If [style] is null, then this theme doesn't override anything.
final ButtonStyle? style;
/// Linearly interpolate between two filled button themes.
static FilledButtonThemeData? lerp(FilledButtonThemeData? a, FilledButtonThemeData? b, double t) {
assert (t != null);
if (a == null && b == null) {
return null;
}
return FilledButtonThemeData(
style: ButtonStyle.lerp(a?.style, b?.style, t),
);
}
@override
int get hashCode => style.hashCode;
@override
bool operator ==(Object other) {
if (identical(this, other)) {
return true;
}
if (other.runtimeType != runtimeType) {
return false;
}
return other is FilledButtonThemeData && other.style == style;
}
@override
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
super.debugFillProperties(properties);
properties.add(DiagnosticsProperty<ButtonStyle>('style', style, defaultValue: null));
}
}
/// Overrides the default [ButtonStyle] of its [FilledButton] descendants.
///
/// See also:
///
/// * [FilledButtonThemeData], which is used to configure this theme.
/// * [FilledButton.defaultStyleOf], which returns the default [ButtonStyle]
/// for filled buttons.
/// * [FilledButton.styleFrom], which converts simple values into a
/// [ButtonStyle] that's consistent with [FilledButton]'s defaults.
/// * [ThemeData.filledButtonTheme], which can be used to override the default
/// [ButtonStyle] for [FilledButton]s below the overall [Theme].
class FilledButtonTheme extends InheritedTheme {
/// Create a [FilledButtonTheme].
///
/// The [data] parameter must not be null.
const FilledButtonTheme({
super.key,
required this.data,
required super.child,
}) : assert(data != null);
/// The configuration of this theme.
final FilledButtonThemeData data;
/// The closest instance of this class that encloses the given context.
///
/// If there is no enclosing [FilledButtonTheme] widget, then
/// [ThemeData.filledButtonTheme] is used.
///
/// Typical usage is as follows:
///
/// ```dart
/// FilledButtonThemeData theme = FilledButtonTheme.of(context);
/// ```
static FilledButtonThemeData of(BuildContext context) {
final FilledButtonTheme? buttonTheme = context.dependOnInheritedWidgetOfExactType<FilledButtonTheme>();
return buttonTheme?.data ?? Theme.of(context).filledButtonTheme;
}
@override
Widget wrap(BuildContext context, Widget child) {
return FilledButtonTheme(data: data, child: child);
}
@override
bool updateShouldNotify(FilledButtonTheme oldWidget) => data != oldWidget.data;
}
...@@ -59,8 +59,10 @@ import 'theme_data.dart'; ...@@ -59,8 +59,10 @@ import 'theme_data.dart';
/// ///
/// See also: /// See also:
/// ///
/// * [ElevatedButton], a filled Material Design button with a shadow. /// * [ElevatedButton], a filled button whose material elevates when pressed.
/// * [TextButton], a Material Design button without a shadow. /// * [FilledButton], a filled button that doesn't elevate when pressed.
/// * [FilledButton.tonal], a filled button variant that uses a secondary fill color.
/// * [TextButton], a button with no outline or fill color.
/// * <https://material.io/design/components/buttons.html> /// * <https://material.io/design/components/buttons.html>
/// * <https://m3.material.io/components/buttons> /// * <https://m3.material.io/components/buttons>
class OutlinedButton extends ButtonStyleButton { class OutlinedButton extends ButtonStyleButton {
......
...@@ -66,8 +66,10 @@ import 'theme_data.dart'; ...@@ -66,8 +66,10 @@ import 'theme_data.dart';
/// ///
/// See also: /// See also:
/// ///
/// * [OutlinedButton], a [TextButton] with a border outline.
/// * [ElevatedButton], a filled button whose material elevates when pressed. /// * [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.
/// * <https://material.io/design/components/buttons.html> /// * <https://material.io/design/components/buttons.html>
/// * <https://m3.material.io/components/buttons> /// * <https://m3.material.io/components/buttons>
class TextButton extends ButtonStyleButton { class TextButton extends ButtonStyleButton {
......
...@@ -26,6 +26,7 @@ import 'divider_theme.dart'; ...@@ -26,6 +26,7 @@ import 'divider_theme.dart';
import 'drawer_theme.dart'; import 'drawer_theme.dart';
import 'elevated_button_theme.dart'; import 'elevated_button_theme.dart';
import 'expansion_tile_theme.dart'; import 'expansion_tile_theme.dart';
import 'filled_button_theme.dart';
import 'floating_action_button_theme.dart'; import 'floating_action_button_theme.dart';
import 'icon_button_theme.dart'; import 'icon_button_theme.dart';
import 'ink_ripple.dart'; import 'ink_ripple.dart';
...@@ -343,6 +344,7 @@ class ThemeData with Diagnosticable { ...@@ -343,6 +344,7 @@ class ThemeData with Diagnosticable {
DrawerThemeData? drawerTheme, DrawerThemeData? drawerTheme,
ElevatedButtonThemeData? elevatedButtonTheme, ElevatedButtonThemeData? elevatedButtonTheme,
ExpansionTileThemeData? expansionTileTheme, ExpansionTileThemeData? expansionTileTheme,
FilledButtonThemeData? filledButtonTheme,
FloatingActionButtonThemeData? floatingActionButtonTheme, FloatingActionButtonThemeData? floatingActionButtonTheme,
IconButtonThemeData? iconButtonTheme, IconButtonThemeData? iconButtonTheme,
ListTileThemeData? listTileTheme, ListTileThemeData? listTileTheme,
...@@ -564,6 +566,7 @@ class ThemeData with Diagnosticable { ...@@ -564,6 +566,7 @@ class ThemeData with Diagnosticable {
dividerTheme ??= const DividerThemeData(); dividerTheme ??= const DividerThemeData();
drawerTheme ??= const DrawerThemeData(); drawerTheme ??= const DrawerThemeData();
elevatedButtonTheme ??= const ElevatedButtonThemeData(); elevatedButtonTheme ??= const ElevatedButtonThemeData();
filledButtonTheme ??= const FilledButtonThemeData();
floatingActionButtonTheme ??= const FloatingActionButtonThemeData(); floatingActionButtonTheme ??= const FloatingActionButtonThemeData();
iconButtonTheme ??= const IconButtonThemeData(); iconButtonTheme ??= const IconButtonThemeData();
listTileTheme ??= const ListTileThemeData(); listTileTheme ??= const ListTileThemeData();
...@@ -655,6 +658,7 @@ class ThemeData with Diagnosticable { ...@@ -655,6 +658,7 @@ class ThemeData with Diagnosticable {
drawerTheme: drawerTheme, drawerTheme: drawerTheme,
elevatedButtonTheme: elevatedButtonTheme, elevatedButtonTheme: elevatedButtonTheme,
expansionTileTheme: expansionTileTheme, expansionTileTheme: expansionTileTheme,
filledButtonTheme: filledButtonTheme,
floatingActionButtonTheme: floatingActionButtonTheme, floatingActionButtonTheme: floatingActionButtonTheme,
iconButtonTheme: iconButtonTheme, iconButtonTheme: iconButtonTheme,
listTileTheme: listTileTheme, listTileTheme: listTileTheme,
...@@ -761,6 +765,7 @@ class ThemeData with Diagnosticable { ...@@ -761,6 +765,7 @@ class ThemeData with Diagnosticable {
required this.drawerTheme, required this.drawerTheme,
required this.elevatedButtonTheme, required this.elevatedButtonTheme,
required this.expansionTileTheme, required this.expansionTileTheme,
required this.filledButtonTheme,
required this.floatingActionButtonTheme, required this.floatingActionButtonTheme,
required this.iconButtonTheme, required this.iconButtonTheme,
required this.listTileTheme, required this.listTileTheme,
...@@ -909,6 +914,7 @@ class ThemeData with Diagnosticable { ...@@ -909,6 +914,7 @@ class ThemeData with Diagnosticable {
assert(drawerTheme != null), assert(drawerTheme != null),
assert(elevatedButtonTheme != null), assert(elevatedButtonTheme != null),
assert(expansionTileTheme != null), assert(expansionTileTheme != null),
assert(filledButtonTheme != null),
assert(floatingActionButtonTheme != null), assert(floatingActionButtonTheme != null),
assert(iconButtonTheme != null), assert(iconButtonTheme != null),
assert(listTileTheme != null), assert(listTileTheme != null),
...@@ -1211,7 +1217,7 @@ class ThemeData with Diagnosticable { ...@@ -1211,7 +1217,7 @@ class ThemeData with Diagnosticable {
/// * Typography: `typography` (see table above) /// * Typography: `typography` (see table above)
/// ///
/// ### Components /// ### Components
/// * Common buttons: [TextButton], [OutlinedButton], [ElevatedButton] /// * Common buttons: [ElevatedButton], [FilledButton], [OutlinedButton], [TextButton]
/// * FAB: [FloatingActionButton] /// * FAB: [FloatingActionButton]
/// * Extended FAB: [FloatingActionButton.extended] /// * Extended FAB: [FloatingActionButton.extended]
/// * Cards: [Card] /// * Cards: [Card]
...@@ -1464,6 +1470,10 @@ class ThemeData with Diagnosticable { ...@@ -1464,6 +1470,10 @@ class ThemeData with Diagnosticable {
/// A theme for customizing the visual properties of [ExpansionTile]s. /// A theme for customizing the visual properties of [ExpansionTile]s.
final ExpansionTileThemeData expansionTileTheme; final ExpansionTileThemeData expansionTileTheme;
/// A theme for customizing the appearance and internal layout of
/// [FilledButton]s.
final FilledButtonThemeData filledButtonTheme;
/// A theme for customizing the shape, elevation, and color of a /// A theme for customizing the shape, elevation, and color of a
/// [FloatingActionButton]. /// [FloatingActionButton].
final FloatingActionButtonThemeData floatingActionButtonTheme; final FloatingActionButtonThemeData floatingActionButtonTheme;
...@@ -1739,6 +1749,7 @@ class ThemeData with Diagnosticable { ...@@ -1739,6 +1749,7 @@ class ThemeData with Diagnosticable {
DrawerThemeData? drawerTheme, DrawerThemeData? drawerTheme,
ElevatedButtonThemeData? elevatedButtonTheme, ElevatedButtonThemeData? elevatedButtonTheme,
ExpansionTileThemeData? expansionTileTheme, ExpansionTileThemeData? expansionTileTheme,
FilledButtonThemeData? filledButtonTheme,
FloatingActionButtonThemeData? floatingActionButtonTheme, FloatingActionButtonThemeData? floatingActionButtonTheme,
IconButtonThemeData? iconButtonTheme, IconButtonThemeData? iconButtonTheme,
ListTileThemeData? listTileTheme, ListTileThemeData? listTileTheme,
...@@ -1884,6 +1895,7 @@ class ThemeData with Diagnosticable { ...@@ -1884,6 +1895,7 @@ class ThemeData with Diagnosticable {
drawerTheme: drawerTheme ?? this.drawerTheme, drawerTheme: drawerTheme ?? this.drawerTheme,
elevatedButtonTheme: elevatedButtonTheme ?? this.elevatedButtonTheme, elevatedButtonTheme: elevatedButtonTheme ?? this.elevatedButtonTheme,
expansionTileTheme: expansionTileTheme ?? this.expansionTileTheme, expansionTileTheme: expansionTileTheme ?? this.expansionTileTheme,
filledButtonTheme: filledButtonTheme ?? this.filledButtonTheme,
floatingActionButtonTheme: floatingActionButtonTheme ?? this.floatingActionButtonTheme, floatingActionButtonTheme: floatingActionButtonTheme ?? this.floatingActionButtonTheme,
iconButtonTheme: iconButtonTheme ?? this.iconButtonTheme, iconButtonTheme: iconButtonTheme ?? this.iconButtonTheme,
listTileTheme: listTileTheme ?? this.listTileTheme, listTileTheme: listTileTheme ?? this.listTileTheme,
...@@ -2083,6 +2095,7 @@ class ThemeData with Diagnosticable { ...@@ -2083,6 +2095,7 @@ class ThemeData with Diagnosticable {
drawerTheme: DrawerThemeData.lerp(a.drawerTheme, b.drawerTheme, t)!, drawerTheme: DrawerThemeData.lerp(a.drawerTheme, b.drawerTheme, t)!,
elevatedButtonTheme: ElevatedButtonThemeData.lerp(a.elevatedButtonTheme, b.elevatedButtonTheme, t)!, elevatedButtonTheme: ElevatedButtonThemeData.lerp(a.elevatedButtonTheme, b.elevatedButtonTheme, t)!,
expansionTileTheme: ExpansionTileThemeData.lerp(a.expansionTileTheme, b.expansionTileTheme, t)!, expansionTileTheme: ExpansionTileThemeData.lerp(a.expansionTileTheme, b.expansionTileTheme, t)!,
filledButtonTheme: FilledButtonThemeData.lerp(a.filledButtonTheme, b.filledButtonTheme, t)!,
floatingActionButtonTheme: FloatingActionButtonThemeData.lerp(a.floatingActionButtonTheme, b.floatingActionButtonTheme, t)!, floatingActionButtonTheme: FloatingActionButtonThemeData.lerp(a.floatingActionButtonTheme, b.floatingActionButtonTheme, t)!,
iconButtonTheme: IconButtonThemeData.lerp(a.iconButtonTheme, b.iconButtonTheme, t)!, iconButtonTheme: IconButtonThemeData.lerp(a.iconButtonTheme, b.iconButtonTheme, t)!,
listTileTheme: ListTileThemeData.lerp(a.listTileTheme, b.listTileTheme, t)!, listTileTheme: ListTileThemeData.lerp(a.listTileTheme, b.listTileTheme, t)!,
...@@ -2184,6 +2197,7 @@ class ThemeData with Diagnosticable { ...@@ -2184,6 +2197,7 @@ class ThemeData with Diagnosticable {
other.drawerTheme == drawerTheme && other.drawerTheme == drawerTheme &&
other.elevatedButtonTheme == elevatedButtonTheme && other.elevatedButtonTheme == elevatedButtonTheme &&
other.expansionTileTheme == expansionTileTheme && other.expansionTileTheme == expansionTileTheme &&
other.filledButtonTheme == filledButtonTheme &&
other.floatingActionButtonTheme == floatingActionButtonTheme && other.floatingActionButtonTheme == floatingActionButtonTheme &&
other.iconButtonTheme == iconButtonTheme && other.iconButtonTheme == iconButtonTheme &&
other.listTileTheme == listTileTheme && other.listTileTheme == listTileTheme &&
...@@ -2282,6 +2296,7 @@ class ThemeData with Diagnosticable { ...@@ -2282,6 +2296,7 @@ class ThemeData with Diagnosticable {
drawerTheme, drawerTheme,
elevatedButtonTheme, elevatedButtonTheme,
expansionTileTheme, expansionTileTheme,
filledButtonTheme,
floatingActionButtonTheme, floatingActionButtonTheme,
iconButtonTheme, iconButtonTheme,
listTileTheme, listTileTheme,
...@@ -2382,6 +2397,7 @@ class ThemeData with Diagnosticable { ...@@ -2382,6 +2397,7 @@ class ThemeData with Diagnosticable {
properties.add(DiagnosticsProperty<DrawerThemeData>('drawerTheme', drawerTheme, defaultValue: defaultData.drawerTheme, level: DiagnosticLevel.debug)); properties.add(DiagnosticsProperty<DrawerThemeData>('drawerTheme', drawerTheme, defaultValue: defaultData.drawerTheme, level: DiagnosticLevel.debug));
properties.add(DiagnosticsProperty<ElevatedButtonThemeData>('elevatedButtonTheme', elevatedButtonTheme, defaultValue: defaultData.elevatedButtonTheme, level: DiagnosticLevel.debug)); properties.add(DiagnosticsProperty<ElevatedButtonThemeData>('elevatedButtonTheme', elevatedButtonTheme, defaultValue: defaultData.elevatedButtonTheme, level: DiagnosticLevel.debug));
properties.add(DiagnosticsProperty<ExpansionTileThemeData>('expansionTileTheme', expansionTileTheme, level: DiagnosticLevel.debug)); properties.add(DiagnosticsProperty<ExpansionTileThemeData>('expansionTileTheme', expansionTileTheme, level: DiagnosticLevel.debug));
properties.add(DiagnosticsProperty<FilledButtonThemeData>('filledButtonTheme', filledButtonTheme, defaultValue: defaultData.filledButtonTheme, level: DiagnosticLevel.debug));
properties.add(DiagnosticsProperty<FloatingActionButtonThemeData>('floatingActionButtonTheme', floatingActionButtonTheme, defaultValue: defaultData.floatingActionButtonTheme, level: DiagnosticLevel.debug)); properties.add(DiagnosticsProperty<FloatingActionButtonThemeData>('floatingActionButtonTheme', floatingActionButtonTheme, defaultValue: defaultData.floatingActionButtonTheme, level: DiagnosticLevel.debug));
properties.add(DiagnosticsProperty<IconButtonThemeData>('iconButtonTheme', iconButtonTheme, defaultValue: defaultData.iconButtonTheme, level: DiagnosticLevel.debug)); properties.add(DiagnosticsProperty<IconButtonThemeData>('iconButtonTheme', iconButtonTheme, defaultValue: defaultData.iconButtonTheme, level: DiagnosticLevel.debug));
properties.add(DiagnosticsProperty<ListTileThemeData>('listTileTheme', listTileTheme, defaultValue: defaultData.listTileTheme, level: DiagnosticLevel.debug)); properties.add(DiagnosticsProperty<ListTileThemeData>('listTileTheme', listTileTheme, defaultValue: defaultData.listTileTheme, level: DiagnosticLevel.debug));
......
This diff is collapsed.
This diff is collapsed.
...@@ -695,6 +695,7 @@ void main() { ...@@ -695,6 +695,7 @@ void main() {
drawerTheme: const DrawerThemeData(), drawerTheme: const DrawerThemeData(),
elevatedButtonTheme: ElevatedButtonThemeData(style: ElevatedButton.styleFrom(backgroundColor: Colors.green)), elevatedButtonTheme: ElevatedButtonThemeData(style: ElevatedButton.styleFrom(backgroundColor: Colors.green)),
expansionTileTheme: const ExpansionTileThemeData(backgroundColor: Colors.black), expansionTileTheme: const ExpansionTileThemeData(backgroundColor: Colors.black),
filledButtonTheme: FilledButtonThemeData(style: FilledButton.styleFrom(foregroundColor: Colors.green)),
floatingActionButtonTheme: const FloatingActionButtonThemeData(backgroundColor: Colors.black), floatingActionButtonTheme: const FloatingActionButtonThemeData(backgroundColor: Colors.black),
iconButtonTheme: IconButtonThemeData(style: IconButton.styleFrom(foregroundColor: Colors.pink)), iconButtonTheme: IconButtonThemeData(style: IconButton.styleFrom(foregroundColor: Colors.pink)),
listTileTheme: const ListTileThemeData(), listTileTheme: const ListTileThemeData(),
...@@ -808,6 +809,7 @@ void main() { ...@@ -808,6 +809,7 @@ void main() {
drawerTheme: const DrawerThemeData(), drawerTheme: const DrawerThemeData(),
elevatedButtonTheme: const ElevatedButtonThemeData(), elevatedButtonTheme: const ElevatedButtonThemeData(),
expansionTileTheme: const ExpansionTileThemeData(backgroundColor: Colors.black), expansionTileTheme: const ExpansionTileThemeData(backgroundColor: Colors.black),
filledButtonTheme: const FilledButtonThemeData(),
floatingActionButtonTheme: const FloatingActionButtonThemeData(backgroundColor: Colors.white), floatingActionButtonTheme: const FloatingActionButtonThemeData(backgroundColor: Colors.white),
iconButtonTheme: const IconButtonThemeData(), iconButtonTheme: const IconButtonThemeData(),
listTileTheme: const ListTileThemeData(), listTileTheme: const ListTileThemeData(),
...@@ -907,6 +909,7 @@ void main() { ...@@ -907,6 +909,7 @@ void main() {
drawerTheme: otherTheme.drawerTheme, drawerTheme: otherTheme.drawerTheme,
elevatedButtonTheme: otherTheme.elevatedButtonTheme, elevatedButtonTheme: otherTheme.elevatedButtonTheme,
expansionTileTheme: otherTheme.expansionTileTheme, expansionTileTheme: otherTheme.expansionTileTheme,
filledButtonTheme: otherTheme.filledButtonTheme,
floatingActionButtonTheme: otherTheme.floatingActionButtonTheme, floatingActionButtonTheme: otherTheme.floatingActionButtonTheme,
iconButtonTheme: otherTheme.iconButtonTheme, iconButtonTheme: otherTheme.iconButtonTheme,
listTileTheme: otherTheme.listTileTheme, listTileTheme: otherTheme.listTileTheme,
...@@ -1005,6 +1008,7 @@ void main() { ...@@ -1005,6 +1008,7 @@ void main() {
expect(themeDataCopy.drawerTheme, equals(otherTheme.drawerTheme)); expect(themeDataCopy.drawerTheme, equals(otherTheme.drawerTheme));
expect(themeDataCopy.elevatedButtonTheme, equals(otherTheme.elevatedButtonTheme)); expect(themeDataCopy.elevatedButtonTheme, equals(otherTheme.elevatedButtonTheme));
expect(themeDataCopy.expansionTileTheme, equals(otherTheme.expansionTileTheme)); expect(themeDataCopy.expansionTileTheme, equals(otherTheme.expansionTileTheme));
expect(themeDataCopy.filledButtonTheme, equals(otherTheme.filledButtonTheme));
expect(themeDataCopy.floatingActionButtonTheme, equals(otherTheme.floatingActionButtonTheme)); expect(themeDataCopy.floatingActionButtonTheme, equals(otherTheme.floatingActionButtonTheme));
expect(themeDataCopy.iconButtonTheme, equals(otherTheme.iconButtonTheme)); expect(themeDataCopy.iconButtonTheme, equals(otherTheme.iconButtonTheme));
expect(themeDataCopy.listTileTheme, equals(otherTheme.listTileTheme)); expect(themeDataCopy.listTileTheme, equals(otherTheme.listTileTheme));
...@@ -1140,6 +1144,7 @@ void main() { ...@@ -1140,6 +1144,7 @@ void main() {
'dividerTheme', 'dividerTheme',
'drawerTheme', 'drawerTheme',
'elevatedButtonTheme', 'elevatedButtonTheme',
'filledButtonTheme',
'floatingActionButtonTheme', 'floatingActionButtonTheme',
'iconButtonTheme', 'iconButtonTheme',
'listTileTheme', 'listTileTheme',
......
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