[material_ui] Add Material 3 Expressive `ElevatedButton` by QuncCccccc · Pull Request #13084 · flutter/packages

QuncCccccc · 2026-09-30T22:57:37Z

Adds Material 3 Expressive support to ElevatedButton. As with IconButton (#12832), apps opt in with ElevatedButtonThemeData(variant: StyleVariant.material3Expressive). Without it, ElevatedButton keeps the Material 3 style.

With Material 3 Expressive, ElevatedButton supports:

Sizes (ButtonStyle.sizeVariant): extra small through extra large. Each size has its own height, padding, icon size, label text style, and gap between the icon and the label.
Shapes (ButtonStyle.shapeVariant): round and square, including the pressed shape and the shape change when a toggle button is selected.
Toggle buttons: a button with a non-null isSelected is selectable, and uses the selected colors and selected semantics when isSelected is true.

The defaults are generated from the Material Design tokens by a new ButtonTemplateM3E in gen_defaults.

New APIs:

ElevatedButtonThemeData.variant and ElevatedButtonTheme.variantOf. A theme that doesn't specify variant inherits it from the enclosing themes, the same way as IconButtonThemeData.variant ([material_ui] Inherit IconButtonThemeData.variant from enclosing themes #13263).
ButtonStyleButton.isSelected and ElevatedButton.isSelected.
sizeVariant and shapeVariant parameters for ElevatedButton.styleFrom.

Fixes flutter/flutter#194202
Part of flutter/flutter#184937

Pre-Review Checklist

If you need help, consider asking for advice on the #hackers-new channel on Discord.

Note: The Flutter team is currently trialing the use of Gemini Code Assist for GitHub. Comments from the gemini-code-assist bot should not be taken as authoritative feedback from the Flutter team. If you find its comments useful you can update your code accordingly, but if you are unsure or disagree with the feedback, please feel free to wait for a Flutter team member's review for guidance on which automated comments should be addressed.

Regular contributors who have demonstrated familiarity with the repository guidelines only need to comment if the PR is not auto-exempted by repo tooling. ↩ ↩²

…stener

…iants

M3E buttons keep a 48dp touch target even when the visual size is smaller, matching the M3E IconButton defaults. An explicit tapTargetSize in the button or theme style still overrides it.

M3E button sizes come from the spec, so they no longer shrink with the theme's visual density (compact by default on desktop). This also keeps the padded tap target at 48dp. Matches the M3E IconButton defaults. An explicit visualDensity in the button or theme style still overrides it.

The hovered container elevation is no longer part of the Material 3 button spec. Expressive elevated buttons use elevation 1 in all enabled states.

Material Design keeps padding and spacing at 1x when text is resized: https://m3.material.io/foundations/writing/text-resizing

gemini-code-assist

Code Review

This pull request adds Material 3 Expressive support and selectable states to ElevatedButton. It introduces an isSelected property to ButtonStyleButton and ElevatedButton, implements the _ElevatedButtonDefaultsM3E default styles, and updates the generator templates and tests. A review comment suggests always updating WidgetState.selected with widget.isSelected ?? false during initialization to ensure any pre-existing selected state in a reused statesController is cleared when isSelected is null.

gemini-code-assist · 2026-10-17T23:09:15Z

+    if (widget.isSelected != null) {
+      statesController.update(WidgetState.selected, widget.isSelected!);
+    }


Always updating WidgetState.selected using widget.isSelected ?? false (similar to how WidgetState.disabled is updated) ensures that any pre-existing selected state in a reused or custom statesController is explicitly cleared when widget.isSelected is null (i.e., when the button is not selectable). This maintains consistency between the widget's parameter and the controller's state.

statesController.update(WidgetState.selected, widget.isSelected ?? false);

Definitely keep the null check here as you wrote it rather than applying the bot's suggestion. When isSelected is null (non-toggleable), callers like SegmentedButton and custom controller-driven buttons pass a WidgetStatesController with WidgetState.selected already populated before mounting the button. Updating WidgetState.selected to false when isSelected is null would wipe out that initial selected state during initState.

elliette

Just a couple small comments but this looks great, thank you!

elliette · 2026-10-22T00:21:55Z

+  );
+
+  String get _minimumSizeSwitch => _sizeSwitch(
+    xSmall: 'const Size(64.0, ${TokenButtonXsmall.containerHeight})',


Are we missing a token for the 64.0 value?

There's no token for it.

The button labels may vary in length, so I guess that's why material team won't specify a width for buttons. Also from the guideline, the M3E tokens don't define a minimum width. 64.0 is the existing default minimum width of these common buttons (the M3 ElevatedButton default is Size(64, 40)), so I kept it to avoid changing the minimum width when switching to the M3E styles. If developers need to use a different min width, they can set minimumSize in ElevatedButtonThemeData.

elliette · 2026-10-22T00:24:34Z

+    xSmall: 'const EdgeInsets.symmetric(horizontal: ${TokenButtonXsmall.leadingSpace})',
+    small: 'const EdgeInsets.symmetric(horizontal: ${TokenButtonSmall.leadingSpace})',
+    medium: 'const EdgeInsets.symmetric(horizontal: ${TokenButtonMedium.leadingSpace})',
+    large: 'const EdgeInsets.symmetric(horizontal: ${TokenButtonLarge.leadingSpace})',
+    xLarge: 'const EdgeInsets.symmetric(horizontal: ${TokenButtonXlarge.leadingSpace})',


[nit] Consider using the TokenButtonX.trailingSpace value as well in case they ever differ.

It makes sense. Added both! Thank you!

QuncCccccc · 2026-10-23T00:18:57Z

I'll wait until #13263 lands first. #13263 introduced <component>ThemeData.variantOf which is slightly different than <component>ThemeData.of, and this ElevatedButton PR also use variantOf.

Piinks

This looks great! I left two minor non-blocking nits inline and a note on the bot's comment in button_style_button.dart. LGTM once #13263 lands!

Piinks · 2026-10-30T22:33:02Z

+    if (widget.isSelected != null) {
+      statesController.update(WidgetState.selected, widget.isSelected!);
+    }


Definitely keep the null check here as you wrote it rather than applying the bot's suggestion. When isSelected is null (non-toggleable), callers like SegmentedButton and custom controller-driven buttons pass a WidgetStatesController with WidgetState.selected already populated before mounting the button. Updating WidgetState.selected to false when isSelected is null would wipe out that initial selected state during initState.

Piinks · 2026-10-30T22:33:35Z

+      });
+
+  @override
+  WidgetStateProperty<Color?>? get overlayColor =>


Nit: Unlike backgroundColor, foregroundColor, and iconColor in this template (and overlayColor in IconButtonTemplateM3E), overlayColor here uses the unselectedPressedStateLayerColor, unselectedHoveredStateLayerColor, and unselectedFocusedStateLayerColor tokens for all non-selected states rather than falling back to pressedStateLayerColor, hoveredStateLayerColor, and focusedStateLayerColor when toggleable is false.

For TokenButtonElevated, the unselected and non-toggleable state-layer color tokens both happen to resolve to TokenColorRole.primary, so the generated output for ElevatedButton is identical today. However, if ButtonTemplateM3E is reused for other button types in follow-up PRs (such as FilledButton, where unselectedPressedStateLayerColor is onSurfaceVariant while pressedStateLayerColor is onPrimary), this would emit the wrong overlay color for non-toggleable buttons.

Updated both! Thank!

Piinks · 2026-10-30T22:34:24Z

@@ -496,14 +616,23 @@ class _ElevatedButtonWithIconChild extends StatelessWidget {
    final double scale =


Nit: In _ElevatedButtonWithIconChild.build, defaultFontSize and scale (which calls MediaQuery.textScalerOf(context)) are computed unconditionally even when useExpressive is true and scale is unused. Computing scale only in the non-expressive branch would avoid registering an unnecessary MediaQuery textScaler dependency when using the expressive variant.

flutter/packages@670b30e...0478162 2026-11-05 [email protected] [material_ui] Document RefreshIndicator mouse behavior on desktop and web (flutter/packages#13286) 2026-11-05 [email protected] [material_ui] Make SearchAnchor.bar respect SearchBarThemeData padding (flutter/packages#13360) 2026-11-04 [email protected] [pointer_interceptor] Use dart.library.js_interop in example export (flutter/packages#13558) 2026-11-04 [email protected] [in_app_purchase_storekit] Use purchase(confirmIn:) for StoreKit 2 purchases (flutter/packages#13410) 2026-11-04 [email protected] [material_ui] Fix dismissal near minimum extent when shouldCloseOnMinExtent (flutter/packages#12545) 2026-11-04 [email protected] [material_ui] Add Material 3 Expressive `ElevatedButton` (flutter/packages#13084) 2026-11-04 [email protected] [go_router] Stop inactive StatefulShellRoute branches from vetoing pops (flutter/packages#12972) 2026-11-04 [email protected] Manual roll Flutter (stable) from abaf9c5 to c197ca5 (14 revisions) (flutter/packages#13542) 2026-11-04 [email protected] [in_app_purchase] Convert example app to Swift (flutter/packages#13556) 2026-11-04 [email protected] Sync release-go_router-18.1.3 to main (flutter/packages#13559) 2026-11-04 [email protected] Sync release-material_ui-1.10.0 to main (flutter/packages#13546) 2026-11-04 [email protected] [camera_android_camerax] Add magic number guideline to `TESTING.md` (flutter/packages#13081) 2026-11-04 [email protected] Sync release-cupertino_ui-1.1.6 to main (flutter/packages#13547) 2026-11-04 [email protected] [file_selector] Convert unit tests to Kotlin (flutter/packages#13102) 2026-11-04 [email protected] Roll Flutter from 9347202 to 3623d2d (25 revisions) (flutter/packages#13555) If this roll has caused a breakage, revert this CL and set the roller to dry run mode using the controls here: https://autoroll.skia.org/r/flutter-packages-flutter-autoroll Please CC [email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Flutter: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

QuncCccccc added the CICD Run CI/CD label Sep 30, 2026

github-actions Bot added p: material_ui triage-design Should be looked at in design triage and removed CICD Run CI/CD labels Sep 30, 2026

QuncCccccc mentioned this pull request Oct 14, 2026

[material_ui] Nested IconButtonThemes drop the Material 3 Expressive opt-in (IconButtonThemeData.variant isn't inherited) flutter/flutter#194414

Closed

QuncCccccc added 17 commits October 16, 2026 20:22

Add Material 3 Expressive ElevatedButton

fdd1528

Stop forcing selected state in ButtonStyleButton states controller li…

c40111f

…stener

Generate ElevatedButton icon-label spacing from tokens

f25347b

Add hovered elevation to M3E ElevatedButton defaults

4900c00

Document Material 3 Expressive ElevatedButton defaults and opt-in

6efb7f8

Add sizeVariant and shapeVariant to ElevatedButton.styleFrom

57c897d

Add tests for M3E ElevatedButton sizes, shapes, states, and theme var…

0f7b725

…iants

Rename ElevatedButton pending changelog file

af10db8

Clarify external selected state control

666835e

Document isSelected as the source of truth for selection

b690ebb

Test that a statesController selected override is visual-only

a10e093

Default M3E ElevatedButton tap target size to padded

e7e54e0

M3E buttons keep a 48dp touch target even when the visual size is smaller, matching the M3E IconButton defaults. An explicit tapTargetSize in the button or theme style still overrides it.

Inherit ElevatedButtonThemeData.variant from enclosing themes

c3aea1e

Explain that the variant precedence matches ElevatedButtonTheme.of

14f468a

Make ElevatedButtonTheme.variantOf return a non-null StyleVariant

fa86bde

Document isSelected with Material 3 and add an M3E zero-area test

64bab74

QuncCccccc force-pushed the elevated_button_m3e_main branch from 66dffeb to 64bab74 Compare October 16, 2026 20:41

QuncCccccc added the CICD Run CI/CD label Oct 16, 2026

QuncCccccc added 2 commits October 17, 2026 01:04

Remove the hovered elevation from the M3E ElevatedButton defaults

0febe27

The hovered container elevation is no longer part of the Material 3 button spec. Expressive elevated buttons use elevation 1 in all enabled states.

Clarify the gap in the ElevatedButton.icon docs

8146fc9

SametDemirtas mentioned this pull request Oct 17, 2026

[material_ui] Add ThemeData.mouseCursor #13304

Open

11 tasks done

QuncCccccc added 2 commits October 17, 2026 01:52

Add a TODO to clean up the useMaterial3 doc reference

35baaab

Keep the M3E ElevatedButton padding constant when text scales

cb7810c

Material Design keeps padding and spacing at 1x when text is resized: https://m3.material.io/foundations/writing/text-resizing

QuncCccccc marked this pull request as ready for review October 17, 2026 23:07

gemini-code-assist Bot reviewed Oct 17, 2026

View reviewed changes

QuncCccccc requested review from Piinks and elliette October 17, 2026 23:11

elliette reviewed Oct 22, 2026

View reviewed changes

elliette approved these changes Oct 22, 2026

View reviewed changes

address feedback

04c6cc6

Piinks approved these changes Oct 30, 2026

View reviewed changes

address feedback

af13a8c

ChristopherMuir mentioned this pull request Nov 4, 2026

[material_ui] Clarify density support for material 3 expressive components flutter/flutter#195973

Open

QuncCccccc added the autosubmit Merge PR when tree becomes green via auto submit App label Nov 4, 2026

auto-submit Bot merged commit 41990f9 into flutter:main Nov 4, 2026
13 checks passed

engine-flutter-autoroll mentioned this pull request Nov 5, 2026

Roll Packages from 670b30ed698a to 04781623f406 (15 revisions) flutter/flutter#196047

Merged

		@@ -496,14 +616,23 @@ class _ElevatedButtonWithIconChild extends StatelessWidget {
		final double scale =

Conversation

QuncCccccc commented Sep 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pre-Review Checklist

Footnotes

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist Bot Oct 17, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

elliette left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

QuncCccccc commented Oct 23, 2026

Uh oh!

Piinks left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

QuncCccccc commented Sep 30, 2026 •

edited

Loading