Skip to content

[material_ui] Add Material 3 Expressive IconButton - #12093

Draft
QuncCccccc wants to merge 31 commits into
flutter:m3e_migrationfrom
QuncCccccc:icon_button_m3e
Draft

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

Conversation

@QuncCccccc

@QuncCccccc QuncCccccc commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

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

  • I read the [Contributor Guide] and followed the process outlined there for submitting PRs.
  • I read the [AI contribution guidelines] and understand my responsibilities, or I am not using AI tools.
  • I read the [Tree Hygiene] wiki page, which explains my responsibilities.
  • I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement].
  • I signed the [CLA].
  • I listed at least one issue that this PR fixes in the description above.
  • I updated/added relevant documentation (doc comments with ///).
  • I added new tests to check the change I am making, or this PR is [test-exempt].
  • I followed the [breaking change policy] and added [Data Driven Fixes] where supported.
  • All existing and new tests are passing.

@github-actions github-actions Bot added triage-framework Should be looked at in framework triage p: material_ui labels Jul 1, 2026
@QuncCccccc
QuncCccccc force-pushed the icon_button_m3e branch 5 times, most recently from d2adfa2 to 4b56b94 Compare July 7, 2026 00:26
@QuncCccccc
QuncCccccc force-pushed the icon_button_m3e branch 4 times, most recently from 41d31eb to 08739af Compare July 16, 2026 19:16
@QuncCccccc
QuncCccccc force-pushed the icon_button_m3e branch 2 times, most recently from 2d53a40 to 7585c20 Compare August 7, 2026 23:02
@QuncCccccc
QuncCccccc requested review from elliette and removed request for elliette August 8, 2026 00:12
@Piinks 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
@github-actions github-actions Bot added the triage-framework Should be looked at in framework triage label Aug 17, 2026
@Piinks Piinks removed the triage-framework Should be looked at in framework triage label Aug 17, 2026
@github-actions github-actions Bot added the triage-framework Should be looked at in framework triage label Aug 17, 2026
@QuncCccccc

Copy link
Copy Markdown
Contributor Author

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:)

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

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

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

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oops good catch!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

p: material_ui triage-design Should be looked at in design triage triage-framework Should be looked at in framework triage

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants