Question 127867 in Android Studio Question posted in
The official documentation can be found here.

Android Studio – 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: () {},
                            ),
                          ],
                        ),
Tags:

2

Answers


  1. 0

    you can try to use Padding. Something like that should do the trick:

    Padding(
        padding: EdgeInsets.only(left:10),
        child: Icon(Icons.check)
 ),
    Login or Signup to reply.
  2. 0

    You can put all the icons in a Column widget. The column widget has a parameter MainAxisAlignment, you can set this parameter to MainAxisAlignment.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()
        ],
    ),
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search