Flutter column fill space

Question

I want to make the following white box to fill the vertical space , I set mainAxisAlignment: MainAxisAlignment.spaceBetween , I want to put the title at top and the description at bottom of the white box

I don't want to explicitly set the height to the white box , I just want force it to fill space

Container(
          color: Colors.blueGrey,
          padding: EdgeInsets.all(8),
          margin: EdgeInsets.all(8),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Flexible(
                    child: Container(
                      color: Colors.white,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Text('Title'),
                          Text(
                            'Description Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been ',
                            style: TextStyle(fontSize: 10),
                          ),
                        ],
                      ),
                    ),
                  ),
                  Column(
                    children: <Widget>[
                      CircleAvatar(
                        child: Text('AH'),
                        backgroundColor: Colors.deepOrangeAccent,
                        radius: 50,
                      )
                    ],
                  ),
                ],
              ),
              Icon(Icons.email)
            ],
          ),
        ),

Current result :

Expected result

I am not looking for a solution just works! I am learning flutter And I want to know why Row cannot extend height

Can you try wrapping your `Row` with `Expanded` and check if it works? — Shubham Gupta, May 15 '20 at 15:18
After wrapping `Row` with `Expanded` , **blueGrey** box filled whole screen , I don't want it, but white box has correct view — WebMaster, May 15 '20 at 15:22
Try giving Row the attribute crossAxisAlignment: CrossAxisAlignment.stretch — Felix Junghans, May 15 '20 at 15:37
I set CrossAxisAlignment.stretch for Row , and get error : The following assertion was thrown during performLayout():BoxConstraints forces an infinite height.These invalid constraints were provided to RenderFlex's layout() function by the following function,which probably computed the invalid constraints in question:RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:744:15) — WebMaster, May 15 '20 at 15:56

iDecode · Accepted Answer · 2020-05-18T02:52:42.203

Good question!

The solution is to use IntrinsicHeight and set crossAxisAlignment: CrossAxisAlignment.stretch in your Row, in your particular case you don't need to set alignment, I'll explain it later.

Now, what IntrinsicHeight is doing here which solves your problem? See, when you provide IntrinsicHeight to your Row, it forces the children of Row to take up maximum vertical space available provided that you have set crossAxisAlignment: CrossAxisAlignment.stretch property.

In your case, both the children of Row are Column, first column is shorter than the second one in height, and after setting IntrinsicHeight, your allow both the Columns to take take up the maximum available space, here it is the max(column1, column2) = column2. So, 1st column takes up the 2nd column height, in case 1st had been larger, 2nd one would have taken the 1st height, you get the idea.

As I mentioned before, you also need to set crossAxisAlignment: CrossAxisAlignment.stretch to allow this behaviour to take effect when using IntrinsicHeight but just because you're using Column as children of your Row, you can skip it, since Column tries to take up the entire vertical space available unless you set mainAxisSize: MainAxisSize.min which you're not setting in your Row's Column.

Solution:

Container(
  color: Colors.blueGrey,
  padding: EdgeInsets.all(8),
  margin: EdgeInsets.all(8),
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      IntrinsicHeight( // 1st add this
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.stretch, // 2nd use this
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Flexible(
              child: Container(
                color: Colors.white,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Text('Title'),
                    Text(
                      'Description Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been ',
                      style: TextStyle(fontSize: 10),
                    ),
                  ],
                ),
              ),
            ),
            Column(
              children: <Widget>[
                CircleAvatar(
                  child: Text('AH'),
                  backgroundColor: Colors.deepOrangeAccent,
                  radius: 50,
                )
              ],
            ),
          ],
        ),
      ),
      Icon(Icons.email)
    ],
  ),
)

Thank you ,I have two question : 1- IntrinsicHeight is relatively expensive, because it adds a speculative layout pass before the final layout phase, I want to use my widget in infinitive list view , is there any other solution? 2- Why adding `crossAxisAlignment: CrossAxisAlignment.stretch` to `Row` is not working and has error "BoxConstraints forces an infinite height." — WebMaster, May 18 '20 at 17:10
1. Yes, it is quite expensive to use, if you want to use that in some infinite sort of layout, you should instead give it a fixed height. 2. I am not seeing that error in the current code. Could you edit your post which throws that error? — iDecode, May 19 '20 at 04:21
The current code is OKAY, I asked that if we remove `IntrinsicHeight` and just add `crossAxisAlignment: CrossAxisAlignment.stretch` we have error! Why? — WebMaster, May 19 '20 at 04:39
@WebMaster Yes, in that case you'll have to face the error because on one side you're saying you want to restrict the height of the `Column` (parent one) to `MainAxisSize.min` and on the other side you're saying you want to allow full vertical space availability of `Row` by setting `CrossAxisAlignment.stretch`, they contradict each other, and the only solution to make them work is by using `IntrinsicHeight` which allows `Row`'s children to expand to the max_height(row_children). — iDecode, May 19 '20 at 04:47

score 2 · Answer 2 · answered May 17 '20 at 17:21

just found out soln by wrapping row with Row with IntrinsicHeight

here is code :

Container(
    color: Colors.blueGrey,
    padding: EdgeInsets.all(8),
    margin: EdgeInsets.all(8),
    child: Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        IntrinsicHeight(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Flexible(
                child: Container(
                  color: Colors.white,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text('Title'),
                      Text(
                        'Description Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been ',
                        style: TextStyle(fontSize: 10),
                      ),
                    ],
                  ),
                ),
              ),
              Column(
                children: <Widget>[
                  CircleAvatar(
                    child: Text('AH'),
                    backgroundColor: Colors.deepOrangeAccent,
                    radius: 50,
                  )
                ],
              ),
            ],
          ),
        ),
        Icon(Icons.email)
      ],
    ),
  ),

here is same question https://stackoverflow.com/questions/51326170/flutter-layout-row-column-share-width-expand-height — GJJ2019, May 17 '20 at 17:44

score -1 · Answer 3 · answered May 15 '20 at 16:02

Try this

body: Container(
        color: Colors.blueGrey,
        padding: EdgeInsets.all(8),
        margin: EdgeInsets.all(8),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  child: Container(
                    width: double.infinity,
                    color: Colors.white,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: <Widget>[
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: <Widget>[
                              Text('Title'),
                              SizedBox(
                                height: 50,
                              ),
                              Text(
                                'Description Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been ',
                                style: TextStyle(
                                  fontSize: 10,
                                ),
                              ),
                            ],
                          ),
                        ),
                        Expanded(
                          child: Align(
                            alignment: Alignment.centerRight,
                            child: CircleAvatar(
                              child: Text('AH'),
                              backgroundColor: Colors.deepOrangeAccent,
                              radius: 50,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
            Icon(Icons.email)
          ],
        ),
      ),

It is not I want . You put a `SizedBox(height: 50,)` between two texts, I if you remove it or not `MainAxisAlignment.spaceBetween` has no affect!! — WebMaster, May 15 '20 at 16:35
@WebMaster: SizeBox() is used for adding distance between two widgets, how it will not add any space in between, on my side it is working. — Jitesh Mohite, May 15 '20 at 17:34
I run your above mentioned code, if you remove sized box, two texts have no space between, You can see that , your UI is same as my first UI, and if you comment MainAxisAlignment.spaceBetween, there is no diffrence — WebMaster, May 15 '20 at 17:39
You want space between two text right? then whats wrong in that — Jitesh Mohite, May 15 '20 at 17:45

score -1 · Answer 4 · answered May 18 '20 at 16:50

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    child: Expanded(
      child: Container(
        // Fill available Space.
        constraints: BoxConstraints.expand()
        color: Colors.white,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Text('Title'),
            Text('Description Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been ',
              style: TextStyle(fontSize: 10),
            ),
          ],
        ),
      ),
    ),
    // there was no need for the and additional column
    CircleAvatar(
      child: Text('AH'),
      backgroundColor: Colors.deepOrangeAccent,
      radius: 50
    ),
  ]
)

Hope So, it will work

Not works, Error:BoxConstraints forces an infinite height. – WebMaster May 18 '20 at 17:12 — WebMaster, May 18 '20 at 17:12

Flutter column fill space

4 Answers4