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
2ab2ca2b
Unverified
Commit
2ab2ca2b
authored
Jan 13, 2022
by
Darren Austin
Committed by
GitHub
Jan 13, 2022
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Migrate FloatingActionButton to Material 3 (#94486)
parent
20ff180a
Changes
6
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
536 additions
and
74 deletions
+536
-74
material-tokens.json
dev/tools/gen_defaults/data/material-tokens.json
+2
-2
floating_action_button.dart
...ages/flutter/lib/src/material/floating_action_button.dart
+176
-50
floating_action_button_theme.dart
...lutter/lib/src/material/floating_action_button_theme.dart
+10
-0
theme_data.dart
packages/flutter/lib/src/material/theme_data.dart
+4
-4
floating_action_button_test.dart
...es/flutter/test/material/floating_action_button_test.dart
+322
-18
floating_action_button_theme_test.dart
...tter/test/material/floating_action_button_theme_test.dart
+22
-0
No files found.
dev/tools/gen_defaults/data/material-tokens.json
View file @
2ab2ca2b
{
{
"version"
:
"v0.7
2
"
,
"version"
:
"v0.7
4
"
,
"date"
:
"202
1-12-16 00:27:25.239571
"
,
"date"
:
"202
2-01-06
"
,
"md.sys.color.light.on-tertiary"
:
"md.ref.palette.tertiary100"
,
"md.sys.color.light.on-tertiary"
:
"md.ref.palette.tertiary100"
,
"md.sys.color.light.on-secondary-container"
:
"md.ref.palette.secondary10"
,
"md.sys.color.light.on-secondary-container"
:
"md.ref.palette.secondary10"
,
"md.sys.color.light.on-secondary"
:
"md.ref.palette.secondary100"
,
"md.sys.color.light.on-secondary"
:
"md.ref.palette.secondary100"
,
...
...
packages/flutter/lib/src/material/floating_action_button.dart
View file @
2ab2ca2b
This diff is collapsed.
Click to expand it.
packages/flutter/lib/src/material/floating_action_button_theme.dart
View file @
2ab2ca2b
...
@@ -43,6 +43,7 @@ class FloatingActionButtonThemeData with Diagnosticable {
...
@@ -43,6 +43,7 @@ class FloatingActionButtonThemeData with Diagnosticable {
this
.
highlightElevation
,
this
.
highlightElevation
,
this
.
shape
,
this
.
shape
,
this
.
enableFeedback
,
this
.
enableFeedback
,
this
.
iconSize
,
this
.
sizeConstraints
,
this
.
sizeConstraints
,
this
.
smallSizeConstraints
,
this
.
smallSizeConstraints
,
this
.
largeSizeConstraints
,
this
.
largeSizeConstraints
,
...
@@ -103,6 +104,9 @@ class FloatingActionButtonThemeData with Diagnosticable {
...
@@ -103,6 +104,9 @@ class FloatingActionButtonThemeData with Diagnosticable {
/// ignored.
/// ignored.
final
bool
?
enableFeedback
;
final
bool
?
enableFeedback
;
/// Overrides the default icon size for the [FloatingActionButton];
final
double
?
iconSize
;
/// Overrides the default size constraints for the [FloatingActionButton].
/// Overrides the default size constraints for the [FloatingActionButton].
final
BoxConstraints
?
sizeConstraints
;
final
BoxConstraints
?
sizeConstraints
;
...
@@ -140,6 +144,7 @@ class FloatingActionButtonThemeData with Diagnosticable {
...
@@ -140,6 +144,7 @@ class FloatingActionButtonThemeData with Diagnosticable {
double
?
highlightElevation
,
double
?
highlightElevation
,
ShapeBorder
?
shape
,
ShapeBorder
?
shape
,
bool
?
enableFeedback
,
bool
?
enableFeedback
,
double
?
iconSize
,
BoxConstraints
?
sizeConstraints
,
BoxConstraints
?
sizeConstraints
,
BoxConstraints
?
smallSizeConstraints
,
BoxConstraints
?
smallSizeConstraints
,
BoxConstraints
?
largeSizeConstraints
,
BoxConstraints
?
largeSizeConstraints
,
...
@@ -161,6 +166,7 @@ class FloatingActionButtonThemeData with Diagnosticable {
...
@@ -161,6 +166,7 @@ class FloatingActionButtonThemeData with Diagnosticable {
highlightElevation:
highlightElevation
??
this
.
highlightElevation
,
highlightElevation:
highlightElevation
??
this
.
highlightElevation
,
shape:
shape
??
this
.
shape
,
shape:
shape
??
this
.
shape
,
enableFeedback:
enableFeedback
??
this
.
enableFeedback
,
enableFeedback:
enableFeedback
??
this
.
enableFeedback
,
iconSize:
iconSize
??
this
.
iconSize
,
sizeConstraints:
sizeConstraints
??
this
.
sizeConstraints
,
sizeConstraints:
sizeConstraints
??
this
.
sizeConstraints
,
smallSizeConstraints:
smallSizeConstraints
??
this
.
smallSizeConstraints
,
smallSizeConstraints:
smallSizeConstraints
??
this
.
smallSizeConstraints
,
largeSizeConstraints:
largeSizeConstraints
??
this
.
largeSizeConstraints
,
largeSizeConstraints:
largeSizeConstraints
??
this
.
largeSizeConstraints
,
...
@@ -193,6 +199,7 @@ class FloatingActionButtonThemeData with Diagnosticable {
...
@@ -193,6 +199,7 @@ class FloatingActionButtonThemeData with Diagnosticable {
highlightElevation:
lerpDouble
(
a
?.
highlightElevation
,
b
?.
highlightElevation
,
t
),
highlightElevation:
lerpDouble
(
a
?.
highlightElevation
,
b
?.
highlightElevation
,
t
),
shape:
ShapeBorder
.
lerp
(
a
?.
shape
,
b
?.
shape
,
t
),
shape:
ShapeBorder
.
lerp
(
a
?.
shape
,
b
?.
shape
,
t
),
enableFeedback:
t
<
0.5
?
a
?.
enableFeedback
:
b
?.
enableFeedback
,
enableFeedback:
t
<
0.5
?
a
?.
enableFeedback
:
b
?.
enableFeedback
,
iconSize:
lerpDouble
(
a
?.
iconSize
,
b
?.
iconSize
,
t
),
sizeConstraints:
BoxConstraints
.
lerp
(
a
?.
sizeConstraints
,
b
?.
sizeConstraints
,
t
),
sizeConstraints:
BoxConstraints
.
lerp
(
a
?.
sizeConstraints
,
b
?.
sizeConstraints
,
t
),
smallSizeConstraints:
BoxConstraints
.
lerp
(
a
?.
smallSizeConstraints
,
b
?.
smallSizeConstraints
,
t
),
smallSizeConstraints:
BoxConstraints
.
lerp
(
a
?.
smallSizeConstraints
,
b
?.
smallSizeConstraints
,
t
),
largeSizeConstraints:
BoxConstraints
.
lerp
(
a
?.
largeSizeConstraints
,
b
?.
largeSizeConstraints
,
t
),
largeSizeConstraints:
BoxConstraints
.
lerp
(
a
?.
largeSizeConstraints
,
b
?.
largeSizeConstraints
,
t
),
...
@@ -218,6 +225,7 @@ class FloatingActionButtonThemeData with Diagnosticable {
...
@@ -218,6 +225,7 @@ class FloatingActionButtonThemeData with Diagnosticable {
highlightElevation
,
highlightElevation
,
shape
,
shape
,
enableFeedback
,
enableFeedback
,
iconSize
,
sizeConstraints
,
sizeConstraints
,
smallSizeConstraints
,
smallSizeConstraints
,
largeSizeConstraints
,
largeSizeConstraints
,
...
@@ -247,6 +255,7 @@ class FloatingActionButtonThemeData with Diagnosticable {
...
@@ -247,6 +255,7 @@ class FloatingActionButtonThemeData with Diagnosticable {
&&
other
.
highlightElevation
==
highlightElevation
&&
other
.
highlightElevation
==
highlightElevation
&&
other
.
shape
==
shape
&&
other
.
shape
==
shape
&&
other
.
enableFeedback
==
enableFeedback
&&
other
.
enableFeedback
==
enableFeedback
&&
other
.
iconSize
==
iconSize
&&
other
.
sizeConstraints
==
sizeConstraints
&&
other
.
sizeConstraints
==
sizeConstraints
&&
other
.
smallSizeConstraints
==
smallSizeConstraints
&&
other
.
smallSizeConstraints
==
smallSizeConstraints
&&
other
.
largeSizeConstraints
==
largeSizeConstraints
&&
other
.
largeSizeConstraints
==
largeSizeConstraints
...
@@ -272,6 +281,7 @@ class FloatingActionButtonThemeData with Diagnosticable {
...
@@ -272,6 +281,7 @@ class FloatingActionButtonThemeData with Diagnosticable {
properties
.
add
(
DoubleProperty
(
'highlightElevation'
,
highlightElevation
,
defaultValue:
null
));
properties
.
add
(
DoubleProperty
(
'highlightElevation'
,
highlightElevation
,
defaultValue:
null
));
properties
.
add
(
DiagnosticsProperty
<
ShapeBorder
>(
'shape'
,
shape
,
defaultValue:
null
));
properties
.
add
(
DiagnosticsProperty
<
ShapeBorder
>(
'shape'
,
shape
,
defaultValue:
null
));
properties
.
add
(
DiagnosticsProperty
<
bool
>(
'enableFeedback'
,
enableFeedback
,
defaultValue:
null
));
properties
.
add
(
DiagnosticsProperty
<
bool
>(
'enableFeedback'
,
enableFeedback
,
defaultValue:
null
));
properties
.
add
(
DoubleProperty
(
'iconSize'
,
iconSize
,
defaultValue:
null
));
properties
.
add
(
DiagnosticsProperty
<
BoxConstraints
>(
'sizeConstraints'
,
sizeConstraints
,
defaultValue:
null
));
properties
.
add
(
DiagnosticsProperty
<
BoxConstraints
>(
'sizeConstraints'
,
sizeConstraints
,
defaultValue:
null
));
properties
.
add
(
DiagnosticsProperty
<
BoxConstraints
>(
'smallSizeConstraints'
,
smallSizeConstraints
,
defaultValue:
null
));
properties
.
add
(
DiagnosticsProperty
<
BoxConstraints
>(
'smallSizeConstraints'
,
smallSizeConstraints
,
defaultValue:
null
));
properties
.
add
(
DiagnosticsProperty
<
BoxConstraints
>(
'largeSizeConstraints'
,
largeSizeConstraints
,
defaultValue:
null
));
properties
.
add
(
DiagnosticsProperty
<
BoxConstraints
>(
'largeSizeConstraints'
,
largeSizeConstraints
,
defaultValue:
null
));
...
...
packages/flutter/lib/src/material/theme_data.dart
View file @
2ab2ca2b
...
@@ -1134,10 +1134,6 @@ class ThemeData with Diagnosticable {
...
@@ -1134,10 +1134,6 @@ class ThemeData with Diagnosticable {
/// start using new colors, typography and other features of Material 3.
/// start using new colors, typography and other features of Material 3.
/// If false, they will use the Material 2 look and feel.
/// If false, they will use the Material 2 look and feel.
///
///
/// Currently no components have been migrated to support Material 3.
/// As they are updated to include Material 3 support this documentation
/// will be modified to indicate exactly what widgets this flag will affect.
///
/// During the migration to Material 3, turning this on may yield
/// During the migration to Material 3, turning this on may yield
/// inconsistent look and feel in your app. Some components will be migrated
/// inconsistent look and feel in your app. Some components will be migrated
/// before others and typography changes will be coming in stages.
/// before others and typography changes will be coming in stages.
...
@@ -1148,6 +1144,10 @@ class ThemeData with Diagnosticable {
...
@@ -1148,6 +1144,10 @@ class ThemeData with Diagnosticable {
/// all uses of it. Everything will use the Material 3 look and feel at
/// all uses of it. Everything will use the Material 3 look and feel at
/// that point.
/// that point.
///
///
/// Components that have been migrated to Material 3 are:
///
/// * [FloatingActionButton]
///
/// See also:
/// See also:
///
///
/// * [Material Design 3](https://m3.material.io/).
/// * [Material Design 3](https://m3.material.io/).
...
...
packages/flutter/test/material/floating_action_button_test.dart
View file @
2ab2ca2b
This diff is collapsed.
Click to expand it.
packages/flutter/test/material/floating_action_button_theme_test.dart
View file @
2ab2ca2b
...
@@ -33,6 +33,8 @@ void main() {
...
@@ -33,6 +33,8 @@ void main() {
expect
(
_getRawMaterialButton
(
tester
).
shape
,
const
CircleBorder
());
expect
(
_getRawMaterialButton
(
tester
).
shape
,
const
CircleBorder
());
expect
(
_getRawMaterialButton
(
tester
).
splashColor
,
ThemeData
().
splashColor
);
expect
(
_getRawMaterialButton
(
tester
).
splashColor
,
ThemeData
().
splashColor
);
expect
(
_getRawMaterialButton
(
tester
).
constraints
,
const
BoxConstraints
.
tightFor
(
width:
56.0
,
height:
56.0
));
expect
(
_getRawMaterialButton
(
tester
).
constraints
,
const
BoxConstraints
.
tightFor
(
width:
56.0
,
height:
56.0
));
expect
(
_getIconSize
(
tester
).
width
,
24.0
);
expect
(
_getIconSize
(
tester
).
height
,
24.0
);
});
});
testWidgets
(
'FloatingActionButtonThemeData values are used when no FloatingActionButton properties are specified'
,
(
WidgetTester
tester
)
async
{
testWidgets
(
'FloatingActionButtonThemeData values are used when no FloatingActionButton properties are specified'
,
(
WidgetTester
tester
)
async
{
...
@@ -138,6 +140,7 @@ void main() {
...
@@ -138,6 +140,7 @@ void main() {
testWidgets
(
'FloatingActionButton.small uses custom constraints when specified in the theme'
,
(
WidgetTester
tester
)
async
{
testWidgets
(
'FloatingActionButton.small uses custom constraints when specified in the theme'
,
(
WidgetTester
tester
)
async
{
const
BoxConstraints
constraints
=
BoxConstraints
.
tightFor
(
width:
100.0
,
height:
100.0
);
const
BoxConstraints
constraints
=
BoxConstraints
.
tightFor
(
width:
100.0
,
height:
100.0
);
const
double
iconSize
=
24.0
;
await
tester
.
pumpWidget
(
MaterialApp
(
await
tester
.
pumpWidget
(
MaterialApp
(
theme:
ThemeData
().
copyWith
(
theme:
ThemeData
().
copyWith
(
...
@@ -154,10 +157,13 @@ void main() {
...
@@ -154,10 +157,13 @@ void main() {
));
));
expect
(
_getRawMaterialButton
(
tester
).
constraints
,
constraints
);
expect
(
_getRawMaterialButton
(
tester
).
constraints
,
constraints
);
expect
(
_getIconSize
(
tester
).
width
,
iconSize
);
expect
(
_getIconSize
(
tester
).
height
,
iconSize
);
});
});
testWidgets
(
'FloatingActionButton.large uses custom constraints when specified in the theme'
,
(
WidgetTester
tester
)
async
{
testWidgets
(
'FloatingActionButton.large uses custom constraints when specified in the theme'
,
(
WidgetTester
tester
)
async
{
const
BoxConstraints
constraints
=
BoxConstraints
.
tightFor
(
width:
100.0
,
height:
100.0
);
const
BoxConstraints
constraints
=
BoxConstraints
.
tightFor
(
width:
100.0
,
height:
100.0
);
const
double
iconSize
=
36.0
;
await
tester
.
pumpWidget
(
MaterialApp
(
await
tester
.
pumpWidget
(
MaterialApp
(
theme:
ThemeData
().
copyWith
(
theme:
ThemeData
().
copyWith
(
...
@@ -174,6 +180,8 @@ void main() {
...
@@ -174,6 +180,8 @@ void main() {
));
));
expect
(
_getRawMaterialButton
(
tester
).
constraints
,
constraints
);
expect
(
_getRawMaterialButton
(
tester
).
constraints
,
constraints
);
expect
(
_getIconSize
(
tester
).
width
,
iconSize
);
expect
(
_getIconSize
(
tester
).
height
,
iconSize
);
});
});
testWidgets
(
'FloatingActionButton.extended uses custom properties when specified in the theme'
,
(
WidgetTester
tester
)
async
{
testWidgets
(
'FloatingActionButton.extended uses custom properties when specified in the theme'
,
(
WidgetTester
tester
)
async
{
...
@@ -271,6 +279,7 @@ void main() {
...
@@ -271,6 +279,7 @@ void main() {
highlightElevation:
43
,
highlightElevation:
43
,
shape:
BeveledRectangleBorder
(),
shape:
BeveledRectangleBorder
(),
enableFeedback:
true
,
enableFeedback:
true
,
iconSize:
42
,
sizeConstraints:
BoxConstraints
.
tightFor
(
width:
100.0
,
height:
100.0
),
sizeConstraints:
BoxConstraints
.
tightFor
(
width:
100.0
,
height:
100.0
),
smallSizeConstraints:
BoxConstraints
.
tightFor
(
width:
101.0
,
height:
101.0
),
smallSizeConstraints:
BoxConstraints
.
tightFor
(
width:
101.0
,
height:
101.0
),
largeSizeConstraints:
BoxConstraints
.
tightFor
(
width:
102.0
,
height:
102.0
),
largeSizeConstraints:
BoxConstraints
.
tightFor
(
width:
102.0
,
height:
102.0
),
...
@@ -298,6 +307,7 @@ void main() {
...
@@ -298,6 +307,7 @@ void main() {
'highlightElevation: 43.0'
,
'highlightElevation: 43.0'
,
'shape: BeveledRectangleBorder(BorderSide(Color(0xff000000), 0.0, BorderStyle.none), BorderRadius.zero)'
,
'shape: BeveledRectangleBorder(BorderSide(Color(0xff000000), 0.0, BorderStyle.none), BorderRadius.zero)'
,
'enableFeedback: true'
,
'enableFeedback: true'
,
'iconSize: 42.0'
,
'sizeConstraints: BoxConstraints(w=100.0, h=100.0)'
,
'sizeConstraints: BoxConstraints(w=100.0, h=100.0)'
,
'smallSizeConstraints: BoxConstraints(w=101.0, h=101.0)'
,
'smallSizeConstraints: BoxConstraints(w=101.0, h=101.0)'
,
'largeSizeConstraints: BoxConstraints(w=102.0, h=102.0)'
,
'largeSizeConstraints: BoxConstraints(w=102.0, h=102.0)'
,
...
@@ -326,3 +336,15 @@ RichText _getRichText(WidgetTester tester) {
...
@@ -326,3 +336,15 @@ RichText _getRichText(WidgetTester tester) {
),
),
);
);
}
}
SizedBox
_getIconSize
(
WidgetTester
tester
)
{
return
tester
.
widget
<
SizedBox
>(
find
.
descendant
(
of:
find
.
descendant
(
of:
find
.
byType
(
FloatingActionButton
),
matching:
find
.
byType
(
Icon
),
),
matching:
find
.
byType
(
SizedBox
),
),
);
}
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