Skip to content

Commit 9241426

Browse files
author
Casey Hillers
authored
Revert "Revert "[Re-land#2] Button padding M3 (#119498)" (#119597)" (#119656)
This reverts commit 7ba4406.
1 parent 5ccb4d4 commit 9241426

File tree

10 files changed

+339
-32
lines changed

10 files changed

+339
-32
lines changed

‎examples/api/lib/material/app_bar/app_bar.1.dart‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ class _AppBarExampleState extends State<AppBarExample> {
9898
label: const Text('shadow color'),
9999
),
100100
const SizedBox(width: 5),
101-
ElevatedButton.icon(
101+
ElevatedButton(
102102
onPressed: () {
103103
if (scrolledUnderElevation == null) {
104104
setState(() {
@@ -111,8 +111,7 @@ class _AppBarExampleState extends State<AppBarExample> {
111111
});
112112
}
113113
},
114-
icon: const Icon(Icons.add),
115-
label: Text(
114+
child: Text(
116115
'scrolledUnderElevation: ${scrolledUnderElevation ?? 'default'}',
117116
),
118117
),

‎packages/flutter/lib/src/material/elevated_button.dart‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -333,10 +333,10 @@ class ElevatedButton extends ButtonStyleButton {
333333
/// * hovered - 3
334334
/// * focused or pressed - 1
335335
/// * `padding`
336-
/// * `textScaleFactor <= 1` - horizontal(16)
337-
/// * `1 < textScaleFactor <= 2` - lerp(horizontal(16), horizontal(8))
338-
/// * `2 < textScaleFactor <= 3` - lerp(horizontal(8), horizontal(4))
339-
/// * `3 < textScaleFactor` - horizontal(4)
336+
/// * `textScaleFactor <= 1` - horizontal(24)
337+
/// * `1 < textScaleFactor <= 2` - lerp(horizontal(24), horizontal(12))
338+
/// * `2 < textScaleFactor <= 3` - lerp(horizontal(12), horizontal(6))
339+
/// * `3 < textScaleFactor` - horizontal(6)
340340
/// * `minimumSize` - Size(64, 40)
341341
/// * `fixedSize` - null
342342
/// * `maximumSize` - Size.infinite
@@ -351,6 +351,10 @@ class ElevatedButton extends ButtonStyleButton {
351351
/// * `enableFeedback` - true
352352
/// * `alignment` - Alignment.center
353353
/// * `splashFactory` - Theme.splashFactory
354+
///
355+
/// For the [ElevatedButton.icon] factory, the start (generally the left) value of
356+
/// [padding] is reduced from 24 to 16.
357+
354358
@override
355359
ButtonStyle defaultStyleOf(BuildContext context) {
356360
final ThemeData theme = Theme.of(context);
@@ -390,10 +394,12 @@ class ElevatedButton extends ButtonStyleButton {
390394
}
391395

392396
EdgeInsetsGeometry _scaledPadding(BuildContext context) {
397+
final bool useMaterial3 = Theme.of(context).useMaterial3;
398+
final double padding1x = useMaterial3 ? 24.0 : 16.0;
393399
return ButtonStyleButton.scaledPadding(
394-
const EdgeInsets.symmetric(horizontal: 16),
395-
const EdgeInsets.symmetric(horizontal: 8),
396-
const EdgeInsets.symmetric(horizontal: 4),
400+
EdgeInsets.symmetric(horizontal: padding1x),
401+
EdgeInsets.symmetric(horizontal: padding1x / 2),
402+
EdgeInsets.symmetric(horizontal: padding1x / 2 / 2),
397403
MediaQuery.textScaleFactorOf(context),
398404
);
399405
}
@@ -494,7 +500,13 @@ class _ElevatedButtonWithIcon extends ElevatedButton {
494500

495501
@override
496502
ButtonStyle defaultStyleOf(BuildContext context) {
497-
final EdgeInsetsGeometry scaledPadding = ButtonStyleButton.scaledPadding(
503+
final bool useMaterial3 = Theme.of(context).useMaterial3;
504+
final EdgeInsetsGeometry scaledPadding = useMaterial3 ? ButtonStyleButton.scaledPadding(
505+
const EdgeInsetsDirectional.fromSTEB(16, 0, 24, 0),
506+
const EdgeInsetsDirectional.fromSTEB(8, 0, 12, 0),
507+
const EdgeInsetsDirectional.fromSTEB(4, 0, 6, 0),
508+
MediaQuery.textScaleFactorOf(context),
509+
) : ButtonStyleButton.scaledPadding(
498510
const EdgeInsetsDirectional.fromSTEB(12, 0, 16, 0),
499511
const EdgeInsets.symmetric(horizontal: 8),
500512
const EdgeInsetsDirectional.fromSTEB(8, 0, 4, 0),

‎packages/flutter/lib/src/material/filled_button.dart‎

Lines changed: 56 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -345,6 +345,50 @@ class FilledButton extends ButtonStyleButton {
345345
/// shape's [OutlinedBorder.side]. Typically the default value of an
346346
/// [OutlinedBorder]'s side is [BorderSide.none], so an outline is not drawn.
347347
///
348+
/// ## Material 3 defaults
349+
///
350+
/// If [ThemeData.useMaterial3] is set to true the following defaults will
351+
/// be used:
352+
///
353+
/// * `textStyle` - Theme.textTheme.labelLarge
354+
/// * `backgroundColor`
355+
/// * disabled - Theme.colorScheme.onSurface(0.12)
356+
/// * others - Theme.colorScheme.secondaryContainer
357+
/// * `foregroundColor`
358+
/// * disabled - Theme.colorScheme.onSurface(0.38)
359+
/// * others - Theme.colorScheme.onSecondaryContainer
360+
/// * `overlayColor`
361+
/// * hovered - Theme.colorScheme.onSecondaryContainer(0.08)
362+
/// * focused or pressed - Theme.colorScheme.onSecondaryContainer(0.12)
363+
/// * `shadowColor` - Theme.colorScheme.shadow
364+
/// * `surfaceTintColor` - Colors.transparent
365+
/// * `elevation`
366+
/// * disabled - 0
367+
/// * default - 1
368+
/// * hovered - 3
369+
/// * focused or pressed - 1
370+
/// * `padding`
371+
/// * `textScaleFactor <= 1` - horizontal(24)
372+
/// * `1 < textScaleFactor <= 2` - lerp(horizontal(24), horizontal(12))
373+
/// * `2 < textScaleFactor <= 3` - lerp(horizontal(12), horizontal(6))
374+
/// * `3 < textScaleFactor` - horizontal(6)
375+
/// * `minimumSize` - Size(64, 40)
376+
/// * `fixedSize` - null
377+
/// * `maximumSize` - Size.infinite
378+
/// * `side` - null
379+
/// * `shape` - StadiumBorder()
380+
/// * `mouseCursor`
381+
/// * disabled - SystemMouseCursors.basic
382+
/// * others - SystemMouseCursors.click
383+
/// * `visualDensity` - Theme.visualDensity
384+
/// * `tapTargetSize` - Theme.materialTapTargetSize
385+
/// * `animationDuration` - kThemeChangeDuration
386+
/// * `enableFeedback` - true
387+
/// * `alignment` - Alignment.center
388+
/// * `splashFactory` - Theme.splashFactory
389+
///
390+
/// For the [FilledButton.icon] factory, the start (generally the left) value of
391+
/// [padding] is reduced from 24 to 16.
348392
@override
349393
ButtonStyle defaultStyleOf(BuildContext context) {
350394
switch (_variant) {
@@ -364,10 +408,12 @@ class FilledButton extends ButtonStyleButton {
364408
}
365409

366410
EdgeInsetsGeometry _scaledPadding(BuildContext context) {
411+
final bool useMaterial3 = Theme.of(context).useMaterial3;
412+
final double padding1x = useMaterial3 ? 24.0 : 16.0;
367413
return ButtonStyleButton.scaledPadding(
368-
const EdgeInsets.symmetric(horizontal: 16),
369-
const EdgeInsets.symmetric(horizontal: 8),
370-
const EdgeInsets.symmetric(horizontal: 4),
414+
EdgeInsets.symmetric(horizontal: padding1x),
415+
EdgeInsets.symmetric(horizontal: padding1x / 2),
416+
EdgeInsets.symmetric(horizontal: padding1x / 2 / 2),
371417
MediaQuery.textScaleFactorOf(context),
372418
);
373419
}
@@ -463,7 +509,13 @@ class _FilledButtonWithIcon extends FilledButton {
463509

464510
@override
465511
ButtonStyle defaultStyleOf(BuildContext context) {
466-
final EdgeInsetsGeometry scaledPadding = ButtonStyleButton.scaledPadding(
512+
final bool useMaterial3 = Theme.of(context).useMaterial3;
513+
final EdgeInsetsGeometry scaledPadding = useMaterial3 ? ButtonStyleButton.scaledPadding(
514+
const EdgeInsetsDirectional.fromSTEB(16, 0, 24, 0),
515+
const EdgeInsetsDirectional.fromSTEB(8, 0, 12, 0),
516+
const EdgeInsetsDirectional.fromSTEB(4, 0, 6, 0),
517+
MediaQuery.textScaleFactorOf(context),
518+
) : ButtonStyleButton.scaledPadding(
467519
const EdgeInsetsDirectional.fromSTEB(12, 0, 16, 0),
468520
const EdgeInsets.symmetric(horizontal: 8),
469521
const EdgeInsetsDirectional.fromSTEB(8, 0, 4, 0),

‎packages/flutter/lib/src/material/outlined_button.dart‎

Lines changed: 29 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -287,10 +287,10 @@ class OutlinedButton extends ButtonStyleButton {
287287
/// * `surfaceTintColor` - null
288288
/// * `elevation` - 0
289289
/// * `padding`
290-
/// * `textScaleFactor <= 1` - horizontal(16)
291-
/// * `1 < textScaleFactor <= 2` - lerp(horizontal(16), horizontal(8))
292-
/// * `2 < textScaleFactor <= 3` - lerp(horizontal(8), horizontal(4))
293-
/// * `3 < textScaleFactor` - horizontal(4)
290+
/// * `textScaleFactor <= 1` - horizontal(24)
291+
/// * `1 < textScaleFactor <= 2` - lerp(horizontal(24), horizontal(12))
292+
/// * `2 < textScaleFactor <= 3` - lerp(horizontal(12), horizontal(6))
293+
/// * `3 < textScaleFactor` - horizontal(6)
294294
/// * `minimumSize` - Size(64, 40)
295295
/// * `fixedSize` - null
296296
/// * `maximumSize` - Size.infinite
@@ -307,6 +307,9 @@ class OutlinedButton extends ButtonStyleButton {
307307
/// * `enableFeedback` - true
308308
/// * `alignment` - Alignment.center
309309
/// * `splashFactory` - Theme.splashFactory
310+
///
311+
/// For the [OutlinedButton.icon] factory, the start (generally the left) value of
312+
/// [padding] is reduced from 24 to 16.
310313
@override
311314
ButtonStyle defaultStyleOf(BuildContext context) {
312315
final ThemeData theme = Theme.of(context);
@@ -347,10 +350,12 @@ class OutlinedButton extends ButtonStyleButton {
347350
}
348351

349352
EdgeInsetsGeometry _scaledPadding(BuildContext context) {
353+
final bool useMaterial3 = Theme.of(context).useMaterial3;
354+
final double padding1x = useMaterial3 ? 24.0 : 16.0;
350355
return ButtonStyleButton.scaledPadding(
351-
const EdgeInsets.symmetric(horizontal: 16),
352-
const EdgeInsets.symmetric(horizontal: 8),
353-
const EdgeInsets.symmetric(horizontal: 4),
356+
EdgeInsets.symmetric(horizontal: padding1x),
357+
EdgeInsets.symmetric(horizontal: padding1x / 2),
358+
EdgeInsets.symmetric(horizontal: padding1x / 2 / 2),
354359
MediaQuery.textScaleFactorOf(context),
355360
);
356361
}
@@ -422,6 +427,23 @@ class _OutlinedButtonWithIcon extends OutlinedButton {
422427
clipBehavior: clipBehavior ?? Clip.none,
423428
child: _OutlinedButtonWithIconChild(icon: icon, label: label),
424429
);
430+
431+
@override
432+
ButtonStyle defaultStyleOf(BuildContext context) {
433+
final bool useMaterial3 = Theme.of(context).useMaterial3;
434+
if (!useMaterial3) {
435+
return super.defaultStyleOf(context);
436+
}
437+
final EdgeInsetsGeometry scaledPadding = ButtonStyleButton.scaledPadding(
438+
const EdgeInsetsDirectional.fromSTEB(16, 0, 24, 0),
439+
const EdgeInsetsDirectional.fromSTEB(8, 0, 12, 0),
440+
const EdgeInsetsDirectional.fromSTEB(4, 0, 6, 0),
441+
MediaQuery.textScaleFactorOf(context),
442+
);
443+
return super.defaultStyleOf(context).copyWith(
444+
padding: MaterialStatePropertyAll<EdgeInsetsGeometry>(scaledPadding),
445+
);
446+
}
425447
}
426448

427449
class _OutlinedButtonWithIconChild extends StatelessWidget {

‎packages/flutter/lib/src/material/text_button.dart‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -270,7 +270,7 @@ class TextButton extends ButtonStyleButton {
270270
/// * `shadowColor` - Theme.shadowColor
271271
/// * `elevation` - 0
272272
/// * `padding`
273-
/// * `textScaleFactor <= 1` - all(8)
273+
/// * `textScaleFactor <= 1` - (horizontal(12), vertical(8))
274274
/// * `1 < textScaleFactor <= 2` - lerp(all(8), horizontal(8))
275275
/// * `2 < textScaleFactor <= 3` - lerp(horizontal(8), horizontal(4))
276276
/// * `3 < textScaleFactor` - horizontal(4)
@@ -320,7 +320,7 @@ class TextButton extends ButtonStyleButton {
320320
/// * `surfaceTintColor` - null
321321
/// * `elevation` - 0
322322
/// * `padding`
323-
/// * `textScaleFactor <= 1` - all(8)
323+
/// * `textScaleFactor <= 1` - lerp(horizontal(12), horizontal(4))
324324
/// * `1 < textScaleFactor <= 2` - lerp(all(8), horizontal(8))
325325
/// * `2 < textScaleFactor <= 3` - lerp(horizontal(8), horizontal(4))
326326
/// * `3 < textScaleFactor` - horizontal(4)
@@ -338,6 +338,9 @@ class TextButton extends ButtonStyleButton {
338338
/// * `enableFeedback` - true
339339
/// * `alignment` - Alignment.center
340340
/// * `splashFactory` - Theme.splashFactory
341+
///
342+
/// For the [TextButton.icon] factory, the end (generally the right) value of
343+
/// [padding] is increased from 12 to 16.
341344
/// {@endtemplate}
342345
@override
343346
ButtonStyle defaultStyleOf(BuildContext context) {
@@ -378,8 +381,9 @@ class TextButton extends ButtonStyleButton {
378381
}
379382

380383
EdgeInsetsGeometry _scaledPadding(BuildContext context) {
384+
final bool useMaterial3 = Theme.of(context).useMaterial3;
381385
return ButtonStyleButton.scaledPadding(
382-
const EdgeInsets.all(8),
386+
useMaterial3 ? const EdgeInsets.symmetric(horizontal: 12, vertical: 8) : const EdgeInsets.all(8),
383387
const EdgeInsets.symmetric(horizontal: 8),
384388
const EdgeInsets.symmetric(horizontal: 4),
385389
MediaQuery.textScaleFactorOf(context),
@@ -489,8 +493,9 @@ class _TextButtonWithIcon extends TextButton {
489493

490494
@override
491495
ButtonStyle defaultStyleOf(BuildContext context) {
496+
final bool useMaterial3 = Theme.of(context).useMaterial3;
492497
final EdgeInsetsGeometry scaledPadding = ButtonStyleButton.scaledPadding(
493-
const EdgeInsets.all(8),
498+
useMaterial3 ? const EdgeInsetsDirectional.fromSTEB(12, 8, 16, 8) : const EdgeInsets.all(8),
494499
const EdgeInsets.symmetric(horizontal: 4),
495500
const EdgeInsets.symmetric(horizontal: 4),
496501
MediaQuery.textScaleFactorOf(context),

‎packages/flutter/test/material/elevated_button_test.dart‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1147,6 +1147,59 @@ void main() {
11471147
expect(paddingWidget.padding, const EdgeInsets.all(22));
11481148
});
11491149

1150+
testWidgets('M3 ElevatedButton has correct padding', (WidgetTester tester) async {
1151+
final Key key = UniqueKey();
1152+
await tester.pumpWidget(
1153+
MaterialApp(
1154+
theme: ThemeData.from(colorScheme: const ColorScheme.light(), useMaterial3: true),
1155+
home: Scaffold(
1156+
body: Center(
1157+
child: ElevatedButton(
1158+
key: key,
1159+
onPressed: () {},
1160+
child: const Text('ElevatedButton'),
1161+
),
1162+
),
1163+
),
1164+
),
1165+
);
1166+
1167+
final Padding paddingWidget = tester.widget<Padding>(
1168+
find.descendant(
1169+
of: find.byKey(key),
1170+
matching: find.byType(Padding),
1171+
),
1172+
);
1173+
expect(paddingWidget.padding, const EdgeInsets.symmetric(horizontal: 24));
1174+
});
1175+
1176+
testWidgets('M3 ElevatedButton.icon has correct padding', (WidgetTester tester) async {
1177+
final Key key = UniqueKey();
1178+
await tester.pumpWidget(
1179+
MaterialApp(
1180+
theme: ThemeData.from(colorScheme: const ColorScheme.light(), useMaterial3: true),
1181+
home: Scaffold(
1182+
body: Center(
1183+
child: ElevatedButton.icon(
1184+
key: key,
1185+
icon: const Icon(Icons.favorite),
1186+
onPressed: () {},
1187+
label: const Text('ElevatedButton'),
1188+
),
1189+
),
1190+
),
1191+
),
1192+
);
1193+
1194+
final Padding paddingWidget = tester.widget<Padding>(
1195+
find.descendant(
1196+
of: find.byKey(key),
1197+
matching: find.byType(Padding),
1198+
),
1199+
);
1200+
expect(paddingWidget.padding, const EdgeInsetsDirectional.fromSTEB(16.0, 0.0, 24.0, 0.0));
1201+
});
1202+
11501203
testWidgets('Elevated buttons animate elevation before color on disable', (WidgetTester tester) async {
11511204
// This is a regression test for https://github.com/flutter/flutter/issues/387
11521205

‎packages/flutter/test/material/filled_button_test.dart‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1224,6 +1224,59 @@ void main() {
12241224
expect(paddingWidget.padding, const EdgeInsets.all(22));
12251225
});
12261226

1227+
testWidgets('M3 FilledButton has correct padding', (WidgetTester tester) async {
1228+
final Key key = UniqueKey();
1229+
await tester.pumpWidget(
1230+
MaterialApp(
1231+
theme: ThemeData.from(colorScheme: const ColorScheme.light(), useMaterial3: true),
1232+
home: Scaffold(
1233+
body: Center(
1234+
child: ElevatedButton(
1235+
key: key,
1236+
onPressed: () {},
1237+
child: const Text('FilledButton'),
1238+
),
1239+
),
1240+
),
1241+
),
1242+
);
1243+
1244+
final Padding paddingWidget = tester.widget<Padding>(
1245+
find.descendant(
1246+
of: find.byKey(key),
1247+
matching: find.byType(Padding),
1248+
),
1249+
);
1250+
expect(paddingWidget.padding, const EdgeInsets.symmetric(horizontal: 24));
1251+
});
1252+
1253+
testWidgets('M3 FilledButton.icon has correct padding', (WidgetTester tester) async {
1254+
final Key key = UniqueKey();
1255+
await tester.pumpWidget(
1256+
MaterialApp(
1257+
theme: ThemeData.from(colorScheme: const ColorScheme.light(), useMaterial3: true),
1258+
home: Scaffold(
1259+
body: Center(
1260+
child: FilledButton.icon(
1261+
key: key,
1262+
icon: const Icon(Icons.favorite),
1263+
onPressed: () {},
1264+
label: const Text('ElevatedButton'),
1265+
),
1266+
),
1267+
),
1268+
),
1269+
);
1270+
1271+
final Padding paddingWidget = tester.widget<Padding>(
1272+
find.descendant(
1273+
of: find.byKey(key),
1274+
matching: find.byType(Padding),
1275+
),
1276+
);
1277+
expect(paddingWidget.padding, const EdgeInsetsDirectional.fromSTEB(16.0, 0.0, 24.0, 0.0));
1278+
});
1279+
12271280
testWidgets('By default, FilledButton shape outline is defined by shape.side', (WidgetTester tester) async {
12281281
const Color borderColor = Color(0xff4caf50);
12291282
await tester.pumpWidget(

0 commit comments

Comments
 (0)