Spacing Icons in a container in Flutter

Question

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

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()
        ],
    ),
),

Comments

[Developer123]

This seemed to work pretty nice, I had to add a sized box to the power button because it seems to cut off at the bottom of the page for some reason.

[BJW]

Great to hear that it worked. The fact that you still have to use a SizedBox for the power button could be because you put everything in a Stack widget. I would not recommend using a Stack widget in this case, because you are not really stacking anything on top of each other. Try playing around with multiple Column and Row widget to create the same layout.