Spacing Icons in a container in Flutter
I am trying to find a better alternative to spacing my icons in Flutter, I am currently using the SizedBox(...)
Widget. Although I am not sure if this is the best method to use, the sized box seems to mess up the spacing of other icons when I am adjusting the height/width. Are there any alternatives to spacing your icons inside a container. I added a picture of the UI to the post, the icons are in the menu on the left side. Login Screen Image
Widget build(BuildContext context) {
return Container(
width: 1280,
height: 800,
decoration: BoxDecoration(
color: Color.fromRGBO(227, 227, 227, 1),
),
child: Material(
child: Stack(
children: <Widget>[
Positioned(
top: 0,
left: 80,
child: Container(
width: 1200,
height: 70,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/Topbarbackground.png'),
fit: BoxFit.fitWidth
),
)
)
), Positioned(
top: 652,
left: 0,
child: Container(
width: 1280,
height: 100,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/Rectangle112.png'),
fit: BoxFit.fitWidth
),
)
)
), Positioned(
top: 0,
left: 0,
child: Container(
child: ListView(
children: [
SizedBox(
height: 50.0,
child: IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/Back.png'),
onPressed: () {},
),
),
SizedBox(
width: 0.0,
height: 150.0,
child: IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/tip_load.png'),
onPressed: () {},
),
),
SizedBox(
width: 0.0,
height: 50.0,
child: IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/tip_eject.png'),
onPressed: () {
},
),
),
SizedBox(
height: 125.0,
child: IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/Light.png'),
onPressed: () {},
),
),
IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/Utility.png'),
onPressed: () {},
),
SizedBox(
height: 125.0,
child: IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/Help.png'),
onPressed: () {},
),
),
SizedBox(
height: 100.0,
child: IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/User.png'),
onPressed: () {},
),
),
IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/Power.png'),
onPressed: () {},
),
],
),
Solution 1:
You can put all the icons in a Column widget. The column widget has a parameter MainAxisAlignment, you can set this parameter to spaceEvenly.
See https://api.flutter.dev/flutter/widgets/Column-class.html for the Column widget
and see https://api.flutter.dev/flutter/rendering/MainAxisAlignment.html for the MainAxisAlignment
Put the Column widget inside a Container widget.
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly
children: [
Icon()
Icon()
],
),
),