Sitelet https://github.com/flutter/packages/pull/12986
Skip to content

[material_ui] Don't clip MenuItemButton.leadingIcon - #12986

Merged
auto-submit[bot] merged 3 commits into
flutter:mainfrom
QuncCccccc:menu-item-button-leading-icon-clip
Sep 25, 2026
Merged

auto-submit[bot] merged 3 commits into
flutter:mainfrom
QuncCccccc:menu-item-button-leading-icon-clip

Conversation

@QuncCccccc

Copy link
Copy Markdown
Contributor

_MenuItemLabel wrapped the leading Row in a hard-coded ClipRect when overflowAxis is vertical, which clipped leadingIcon to its own bounds. This clips any decoration painting outside those bounds, such as a Badge.

This PR is to remove the ClipRect so leading icons won't be incorrectly clipped.

Fixes flutter/flutter#192732

Before
badge_before_real

After
badge_after_real

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 23, 2026
@QuncCccccc QuncCccccc added the CICD Run CI/CD label Sep 23, 2026
@QuncCccccc
QuncCccccc force-pushed the menu-item-button-leading-icon-clip branch 2 times, most recently from b0f4ad6 to 6707fc5 Compare September 23, 2026 01:52
`_MenuItemLabel` wrapped the leading `Row` in a hard-coded `ClipRect`
when `overflowAxis` is vertical, which clipped `leadingIcon` to its own
bounds. This hid any decoration painting outside those bounds, such as a
`Badge`, and shaved the antialiased edge off ordinary icons.

`trailingIcon`, `shortcut`, and `submenuIcon` are not wrapped, so the
leading slot was the odd one out.

The inner `ClipRect` around the label, which is what actually bounds
long text, is unchanged.
@QuncCccccc
QuncCccccc force-pushed the menu-item-button-leading-icon-clip branch from 6707fc5 to d6bce8d Compare September 23, 2026 01:54
@QuncCccccc
QuncCccccc marked this pull request as ready for review September 23, 2026 16:51

@elliette elliette left a comment •

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.

One optional suggestion otherwise LGTM

);

// The label itself is still clipped so that long labels truncate.
expect(find.ancestor(of: find.text('Item'), matching: find.byType(ClipRect)), findsOneWidget);

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.

[optional] Could we test with a long string to make sure it is clipped?

@QuncCccccc QuncCccccc added the autosubmit Merge PR when tree becomes green via auto submit App label Sep 25, 2026
@auto-submit
auto-submit Bot merged commit f0c985d into flutter:main Sep 25, 2026
13 checks passed
github-merge-queue Bot pushed a commit to flutter/flutter that referenced this pull request Sep 28, 2026
flutter/packages@e55e7ac...ba0364a

2026-09-26 stuartmorgan@google.com [google_maps_flutter] Indicate that
default iOS impl is discoraged (flutter/packages#12872)
2026-09-26 36861262+QuncCccccc@users.noreply.github.com [material_ui]
Add Material 3 Expressive IconButton (flutter/packages#12832)
2026-09-25 jessiewong401@gmail.com Plugin example apps to 9.3.1
(flutter/packages#13019)
2026-09-25 36861262+QuncCccccc@users.noreply.github.com [material_ui]
Don't clip MenuItemButton.leadingIcon (flutter/packages#12986)
2026-09-25 36861262+QuncCccccc@users.noreply.github.com [material_ui]
Migrate M3 ExpansionTile template to use new gen_defaults
(flutter/packages#12920)
2026-09-25 149176071+m1roxx@users.noreply.github.com
[two_dimensional_scrollables] Exclude trailing pinned spans from the
non-pinned range (flutter/packages#12666)
2026-09-25 36861262+QuncCccccc@users.noreply.github.com [material_ui]
Migrate M3 Drawer template to use new gen_defaults
(flutter/packages#12916)
2026-09-25 36861262+QuncCccccc@users.noreply.github.com [material_ui]
Migrate M3 Divider template to use new gen_defaults
(flutter/packages#12915)
2026-09-25 instantni.med@gmail.com [google_maps_flutter_web] Fix
AdvancedMarker anchors on web (flutter/packages#11966)

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 flutter-ecosystem@google.com 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

autosubmit Merge PR when tree becomes green via auto submit App 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.

MenuItemButton always clips its leadingIcon, hiding decorations such as Badge

3 participants