How to Remove IconButton Big Padding?

• General

IconButton is a Material Design widget that follows the spec that tappable objects need to be at least 48px on each side. You can click on the icon button implementation from any IDEs. So in today’s article, we will go through how to Remove IconButton Big Padding?

Tips to Know How to Remove IconButton Big Padding?

Still Use IconButton

Wrap the IconButton inside a Container that has a width.

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

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

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

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

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

Wrapping the IconButton in a container simply won’t work, instead, use ClipRRect and add a material Widget with an Inkwell, just make sure to give the correct widget enough border Radius

ClipRRect(
    borderRadius: BorderRadius.circular(50),
    child : Material(
        child : InkWell(
            child : Padding(
                padding : const EdgeInsets.all(5),
                child : Icon(
                    Icons.favorite_border,
                    ),
                ),
            onTap : () {},
            ),
        ),
    )

Here’s a solution to get rid of any extra padding, using InkWell in place of IconButton:

Widget backButtonContainer = InkWell(
    child: Container(
      child: const Icon(
        Icons.arrow_upward,
        color: Colors.white,
        size: 35.0,
      ),
    ),
    onTap: () {
      Navigator.of(_context).pop();
    });

Instead of removing padding around an IconButton you could simply use an Icon and wrap it with a GestureDetector or InkWell as

GestureDetector(
   ontap:(){}
   child:Icon(...)
);

In case you want the ripple/Ink splash effect as the IconButton provides on click-wrap it with an InkWell

InkWell(
   splashColor: Colors.red,
   child:Icon(...)
   ontap:(){}
)

though the Ink thrown on the Icon in the second approach won’t be so accurate as for the IconButton, you may need to do some custom implementation for that.

A better solution is to use Transform.scale like this:

Transform.scale(
  scale: 0.5, // set your value here
  child: IconButton(icon: Icon(Icons.smartphone), onPressed: () {}),
)

You can use ListTile it gives you a default space between text and Icons that would fit your needs

ListTile(
         leading: Icon(Icons.add), //Here Is The Icon You Want To Use
         title: Text('GFG title',textScaleFactor: 1.5,), //Here Is The Text Also
         trailing: Icon(Icons.done),
         ),

Conclusion:

Hope you have learned from this article!!! Keep Fluttering!!!

In this article, we have been through how to Remove IconButton Big Padding…

Do not forget to drop your valuable suggestions/feedback. We would love to assist you.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.