PopupMenuItem adds redundant padding when using ListItem

Is there an existing issue for this?

I have searched the existing issues
I have read the guide to filing a bug

Steps to reproduce

Use a PopupMenuItem that uses a ListTile (Could be a custom one, or CheckedPopupMenuItem)

Expected results

For the item to follow 12dp horizontal padding as mentioned in the material spec without further configuration.

Actual results

The item is horizontally padded making the positioning out-of-spec. This could be resolved by removing the padding passed to the PopupMenuItem.

Code sample

import 'package:flutter/material.dart';

void main() {
	runApp(const App());
}

class App extends StatelessWidget {
	const App({super.key});

	@override
	Widget build(context) {
		return MaterialApp(
			theme: ThemeData.light(useMaterial3: true),
			home: Scaffold(body: Center(child: PopupMenuButton(
				offset: const Offset(0, 56),
				itemBuilder: (context, ) => [
					const CheckedPopupMenuItem(
						checked: true,
						child: Text("checked"),
					),
					const PopupMenuItem(
						child: ListTile(
							leading: Icon(Icons.check_rounded),
							title: Text("checked"),
						),
					),
					const PopupMenuItem(
						padding: EdgeInsets.symmetric(horizontal: 0),
						child: ListTile(
							leading: Icon(Icons.logout),
							title: Text("Logout"),
						),
					)
				]
			)))
		);
	}
}

Screenshots or Video

No response

Logs

No response

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.10.2, on Arch Linux 6.3.5-arch1-1, locale en_US.UTF-8)
    • Flutter version 3.10.2 on channel stable at /home/<REDACTED>/Sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 9cd3d0d9ff (2 weeks ago), 2023-05-23 20:57:28 -0700
    • Engine revision 90fa3ae28f
    • Dart version 3.0.2
    • DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0-rc2)
    • Android SDK at /opt/android-sdk
    • Platform android-33, build-tools 34.0.0-rc2
    • Java binary at: /usr/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.7+7)
    • All Android licenses accepted.

[✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.

[✓] Linux toolchain - develop for Linux desktop
    • clang version 15.0.7
    • cmake version 3.26.4
    • ninja version 1.11.1
    • pkg-config version 1.8.1

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/linux#android-setup for detailed instructions).

[✓] Connected device (2 available)
    • <REDACTED> (mobile) • <REDACTED> • android-arm64 • Android 12 (API 31)
    • Linux (desktop)     • linux      • linux-x64     • Arch Linux 6.3.5-arch1-1

[✓] Network resources
    • All expected network resources are available.

~~FWIW, I feel like PopupMenu take way too much horizontal space when ListTile is used. Likely because how ListTiles find its minimum intrinsic width.~~ I forgot constraints exist.

Oh, apparently label styles are wrong too.

@Curstantine

@Curstantine
Thanks for the report. From the code you shared, it seems you have explicitly added the padding to one of the ListTile which is causing the menu item to mis-align. If you remove the padding, it aligns properly with other menus.

const PopupMenuItem(
              //  padding: EdgeInsets.symmetric(horizontal: 0),
                child: ListTile(
                  leading: Icon(Icons.logout),
                  title: Text("Logout"),
                ),
              )

Is this correct interpretation of the issue or did I miss anything ?

Oh, apparently label styles are wrong too.

Can you also elaborate on this ?

@Curstantine

@Curstantine Thanks for the report. From the code you shared, it seems you have explicitly added the padding to one of the ListTile which is causing the menu item to mis-align. If you remove the padding, it aligns properly with other menus.

It does align, yes, but in order for the MenuItem to be with spec, it only can have 12dp horizontal padding. (Which was why I removed the padding; for displaying)

As an example, check:

Material 3 Compose Sample App:
Reproducible sample added with the issue on dart pad:

Oh, apparently label styles are wrong too.
Can you also elaborate on this ?

The styles applied when using a ListTile on a Menu is the ListTile's default text style, instead of the text style mentioned in the Menu spec. Creating a distinctive size difference when compared to the Compose sample.

Menu spec
ListTile spec

@darshankawar

Thanks for the feedback. When I verified earlier, the mis-alignment also occured without m3, so it seems not be specific to material 3. So curious to know what should be the expected behavior in this case ?

The styles applied when using a ListTile on a Menu is the ListTile's default text style, instead of the text style mentioned in the Menu spec. Creating a distinctive size difference when compared to the Compose sample.

I suggest you to file a new issue for this so that we can track it properly.

I think M2 implemetation is wrong too. The only difference I can see from M2 -> M3 is just the elevation and background colors.

I genuinely think that using a ListTile just to add an icon to the menu is way too excessive, and more to the point, it adds properties to the MenuItem that aren't in-spec with M2/M3.

As for the behavior,

PopupMenuItem overrides the ListTileTheme so it can resolve the padding correctly.
PopupMenuItem adds properties to add leading/trailing icons along with the label to refrain from depending on ListTile.

@Curstantine

@Curstantine
According to PopupMenuItem documentation, if padding is null, horizontal padding defaults to 16.0 on both sides.

https://api.flutter.dev/flutter/material/PopupMenuItem/padding.html

So we probably don't need to explicitly add padding and can use the implementation without it as you have shared earlier, ie:

const PopupMenuItem(
	 child: ListTile(
	leading: Icon(Icons.check_rounded),
	title: Text("checked"),
	),
),

Ah, I might've missed that. Though again, as the documentation suggests, it's reccomended to use ListItem to add leadingIcon and trailingIcon, so the padding that defaults to 16dp on both sides should be null when the child is a ListItem. Else, setting up a ListItem becomes a hassle since you have to repetitively set the padding property of the PopupMenuItem.

Thanks for the update. Have you looked at https://api.flutter.dev/flutter/material/ListTile/contentPadding.html to see if it helps in your case ?

[Reland] #131609 (#132555)

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 -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

`PopupMenuItem` adds redundant padding when using `ListItem` #128553

Is there an existing issue for this?

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

27 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

PopupMenuItem adds redundant padding when using ListItem #128553

Description

Is there an existing issue for this?

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Activity

Curstantine commented on Jun 9, 2023

darshankawar commented on Jun 9, 2023

Curstantine commented on Jun 9, 2023

darshankawar commented on Jun 9, 2023

Curstantine commented on Jun 9, 2023

darshankawar commented on Jun 12, 2023

Curstantine commented on Jun 12, 2023

darshankawar commented on Jun 12, 2023

27 remaining items

github-actions commented on Aug 30, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

`PopupMenuItem` adds redundant padding when using `ListItem` #128553