CODEWITHSUNDEEP
flutterpopupmenubutton
Jhourlad Estrella
Jhourlad Estrella

Reputation: 3670

Remove padding from Flutter PopupMenuButton

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)

enter image description here

enter image description here

Upvotes: 13

Views: 14054

Answers (9)

Muhammad Rashad
Muhammad Rashad

Reputation: 1

You can use these properties should be fine:

PopupMenuButton(
        padding: EdgeInsets.zero,
        style: ButtonStyle(
          tapTargetSize: MaterialTapTargetSize.shrinkWrap,
          padding: WidgetStatePropertyAll(EdgeInsets.zero),
          visualDensity: VisualDensity.compact,
        ),

Upvotes: 0

Grafritz Design
Grafritz Design

Reputation: 728

put it in a container work for me...

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

Upvotes: 0

David Mukopa
David Mukopa

Reputation: 277

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


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

Upvotes: 4

Vishal_VE
Vishal_VE

Reputation: 2127

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       
      ),
  )

Upvotes: -1

honeal
honeal

Reputation: 1599

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

Upvotes: 38

Imen A.
Imen A.

Reputation: 837

Solution: Wrap it with SizedBox:

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

Upvotes: 0

Didier Peran Ganthier
Didier Peran Ganthier

Reputation: 577

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

Upvotes: 0

Shubham Gupta
Shubham Gupta

Reputation: 1997

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.

Upvotes: 1

Manan Jain
Manan Jain

Reputation: 1

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

Upvotes: 0

Related Questions