• 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
Name
Last commit
Last update
..
bin Loading commit data...
data Loading commit data...
generated Loading commit data...
lib Loading commit data...
test Loading commit data...
README.md Loading commit data...
pubspec.yaml Loading commit data...
test.json Loading commit data...