Remove padding from Flutter PopupMenuButton

Question

Any ideas how I can remove the huge padding from a Flutter PopupmenuButton? Something like a shrinkWrap or even an alternative widget that can use? It's ruining the alignment of my elements.

I tried setting the padding to 0 but no effect at all.

padding: EdgeInsets.all(0)

Solution 1

If you carefully see the padding is not in the PopupmenuButton the padding there is coming from the IconButton.IconButton is a Material Design widget that follows the spec that tappable objects need to be at least 48px on each side. So it's better you create your own widget to reduce the padding.

A simple workaround to avoid it will be to use Icon wrapped with GestureDetector.

You can refer to this post for more details.

Solution 2

Supplying child rather than icon will allow you to use a custom widget with any desired size/padding.

Note: Icons.more_vert carries its own padding, but any custom icon can be used to avoid that.

PopupMenuButton(
  child: Container(
    height: 36,
    width: 48,
    alignment: Alignment.centerRight,
    child: Icon(
      Icons.more_vert,
    ),
  ),
  onSelected: (value) {},
  itemBuilder: (context) => [],
),