Flutter popupmenubutton remove padding

by

Removing padding from Flutter PopupMenuButton

To remove padding from a Flutter PopupMenuButton, you can customize its underlying PopupMenuEntry widgets. By default, PopupMenuButton adds some padding around each entry to create spacing. Here’s how you can remove that padding:

1. Create a custom PopupMenuItem builder function that returns a ListTile with zero padding. For example: 

<Widget> _buildPopupMenuItemList() {
  return [
    PopupMenuItem(
      child: ListTile(
        contentPadding: EdgeInsets.zero,
        title: Text('Item 1'),
      ),
    ),
    PopupMenuItem(
      child: ListTile(
        contentPadding: EdgeInsets.zero,
        title: Text('Item 2'),
      ),
    ),
    PopupMenuItem(
      child: ListTile(
        contentPadding: EdgeInsets.zero,
        title: Text('Item 3'),
      ),
    ),
  ];
}

2. In your PopupMenuButton, set the itemBuilder property to the custom builder function you created. For example: 

PopupMenuButton(
  itemBuilder: (BuildContext context) {
    return _buildPopupMenuItemList();
  },
  // ... other properties
)

By using this approach, you can create PopupMenuButtons without any padding between the items.

Leave a comment