• 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
..
animation Loading commit data...
cupertino Loading commit data...
dart Loading commit data...
examples Loading commit data...
foundation Loading commit data...
gestures Loading commit data...
harness Loading commit data...
material Loading commit data...
painting Loading commit data...
physics Loading commit data...
rendering Loading commit data...
scheduler Loading commit data...
semantics Loading commit data...
services Loading commit data...
widgets Loading commit data...
_goldens_io.dart Loading commit data...
_goldens_web.dart Loading commit data...
analysis_options.yaml Loading commit data...
flutter_test_config.dart Loading commit data...
image_data.dart Loading commit data...