• Taha Tesser's avatar
    Fix `PopupMenuItem` & `CheckedPopupMenuItem` has redundant `ListTile` padding... · 96e02c61
    Taha Tesser authored
    Fix `PopupMenuItem` & `CheckedPopupMenuItem` has redundant `ListTile` padding and update default horizontal padding for Material 3 (#131609)
    
    fixes [`PopupMenuItem` adds redundant padding when using `ListItem`](https://github.com/flutter/flutter/issues/128553)
    
    ### 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
    
    <details> 
    <summary>expand to view the code sample</summary> 
    
    ```dart
    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),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      }
    }
    ``` 
    	
    </details>
    
    ### Before
    
    ![image](https://github.com/flutter/flutter/assets/48603081/aad15ffb-ca11-4997-81d1-b46288161a4e)
    
    - 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](https://github.com/flutter/flutter/assets/48603081/75ad1fe5-e051-42ba-badf-e20c799dee96)
    
    ### 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](https://github.com/flutter/flutter/assets/48603081/288cf892-5b51-4365-9855-5ef0ed2928e9)
    96e02c61
popup_menu_test.dart 125 KB