Reputation: 645
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
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
],
);
Upvotes: 2
Views: 9554
Reputation: 71
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!
Upvotes: 7
Reputation: 14379
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
],
),
),
),
),
Upvotes: 0
Reputation: 259
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
],
Upvotes: 3