Taha Tesser
96e02c61dc
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
- 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.
### After
- Default horizontal padding is updated for Material 3.
- `PopupMenuItem` & `CheckedPopupMenuItem` override `ListTile` padding (similar to how `ExpansionTile` overrides `ListTile` text and icon color.
2023-08-10 16:05:03 +00:00
