Skip to content

[material_ui] Add Material 3 Expressive IconButton - #12832

Open
QuncCccccc wants to merge 32 commits into
flutter:mainfrom
QuncCccccc:icon_button_m3e_main
Open

[material_ui] Add Material 3 Expressive IconButton#12832
QuncCccccc wants to merge 32 commits into
flutter:mainfrom
QuncCccccc:icon_button_m3e_main

Conversation

@QuncCccccc

@QuncCccccc QuncCccccc commented Sep 10, 2026

Copy link
Copy Markdown
Contributor

This PR is to port #12093 which was created in m3e_migration feature branch.

The original PR description

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.
image

Pre-Review 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] page, which explains my responsibilities.
  • I read and followed the [relevant style guides] and ran [the auto-formatter].
  • I signed the [CLA].
  • The title of the PR starts with the name of the package surrounded by square brackets, e.g. [shared_preferences]
  • I [linked to at least one issue that this PR fixes] in the description above.
  • I followed [the version and CHANGELOG instructions], using [semantic versioning] and the [repository CHANGELOG style], or I have commented below to indicate which documented exception this PR falls under[^1].
  • I updated/added any relevant documentation (doc comments with ///).
  • I added new tests to check the change I am making, or I have commented below to indicate which [test exemption] this PR falls under[^1].
  • All existing and new tests are passing.

@github-actions github-actions Bot added p: material_ui triage-design Should be looked at in design triage labels Sep 10, 2026
@QuncCccccc QuncCccccc changed the title [material_ui] Add Material 3 Expressive IconButton- #12093 [material_ui] Add Material 3 Expressive IconButton Sep 10, 2026
@QuncCccccc
QuncCccccc marked this pull request as ready for review September 10, 2026 23:58
@QuncCccccc QuncCccccc added the CICD Run CI/CD label Sep 10, 2026

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Code Review

This pull request introduces Material 3 Expressive support for the IconButton component. It adds new size, width, and shape variants, updates the ButtonStyle class to include these new properties, and implements the necessary defaults in a generated file. A code review comment correctly identified that the generated code uses the deprecated MaterialStatePropertyAll instead of the preferred WidgetStatePropertyAll, which should be updated to ensure modern API usage.

Comment on lines +309 to +339
String get _sizeDependentProperties {
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;
});
''';
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

medium

In modern Flutter, MaterialStatePropertyAll is deprecated in favor of WidgetStatePropertyAll. Since this is a new template generating new code, we should use WidgetStatePropertyAll to avoid deprecation warnings.

Please also apply this replacement to other template methods in this file, such as _generateStandardDefaults, _generateFilledDefaults, _generateFilledTonalDefaults, and _generateOutlinedDefaults.

  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;
    });
''';
  }

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

Labels

CICD Run CI/CD p: material_ui triage-design Should be looked at in design triage

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant