Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Sign in
Toggle navigation
F
Front-End
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
abdullh.alsoleman
Front-End
Commits
5454bab6
Unverified
Commit
5454bab6
authored
Aug 25, 2022
by
Darren Austin
Committed by
GitHub
Aug 25, 2022
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Added support for M3 filled and filled tonal buttons. (#107382)
parent
e6ed4c46
Changes
17
Expand all
Show whitespace changes
Inline
Side-by-side
Showing
17 changed files
with
2993 additions
and
45 deletions
+2993
-45
gen_defaults.dart
dev/tools/gen_defaults/bin/gen_defaults.dart
+2
-0
button_style.0.dart
examples/api/lib/material/button_style/button_style.0.dart
+2
-24
filled_button.0.dart
examples/api/lib/material/filled_button/filled_button.0.dart
+61
-0
material.dart
packages/flutter/lib/material.dart
+2
-0
button.dart
packages/flutter/lib/src/material/button.dart
+6
-4
button_style.dart
packages/flutter/lib/src/material/button_style.dart
+6
-5
button_style_button.dart
packages/flutter/lib/src/material/button_style_button.dart
+9
-5
button_theme.dart
packages/flutter/lib/src/material/button_theme.dart
+2
-1
elevated_button.dart
packages/flutter/lib/src/material/elevated_button.dart
+4
-2
filled_button.dart
packages/flutter/lib/src/material/filled_button.dart
+737
-0
filled_button_theme.dart
packages/flutter/lib/src/material/filled_button_theme.dart
+128
-0
outlined_button.dart
packages/flutter/lib/src/material/outlined_button.dart
+4
-2
text_button.dart
packages/flutter/lib/src/material/text_button.dart
+3
-1
theme_data.dart
packages/flutter/lib/src/material/theme_data.dart
+17
-1
filled_button_test.dart
packages/flutter/test/material/filled_button_test.dart
+1752
-0
filled_button_theme_test.dart
packages/flutter/test/material/filled_button_theme_test.dart
+253
-0
theme_data_test.dart
packages/flutter/test/material/theme_data_test.dart
+5
-0
No files found.
dev/tools/gen_defaults/bin/gen_defaults.dart
View file @
5454bab6
...
@@ -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
();
...
...
examples/api/lib/material/button_style/button_style.0.dart
View file @
5454bab6
...
@@ -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'
)),
],
],
),
),
...
...
examples/api/lib/material/filled_button/filled_button.0.dart
0 → 100644
View file @
5454bab6
// 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'
),
),
])
],
),
),
),
);
}
}
packages/flutter/lib/material.dart
View file @
5454bab6
...
@@ -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'
;
...
...
packages/flutter/lib/src/material/button.dart
View file @
5454bab6
...
@@ -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.
...
...
packages/flutter/lib/src/material/button_style.dart
View file @
5454bab6
...
@@ -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], [Elevat
edButton.styleFrom],
/// [
ElevatedButton.styleFrom], [Fill
edButton.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].
...
...
packages/flutter/lib/src/material/button_style_button.dart
View file @
5454bab6
...
@@ -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
;
...
...
packages/flutter/lib/src/material/button_theme.dart
View file @
5454bab6
...
@@ -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
...
...
packages/flutter/lib/src/material/elevated_button.dart
View file @
5454bab6
...
@@ -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
{
...
...
packages/flutter/lib/src/material/filled_button.dart
0 → 100644
View file @
5454bab6
This diff is collapsed.
Click to expand it.
packages/flutter/lib/src/material/filled_button_theme.dart
0 → 100644
View file @
5454bab6
// 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
;
}
packages/flutter/lib/src/material/outlined_button.dart
View file @
5454bab6
...
@@ -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
{
...
...
packages/flutter/lib/src/material/text_button.dart
View file @
5454bab6
...
@@ -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
{
...
...
packages/flutter/lib/src/material/theme_data.dart
View file @
5454bab6
...
@@ -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], [Elevated
Button]
/// * Common buttons: [
ElevatedButton], [FilledButton], [OutlinedButton], [Text
Button]
/// * 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
));
...
...
packages/flutter/test/material/filled_button_test.dart
0 → 100644
View file @
5454bab6
This diff is collapsed.
Click to expand it.
packages/flutter/test/material/filled_button_theme_test.dart
0 → 100644
View file @
5454bab6
This diff is collapsed.
Click to expand it.
packages/flutter/test/material/theme_data_test.dart
View file @
5454bab6
...
@@ -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'
,
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment