[material_ui] Add Material 3 Expressive IconButton by QuncCccccc · Pull Request #12093 · flutter/packages

QuncCccccc · 2026-07-01T22:47:31Z

This PR is to add Material 3 Expressive IconButton support behind an explicit component-level opt-in.

This PR adds:

3 new ButtonStyle properties used by the IconButton M3E migration:
- sizeVariant
- iconButtonWidth
- shapeVariant
IconButtonThemeData.variant so IconButtons can opt into StyleVariant.material3Expressive.
IconButtonTemplateM3E to generate IconButton defaults from the M3E token data.
Adds the generated M3E IconButton defaults in:
- packages/material_ui/lib/src/generated/icon_button_defaults_m3e.g.dart

TODO:

I'll add a separate PR/demo showing the Material 3 Expressive IconButton variants.
Will also update IconButton shape morphing to use physics-based motion animation.

Pre-launch Checklist

QuncCccccc · 2026-08-19T17:48:16Z

This PR is still trying to merge into m3e_migration branch. I'll create another PR targeting to land in main once we move all previous m3e_migration commits to main, and update changelog. But feel free to review the IconButton change for now:)

elliette · 2026-08-20T19:59:01Z

+  /// * `textStyle` - null
+  /// * `backgroundColor` - transparent
+  /// * `foregroundColor`
+  ///   * disabled - Theme.colorScheme.onSurface(0.38)


What happens if the Material specs are updated? It seems possible that this documentation could get out of date

Yes, they will change the number but not super frequent. I usually just keep an eye on the new email from material-token-announce to see whether any changes that have been made and we need to pay attention.

Maybe later we can use agent to do regular check on the accuracy of documentation? Just brainstorm haha.

elliette · 2026-08-20T20:03:53Z

 import '../templates/app_bar_template.dart';
-import '../templates/banner_template.dart';
 import '../templates/badge_template.dart';
+import '../templates/banner_template.dart';


oops good catch!

gemini-code-assist

Code Review

This pull request introduces Material 3 Expressive button style variants (ButtonSizeVariant, IconButtonWidthVariant, and ButtonShapeVariant) to ButtonStyle, integrating them into IconButton and IconButtonThemeData. It also adds generated defaults for Material 3 Expressive icon buttons and corresponding tests. The review feedback highlights an inverted shape mapping in the template where square shapes resolve to round borders when selected, and recommends replacing deprecated MaterialStatePropertyAll usages with WidgetStatePropertyAll to align with the modern WidgetState API.

gemini-code-assist · 2026-08-25T19:57:48Z

+  String get _selectedShapeSwitch {
+    return '''
+switch (shapeVariant) {
+      ButtonShapeVariant.round => $_selectedRoundShapeSwitch,
+      ButtonShapeVariant.square => $_selectedSquareShapeSwitch,
+    }''';
+  }


The mapping for selected shapes is inverted. When shapeVariant is square and the button is selected, it resolves to StadiumBorder (fully round), whereas when shapeVariant is round and selected, it resolves to RoundedRectangleBorder (more square). A square button morphing into a fully round StadiumBorder when selected is incorrect. The token mapping or the token database values for selectedContainerShapeRound and selectedContainerShapeSquare should be corrected so that the square variant remains square-ish and the round variant remains round-ish when selected.

gemini-code-assist · 2026-08-25T19:57:48Z

+    return '''
+  @override
+  WidgetStateProperty<EdgeInsetsGeometry>? get padding =>
+    MaterialStatePropertyAll<EdgeInsetsGeometry>($_paddingSwitch);
+
+  @override
+  WidgetStateProperty<Size>? get minimumSize =>
+    MaterialStatePropertyAll<Size>($_minimumSizeSwitch);
+
+  @override
+  WidgetStateProperty<Size>? get maximumSize =>
+    const MaterialStatePropertyAll<Size>(Size.infinite);
+
+  @override
+  WidgetStateProperty<double>? get iconSize =>
+    MaterialStatePropertyAll<double>($_iconSizeSwitch);
+
+  @override
+  WidgetStateProperty<OutlinedBorder>? get shape =>
+    WidgetStateProperty.resolveWith((Set<WidgetState> states) {
+      if (states.contains(WidgetState.pressed)) {
+        return $_pressedShapeSwitch;
+      }
+      if (toggleable && states.contains(WidgetState.selected)) {
+        return $_selectedShapeSwitch;
+      }
+      return $_containerShapeSwitch;
+    });
+''';


Use WidgetStatePropertyAll instead of MaterialStatePropertyAll to align with the WidgetState API migration in Flutter. Since this template generates new code, it should use the modern non-deprecated API.

String get _sizeDependentProperties { return ''' @override WidgetStateProperty<EdgeInsetsGeometry>? get padding => WidgetStatePropertyAll<EdgeInsetsGeometry>($_paddingSwitch); @override WidgetStateProperty<Size>? get minimumSize => WidgetStatePropertyAll<Size>($_minimumSizeSwitch); @override WidgetStateProperty<Size>? get maximumSize => const WidgetStatePropertyAll<Size>(Size.infinite); @override WidgetStateProperty<double>? get iconSize => WidgetStatePropertyAll<double>($_iconSizeSwitch); @override WidgetStateProperty<OutlinedBorder>? get shape => WidgetStateProperty.resolveWith((Set<WidgetState> states) { if (states.contains(WidgetState.pressed)) { return $_pressedShapeSwitch; } if (toggleable && states.contains(WidgetState.selected)) { return $_selectedShapeSwitch; } return $_containerShapeSwitch; }); ''';

QuncCccccc · 2026-09-10T20:53:25Z

Converting this to draft. Will port this to main.

QuncCccccc · 2026-09-10T23:59:27Z

Ported the commits to #12832. Closing this PR.

github-actions Bot added triage-framework Should be looked at in framework triage p: material_ui labels Jul 1, 2026

QuncCccccc force-pushed the icon_button_m3e branch 5 times, most recently from d2adfa2 to 4b56b94 Compare July 7, 2026 00:26

QuncCccccc force-pushed the icon_button_m3e branch 4 times, most recently from 41d31eb to 08739af Compare July 16, 2026 19:16

QuncCccccc force-pushed the icon_button_m3e branch 2 times, most recently from 2d53a40 to 7585c20 Compare August 7, 2026 23:02

QuncCccccc requested review from elliette and removed request for elliette August 8, 2026 00:12

Add M3E IconButton

6589f90

QuncCccccc force-pushed the icon_button_m3e branch from 83f10c1 to bb4e01b Compare August 14, 2026 00:20

Rename IconButton M3E template

ca7c3e4

QuncCccccc force-pushed the icon_button_m3e branch from bb4e01b to ca7c3e4 Compare August 14, 2026 00:25

Add IconButton xSmall tap target coverage

2bb61e1

alex-medinsh mentioned this pull request Aug 17, 2026

☂️ Bring Material 3 Expressive to Flutter flutter/flutter#168813

Open

18 tasks

Piinks added triage-design Should be looked at in design triage and removed triage-framework Should be looked at in framework triage labels Aug 17, 2026

Rename IconButton M3E style variants

2bc07db

github-actions Bot added the triage-framework Should be looked at in framework triage label Aug 17, 2026

Rename M3E IconButton default internals

97329e3

Piinks removed the triage-framework Should be looked at in framework triage label Aug 17, 2026

Use padded tap target for M3E IconButton defaults

1cca05e

github-actions Bot added the triage-framework Should be looked at in framework triage label Aug 17, 2026

Document M3E IconButton tap target defaults

1753f51

QuncCccccc added 21 commits August 17, 2026 19:49

Refine ButtonSize API documentation

2a96f0c

Rephrase ButtonStyle size variant docs

84b2cd8

Simplify ButtonStyle size variant docs

9259994

Clarify IconButton width variant docs

bff0159

Clarify ButtonStyle shape variant docs

e4228ec

Polish IconButton variant style docs

97a9f18

Clarify IconButton M3E option docs

618b953

Simplify IconButton M3E option docs

4971afc

Separate IconButton M3E default docs

7b22aae

Inline IconButton variant style lookup

85289b9

Clean up IconButton M3E default variants

fd25bf9

Move IconButton M3E variant getters

cbdf5ac

Clarify IconButton M3E default constructors

aa5eaaa

Rename IconButton M3E variant enums

8440664

Clarify IconButton M3 defaults docs

a6f0d80

Move IconButton useMaterial3 TODO

4c51797

Simplify IconButton variant docs

85baafd

Clean up IconButton M3E tests

a772118

Apply M3E test theme defaults

ba4d52b

Simplify IconButton M3E test helper

388e748

Remove blank line after IconButton template import

54f53d3

elliette reviewed Aug 20, 2026

View reviewed changes

QuncCccccc marked this pull request as ready for review August 25, 2026 19:54

gemini-code-assist Bot reviewed Aug 25, 2026

View reviewed changes

QuncCccccc marked this pull request as draft September 10, 2026 20:53

QuncCccccc mentioned this pull request Sep 10, 2026

[material_ui] Add Material 3 Expressive IconButton #12832

Open

11 tasks

QuncCccccc closed this Sep 10, 2026

Navigation Menu

Uh oh!

[material_ui] Add Material 3 Expressive IconButton - #12093

[material_ui] Add Material 3 Expressive IconButton#12093
QuncCccccc wants to merge 31 commits into
flutter:m3e_migrationfrom
QuncCccccc:icon_button_m3e

QuncCccccc commented Jul 1, 2026 •

edited

Loading

Uh oh!

QuncCccccc commented Aug 19, 2026

Uh oh!

elliette Aug 20, 2026

Uh oh!

QuncCccccc Aug 20, 2026

Uh oh!

elliette Aug 20, 2026

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

gemini-code-assist Bot Aug 25, 2026

Uh oh!

gemini-code-assist Bot Aug 25, 2026

Uh oh!

QuncCccccc commented Sep 10, 2026

Uh oh!

QuncCccccc commented Sep 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

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

Uh oh!

TODO:

Pre-launch Checklist

Uh oh!

QuncCccccc commented Aug 19, 2026

Uh oh!

elliette Aug 20, 2026

Choose a reason for hiding this comment

Uh oh!

QuncCccccc Aug 20, 2026

Choose a reason for hiding this comment

Uh oh!

elliette Aug 20, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist Bot Aug 25, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Aug 25, 2026

Choose a reason for hiding this comment

Uh oh!

QuncCccccc commented Sep 10, 2026

Uh oh!

QuncCccccc commented Sep 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

QuncCccccc commented Jul 1, 2026 •

edited

Loading