How do I remove Flutter IconButton big padding?

It's not so much that there's a padding there. IconButton is a Material Design widget which follows the spec that tappable objects need to be at least 48px on each side. You can click into the IconButton implementation from any IDEs.

You can also semi-trivially take the icon_button.dart source-code and make your own IconButton that doesn't follow the Material Design specs since the whole file is just composing other widgets and is just 200 lines that are mostly comments.


Simply pass an empty BoxConstrains to the constraints property and a padding of zero.

IconButton(
    padding: EdgeInsets.zero,
    constraints: BoxConstraints(),
)

You have to pass the empty constrains because, by default, the IconButton widget assumes a minimum size of 48px.


Two ways to workaround this issue.

Still Use IconButton

Wrap the IconButton inside a Container which has a width.

For example:

Container(
  padding: const EdgeInsets.all(0.0),
  width: 30.0, // you can adjust the width as you need
  child: IconButton(
  ),
),

Use GestureDetector instead of IconButton

You can also use GestureDetector instead of IconButton, recommended by Shyju Madathil.

GestureDetector( onTap: () {}, child: Icon(Icons.volume_up) )