Repository navigation
MenuItemButton always clips its leadingIcon, hiding decorations such as Badge #192732
Description
Steps to reproduce
When setting clipBehavior to Clip.none on a MenuItemButton, the property is not respected. This seems to be because the internal widget _MenuItemLabel is creating its own ClipRect which has the default clipBehavior of Clip.hardEdge.
This causes issues when the icon has a badge:
Expected results
A menu item with Clip.none should not clip the icon's badge.
Actual results
The icon's badge is always clipped.
Code sample
Code sample
import 'package:material_ui/material_ui.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text('Test'),
actions: [
IconButton(
icon: const Badge(
label: Text('X'),
backgroundColor: Colors.blueAccent,
child: Icon(Icons.receipt),
),
onPressed: () {},
),
],
),
body: Center(
child: MenuAnchor(
builder: (_, controller, _) => IconButton(
onPressed: () {
if (controller.isOpen) {
controller.close();
} else {
controller.open();
}
},
icon: Icon(Icons.adaptive.more),
),
menuChildren: [
MenuItemButton(
clipBehavior: Clip.hardEdge,
leadingIcon: const Badge(
label: Text('X'),
backgroundColor: Colors.redAccent,
child: Icon(Icons.receipt),
),
onPressed: () {},
child: Text('Clip.hardEdge'),
),
MenuItemButton(
clipBehavior: Clip.none,
leadingIcon: const Badge(
label: Text('X'),
backgroundColor: Colors.blueAccent,
child: Icon(Icons.receipt),
),
onPressed: () {},
child: Text('Clip.none'),
),
],
),
),
),
);
}
}
Screenshots or Video
Screenshots / Video demonstration
[Upload media here]
Logs
Logs
[Paste your logs here]Flutter Doctor output
Doctor output
[✓] Flutter (Channel stable, 3.47.4, on macOS 26.5.2 25F84 darwin-arm64, locale en-DE) [636ms]
• Flutter version 3.47.4 on channel stable at <redacted>
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 9584c6713b (4 days ago), 2026-09-10 15:25:10 -0700
• Engine revision 06a2e2a110
• Dart version 3.13.3
• DevTools version 2.60.0
• Feature flags: enable-web, enable-linux-desktop, enable-macos-desktop, enable-windows-desktop, enable-android, enable-ios,
cli-animations, enable-native-assets, enable-record-use, enable-swift-package-manager, omit-legacy-version-file,
enable-lldb-debugging, enable-uiscene-migration
[✓] Android toolchain - develop for Android devices (Android SDK version 36.0.0) [2.4s]
• Android SDK at <redacted>
• Emulator version 36.2.12.0 (build_id 14214601) (CL:N/A)
• Platform android-37.0, build-tools 36.0.0
• ANDROID_HOME = <redacted>
• Java binary at: /opt/homebrew/opt/openjdk@17/bin/java
This JDK is specified in your Flutter configuration.
To change the current JDK, run: `flutter config --jdk-dir="path/to/jdk"`.
• Java version OpenJDK Runtime Environment Homebrew (build 17.0.19+0)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 26.6) [1,548ms]
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 17F113
• CocoaPods version 1.16.2
[✓] Chrome - develop for the web [6ms]
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Network resources [410ms]
• All expected network resources are available.
• No issues found!
Activity
mbcorona commentedon Sep 14, 2026
Hi @JetA2, thanks, reproduced.
A leadingIcon badge is always clipped by the menu item, with no way to opt out. Routing to the design team to decide whether thats intended or should be adjustable.
dkwingsmt commentedon Sep 22, 2026
I agree that this looks confusing. However, I'm wondering if the content is clipped by
MenuItemButtonat all. Because if the padding is created by, notMenuItemButtonitself, but the list containing it, then there's no way for its content to overflow out ofMenuItemButton. To achieve what you want, you'll want to removing the padding aroundMenuItemButtons. Can you take a look?QuncCccccc commentedon Sep 23, 2026
Hi @JetA2, thanks for filing this issue! I think
MenuItemButton.clipBehavioris respected but for a different purpose. It is basically aButtonStyleButton.clipBehavior, so when we set toClip.hardEdge/Clip.antiAlias, anything painting outside of the button's shape will get clipped. For example, the code below shows a stadium-shape button, but changing it toClip.nonewill make the button have an orange rectangle shape.But I think this issue is real and the badge should not be clipped. The badge is cut by a hard-coded
ClipRectin_MenuItemLabelhttps://github.com/flutter/packages/blob/main/packages/material_ui/lib/src/menu_anchor.dart#L3330-L3348, and only leadings is wrapped in it; trailings are not, so aBadgeon trailings should be fine.[-]MenuItemButton does not respect clipBehavior property[/-][+]`MenuItemButton` always clips its `leadingIcon`, hiding decorations such as `Badge`[/+][material_ui] Don't clip MenuItemButton.leadingIcon (flutter#12986)
github-actions commentedon Oct 9, 2026
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.