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)

Answer 1

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) => [],
),

Answer 2

From the Flutter Docs for the PopopMenuButton class,

padding → EdgeInsetsGeometry Matches IconButton's 8 dps padding by default. In some cases, notably where this button appears as the trailing element of a list item, it's useful to be able to set the padding to zero.

You can change the padding to 0 as suggested by the docs.

Read More here - https://api.flutter.dev/flutter/material/PopupMenuButton-class.html

Answer 3

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.

Answer 4

A solution was provided but you have to edit non project files (PopupMenuItem class)

return InkWell(
      onTap: widget.enabled ? handleTap : null,
      child: Container(
        height: widget.height,
        padding: const EdgeInsets.symmetric(horizontal: _kHorizontalMenuPadding), // setting this to 0 worked 
        child: item,
      ),
    );

P.S: Not really recommended but still working

Answer 5

To remove Padding from PopUpMenu Button, Wrap it into Container and provide width as you want.

Container(
  width:20,
  child: PopupMenuButton( 
       // your Code is Here       
      ),
  )

Answer 6

Solution: Wrap it with SizedBox:

SizedBox(
  height:,
  child: Row(
    children: [
      PopupMenuButton(        
      )
    ],
  ),
)

Answer 7

You just have to supply an Icon component to its child property like below:

PopupMenuButton(
  child: Icon(
      Icons.more_vert,
    ),
  onSelected: (value) {},
  itemBuilder: (context) => [],
),

Answer 8

put it in a container work for me...

PopupMenuButton<...>(
          child: Container(
            child: Icon(Icons.more_vert, ),
          ),
          onSelected: (... kValue) {
            
          },
          itemBuilder: (BuildContext context) {
            return ... ;
          }
      )