Skip to content

Conversation

@TahaTesser
Copy link
Member

fixes PopupMenuItem adds redundant padding when using ListItem

Description

  • Fixed redundant ListTile padding when using CheckedPopupMenuItem or PopupMenuItem with the ListTile child for complex popup menu items as suggested in the docs.
  • Updated default horizontal padding for popup menu items.

Code sample

expand to view the code sample
import 'package:flutter/material.dart';

/// Flutter code sample for [PopupMenuButton].

// This is the type used by the popup menu below.
enum SampleItem { itemOne, itemTwo, itemThree }

void main() => runApp(const PopupMenuApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const PopupMenuExample(),
    );
  }
}

class PopupMenuExample extends StatefulWidget {
  const PopupMenuExample({super.key});

  @override
  State<PopupMenuExample> createState() => _PopupMenuExampleState();
}

class _PopupMenuExampleState extends State<PopupMenuExample> {
  SampleItem? selectedMenu;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('PopupMenuButton')),
      body: Center(
        child: SizedBox(
          width: 150,
          height: 100,
          child: Align(
            alignment: Alignment.topLeft,
            child: PopupMenuButton<SampleItem>(
              initialValue: selectedMenu,
              // Callback that sets the selected popup menu item.
              onSelected: (SampleItem item) {
                setState(() {
                  selectedMenu = item;
                });
              },
              itemBuilder: (BuildContext context) =>
                  <PopupMenuEntry<SampleItem>>[
                const PopupMenuItem<SampleItem>(
                  value: SampleItem.itemOne,
                  child: Text('PopupMenuItem'),
                ),
                const CheckedPopupMenuItem<SampleItem>(
                  checked: true,
                  value: SampleItem.itemTwo,
                  child: Text('CheckedPopupMenuItem'),
                ),
                const PopupMenuItem<SampleItem>(
                  value: SampleItem.itemOne,
                  child: ListTile(
                    leading: Icon(Icons.cloud),
                    title: Text('ListTile'),
                    contentPadding: EdgeInsets.zero,
                    trailing: Icon(Icons.arrow_right_rounded),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Before

image

  • Default horizontal padding is the same as M2 (16.0), while the specs use a smaller value (12.0)
  • ListTile nested by default in CheckedPopupMenuItem has redundant padding
  • PopupMenuItem using ListTile as a child for complex menu items contains redundant padding.

Screenshot 2023-07-31 at 17 17 08

After

  • Default horizontal padding is updated for Material 3.
  • PopupMenuItem & CheckedPopupMenuItem override ListTile padding (similar to how ExpansionTile overrides ListTile text and icon color.

Screenshot 2023-07-31 at 17 17 25

Pre-launch Checklist

  • I read the Contributor Guide and followed the process outlined there for submitting PRs.
  • 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.
  • All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

@github-actions github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Jul 31, 2023
@TahaTesser TahaTesser force-pushed the pop_up_menu_item_padding branch from c144ecf to 09ff4fa Compare July 31, 2023 17:44
@rydmike

This comment was marked as resolved.

@TahaTesser TahaTesser force-pushed the pop_up_menu_item_padding branch from 09ff4fa to 01fe678 Compare August 1, 2023 07:39
@TahaTesser

This comment was marked as resolved.

@TahaTesser TahaTesser force-pushed the pop_up_menu_item_padding branch 2 times, most recently from 293037d to 41005cc Compare August 2, 2023 15:00
@github-actions github-actions bot added a: text input Entering text in a text field or keyboard related problems a: internationalization Supporting other languages or locales. (aka i18n) labels Aug 2, 2023
@TahaTesser
Copy link
Member Author

This is ready for review @QuncCccccc

… padding and update default horizontal padding for Material 3
@TahaTesser TahaTesser force-pushed the pop_up_menu_item_padding branch from 41005cc to dda92fa Compare August 10, 2023 09:05
Copy link
Contributor

@HansMuller HansMuller left a comment

Choose a reason for hiding this comment

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

LGTM

I'm going to land this. It's possible that it will cause some golden image tests to fail, although the presubmits are all happy.

@HansMuller HansMuller added the autosubmit Merge PR when tree becomes green via auto submit App label Aug 10, 2023
@auto-submit auto-submit bot merged commit 96e02c6 into flutter:master Aug 10, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 10, 2023
…istTile` padding and update default horizontal padding for Material 3 (flutter/flutter#131609)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 10, 2023
…istTile` padding and update default horizontal padding for Material 3 (flutter/flutter#131609)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 10, 2023
…istTile` padding and update default horizontal padding for Material 3 (flutter/flutter#131609)
@TahaTesser TahaTesser deleted the pop_up_menu_item_padding branch August 10, 2023 17:15
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 10, 2023
…istTile` padding and update default horizontal padding for Material 3 (flutter/flutter#131609)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 10, 2023
…istTile` padding and update default horizontal padding for Material 3 (flutter/flutter#131609)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 10, 2023
…istTile` padding and update default horizontal padding for Material 3 (flutter/flutter#131609)
CaseyHillers added a commit that referenced this pull request Aug 13, 2023
…istTile` padding and update default horizontal padding for Material 3 (#131609)"

This reverts commit 96e02c6.
CaseyHillers pushed a commit that referenced this pull request Aug 13, 2023
…istTile` padding and update default horizontal padding for Material 3" (#132457)

Reverts #131609

b/295497265 - This broke Google Testing. We'll need the internal patch
before landing as there's a large number of customer codebases impacted.
@TahaTesser TahaTesser mentioned this pull request Aug 15, 2023
8 tasks
auto-submit bot pushed a commit that referenced this pull request Aug 16, 2023
This relands #131609

---

fixes [`PopupMenuItem` adds redundant padding when using `ListItem`](#128553)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 15, 2023
…istTile` padding and update default horizontal padding for Material 3 (flutter/flutter#131609)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

a: internationalization Supporting other languages or locales. (aka i18n) a: text input Entering text in a text field or keyboard related problems autosubmit Merge PR when tree becomes green via auto submit App f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

PopupMenuItem adds redundant padding when using ListItem

3 participants