Flutter column fill space

Viewed 1005

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 :

enter image description here

enter image description here

Expected result

enter image description here

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

4 Answers

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

enter image description here

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

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

Related