Flutter - Space Evenly in Column does not work as expected

Question

Screenshot of the problem I am trying to put elements in the red box by having even spaces between each other. (Like giving weight 1 to each of them). To do so, I put "mainAxisAlignment: MainAxisAlignment.spaceEvenly" in parent Column but it is not working.

Container(
            margin: EdgeInsets.only(bottom: 8.0),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                CachedNetworkImage(
                    imageUrl:
                        "https://image.tmdb.org/t/p/w500/${movieDetails
                        .posterPath}",
                    height: 120.0,
                    fit: BoxFit.fill),
                Expanded(
                    child: Container(
                        margin: EdgeInsets.only(left: 8.0),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly, //NOT WORKING!
                          children: <Widget>[
                            generateRow(
                                Strings.released, movieDetails.releaseDate),
                            generateRow(Strings.runtime,
                                movieDetails.runtime.toString()),
                            generateRow(Strings.budget,
                                movieDetails.budget.toString())
                          ],
                        )))
              ],
            )),

This is the code for movie image and the red box. I have created a Row which has 2 elements. First one is that image, second one is for red box.

Row generateRow(String key, String value) {
return Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[Text(key), Text(value)],
); }

My generateRow method

How can i solve this problem?

@diegoveloper This is what I need: https://drive.google.com/file/d/1wQwijv3mP4vyafSGLEdoK10ZxukTAVH1/view?usp=sharing — Ege, Aug 14 '18 at 14:36

Dinesh Balasubramanian · Accepted Answer · 2018-08-14T20:05:15.027

As you have given the height to the image is 120.0, can you do the same for the other Container child. By giving this, I was able to achieve what you want.

Code snippet:

Container(
        margin: EdgeInsets.only(bottom: 8.0),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            CachedNetworkImage(
                imageUrl:
                    "https://image.tmdb.org/t/p/w500/${movieDetails
                    .posterPath}",
                height: 120.0,
                fit: BoxFit.fill),
            Expanded(
                child: Container(
                    height: 120.0 //added to fix
                    margin: EdgeInsets.only(left: 8.0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly, //NOT WORKING!
                      children: <Widget>[
                        generateRow(
                            Strings.released, movieDetails.releaseDate),
                        generateRow(Strings.runtime,
                            movieDetails.runtime.toString()),
                        generateRow(Strings.budget,
                            movieDetails.budget.toString())
                      ],
                    )))
          ],
        )),

Tips to debug:

I used Flutter Inspector to find the problem. Refer
Refer the image below. Even though we gave Expanded, it occupied just half the size of image. Here the size of Expanded is determined by child's size (which is almost half the image size).

Cool, it works, but why added a fixed height can fix this issue? Can we add a fixed height to the row which can apply to its children? Thanks — Weiyi, Jan 19 '19 at 01:08

score 1 · Answer 2 · answered Aug 14 '18 at 14:59

try this :

 new Container(
            margin: EdgeInsets.only(bottom: 8.0),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                CachedNetworkImage(
                    imageUrl:
                        "https://image.tmdb.org/t/p/w500/${movieDetails
                        .posterPath}",
                    height: 120.0,
                    fit: BoxFit.fill),
                Expanded(
                    child: Container(
                        margin: EdgeInsets.only(left: 8.0),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly, //NOT WORKING!
                          children: <Widget>[
                              new Row(
                                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                mainAxisSize: MainAxisSize.max,
                                children: <Widget>[
                                  new Text("Released : "),
                                  new Text("25-07-2018 "), 
                                ],
                              ),
                               new Row(
                                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                mainAxisSize: MainAxisSize.max,
                                children: <Widget>[
                                  new Text("Released : "),
                                  new Text("25-07-2018 "), 
                                ],
                              ),
                               new Row(
                                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                mainAxisSize: MainAxisSize.max,
                                children: <Widget>[
                                  new Text("Released : "),
                                  new Text("25-07-2018 "), 
                                ],
                              ),
                          ],
                        )))
              ],
            )),

score 1 · Answer 3 · answered Jun 16 '20 at 19:23

1

Another way to achieve the result:

Expanded(
     child: Center(
     child: // your widget here,
    ),
)

This one should be the child of the Column, then it will work.

answered Jun 16 '20 at 19:23

Andriy Antonov

1,360
2
15
29

score 0 · Answer 4 · answered Aug 11 '20 at 09:34

Try looking at this post: Flutter Layout Row / Column - share width, expand height

Essentially, the image element in the Row makes the row expand in cross axis, but row's actual constraints are not modified. This is why Column's mainAxisAlignment: MainAxisAlignment.spaceEvenly is not working. It needs a parent constraint. And this is achieved with help of IntrinsicHeight. Wrapping Row widget with it will set row's constraints to the largest child's size (which is the image).

Flutter - Space Evenly in Column does not work as expected

4 Answers4

Linked