Reduce padding in app bar buttons in flutter

Question

How can I reduce spacing between button ?

You can see four buttons on app bar takes so much space, I have tried Rows. but not worked

Below is my code --

 AppBar(
  backgroundColor: Colors.deepOrange,
  iconTheme: new IconThemeData(color: Colors.white),
  title: Text(
    titleString,
    style: TextStyle(color: Colors.white),
  ),

  actions: <Widget>[

    IconButton(

      icon: Icon(
        Icons.search,
        color: Colors.white,
      ),
      //iconSize: 20,
      onPressed: null,
    ),
    IconButton(
      icon: Icon(
        Icons.notifications_none,
        color: Colors.white,
      ),
     // iconSize: 20,

      onPressed: null,
    ),
    //Add more icon here

  ],
);

Adding all icons in Row & setting axis size as min.. but doesn't work — Amit, Jan 31 '20 at 11:25

score 6 · Answer 1 · answered Dec 04 '20 at 04:07

You can use VisualDensity and padding arguments together to reduce things:

actions: <Widget>[

IconButton(
  visualDensity: VisualDensity(horizontal: -4.0, vertical: -4.0),
  padding: EdgeInsets.zero,
  icon: Icon(
    Icons.search,
    color: Colors.white,
  ),
  //iconSize: 20,
  onPressed: null,
),
//Add more icon here

],

This worked in my app at least. Hope it's helpful!

score 3 · Answer 2 · answered Jan 31 '20 at 11:37

The problem is with the IconButton Widget. by default IconButton has a size of 48x48 pixels size and you can read about it in the top answer of this question.

A workaround would be to use the GestureDetector widget to handle your onPressed() method. Below is an example.

actions: <Widget>[
          GestureDetector(
              onTap: (){
                //your code
              },
              child: Icon(Icons.search)
          ),
          GestureDetector(
              onTap: (){},
              child: Icon(Icons.notifications)
          )
          //Add more icon here
        ],

score 0 · Answer 3 · answered Jan 31 '20 at 12:53

Try using sizedbox

Example

    Padding(
      padding: const EdgeInsets.all(5.0),
      child: SizedBox.fromSize(
        size: Size(25, 20), // button width and height
        child: InkWell(
          splashColor: Colors.white, // splash color
          onTap: () {}, // button pressed
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Icon(Icons.search), // icon
            ],
          ),
        ),
      ),
    ),

Reduce padding in app bar buttons in flutter

3 Answers3