MainAxisSize.SpaceEvenly not giving equal space in the widget

Question

This is the Code

body: Center(
          child: Column(
            children: [
              Row(
                children: [
                  CircleAvatar(
                    backgroundImage: NetworkImage(
                        'https://raw.githubusercontent.com/flutter/website/master/examples/layout/sizing/images/pic1.jpg'),
                    radius: 50,
                  ),
                  SizedBox(
                    width: 30,
                  ),
                  Container(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        Text('Post'),
                        Text('Followers'),
                        Text('Following')
                      ],
                    ),
                  )
                ],
              ),
            ],
          ),
        ),

`Expanded(child: Container(child: Row(...` but actually you dont need that `Container` at all and you can just `Expanded(child: Row(...` — pskink, Oct 28 '21 at 17:28
@pskink like always, answering in the comment :) cheers mate — rosh-dev851, Oct 28 '21 at 17:37

score 1 · Accepted Answer · answered Oct 28 '21 at 17:28

Try below code hope its helpful to you,used ListTile widget also refer ListTile here, refer my answer here for same design

 ListTile(
      leading: CircleAvatar(
        backgroundImage: NetworkImage(
          'https://raw.githubusercontent.com/flutter/website/master/examples/layout/sizing/images/pic1.jpg',
        ),
        radius: 50,
      ),
      title: Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Text('Post'),
            Text('Followers'),
            Text('Following'),
          ],
        ),
      ),
    ),

Your result screen like->

Thank you So much for your crisp clear answer once again :)) — Kavach Dheer, Oct 28 '21 at 17:44
most welcome @KavachDheer glad to help you please upvote my answer, Thanks — Ravindra S. Patil, Oct 28 '21 at 17:45

score 1 · Answer 2 · answered Oct 28 '21 at 17:31

Container doesn't take all reaming space (give a background color to the container and see). that's the reason you don't see MainAxisAlignment.spaceEvenly,. Use a Expanded widget which take all remaining space. then you will see the effect.

Containers with no children try to be as big as possible unless the incoming constraints are unbounded, in which case they try to be as small as possible. Containers with children size themselves to their children. The width, height, and constraints arguments to the constructor override this.

Column(
        children: [
          Row(
            children: [
              CircleAvatar(
                backgroundImage: NetworkImage(
                    'https://raw.githubusercontent.com/flutter/website/master/examples/layout/sizing/images/pic1.jpg'),
                radius: 50,
              ),
              SizedBox(
                width: 30,
              ),
              Expanded(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text('Post'),
                    Text('Followers'),
                    Text('Following')
                  ],
                ),
              )
            ],
          ),
        ],
      ),

Thank you So much for your crisp clear answer :)) – Kavach Dheer Oct 28 '21 at 17:36 — Kavach Dheer, Oct 28 '21 at 17:36

MainAxisSize.SpaceEvenly not giving equal space in the widget

2 Answers2

Linked