How to stretch Containers inside Row to maximum available height?

Question

I have a Row widget, which has many containers with different heights depending on their content. I want to have an equal height of them all. How can I achieve this without hardcoding their values?

This is something I have.

But I want the first card to take the height of the row automatically. So that both cards would be of the same height. How can I achieve this?

This is the code for Card Container:

Widget build(BuildContext context) {
    final statusMap = statusOptionView();
    return Container(
      width: 200,
      margin: EdgeInsets.only(right: 20.0),
      child: Stack(
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(
                left: 20.0, right: 20.0, top: 20.0, bottom: 50.0),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(20.0)),
              color: Color(0xFFF97F8B),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Icon(
                      Icons.access_time,
                      color: Colors.white,
                    ),
                    SizedBox(width: 4.0),
                    Text(
                      event.startTime,
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    )
                  ],
                ),
                SizedBox(
                  height: 20.0,
                ),
                Text(
                  event.title,
                  style: TextStyle(
                    fontWeight: FontWeight.w600,
                    fontSize: 20.0,
                    color: Colors.white,
                  ),
                  maxLines: 2,
                ),
                SizedBox(
                  height: 20.0,
                ),
                Row(
                  children: <Widget>[
                    Icon(
                      Icons.location_on,
                      color: Colors.white,
                    ),
                    SizedBox(
                      width: 4.0,
                    ),
                    Expanded(
                      child: Text(
                        event.venue,
                        style: TextStyle(
                          color: Colors.white,
                        ),
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                    )
                  ],
                ),
              ],
            ),
          ),
          Positioned(
            bottom: 0.0,
            right: 0.0,
            left: 0.0,
            child: GestureDetector(
              onTap: () => Navigator.push(context, MaterialPageRoute(
                  builder: (BuildContext context) => EventDetailsScreen(event: event, status: status))),
              child: Container(
                padding: EdgeInsets.symmetric(vertical: 8.0),
                decoration: BoxDecoration(
                    color: Colors.purple,
                    borderRadius: BorderRadius.circular(30.0)),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Icon(
                      statusMap['icon'],
                      color: Colors.white,
                      size: 16.0,
                    ),
                    SizedBox(
                      width: 10.0,
                    ),
                    Text(
                      statusMap['value'],
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          )
        ],
      ),
    );

While it is wrapped inside a Row widget, just like this:

Row(
  children: <Widget>[...events.map((event) => EventCard(event: event)).toList()],
)

Try crossAxisAlignment: CrossAxisAlignment.stretch inside the Row widget — Arsh Shaikh, Aug 21 '20 at 09:33
@ArshShaikh It failed with the error: BoxConstraints forces an infinite height. — Ravi Garg, Aug 21 '20 at 09:37
Yup Wrap the row in Expanded or if you have a fixed height in mind, wrap the row with a container and give the container that height. — Arsh Shaikh, Aug 21 '20 at 09:40
@ArshShaikh same error. This is not due to the row itself. Row is working correctly, but it is due to Event Card which is not adjusting to the height of Row. And I don't want to give it a fixed height. :( — Ravi Garg, Aug 21 '20 at 09:45
I have used provided height of double.infinity to the Event Card Container but it is having same error.. — Ravi Garg, Aug 21 '20 at 09:46

score 6 · Answer 1 · answered May 12 '21 at 02:06

6

Use IntrinsicHeight as parent of Row that contains Card

answered May 12 '21 at 02:06

Hossein Zaaferani

61
1
4

This should be the answer. – Msvstl Apr 20 '22 at 16:09
Upvoted, Thanks – Wai Han Ko Aug 02 '23 at 06:55

score 2 · Answer 2 · answered Aug 21 '20 at 10:21

2

You can use CrossAxisAlignment.stretch to make all children of a Row/Column use the same height/width.

  /// Require the children to fill the cross axis.  
  ///  
  /// This causes the constraints passed to the children to be tight in the  
  /// cross axis.  
  stretch,

Check out https://codepen.io/kuhnroyal/pen/wvGormg

answered Aug 21 '20 at 10:21

kuhnroyal

7,188
1
34
47

I have tried it, but getting error, while using stretch. Can you rewrite your code please, so that I can understand it? – Ravi Garg Aug 21 '20 at 11:36
There is nothing to rewrite, the sample is very basic. If you don't understand it, you should read some tutorials on how to use columns and rows. And if you get an error then you are doing something different, you can see in the example that it does what you want. What is the error you are getting? – kuhnroyal Aug 21 '20 at 11:50

score 0 · Answer 3 · edited Aug 21 '20 at 10:07

0

In your case, row is a child of column and column gives full available height to its children so row as a child of the column, take full available height so to tell column that only give required height to its children try to give MainAxisSize.min property to Column. I am not sure it works or not but you can try.

edited Aug 21 '20 at 10:07

Ravi Garg

1,378
12
23

answered Aug 21 '20 at 10:04

Programmer_3

522
5
18

1

No. this doesn't help me either. Can you try rewrite your code and post it in your answer? – Ravi Garg Aug 21 '20 at 10:07

score 0 · Answer 4 · answered Aug 21 '20 at 10:35

0

Row( mainAxisAlignment : MainAxisAlignment.spaceEvenly, .....)

or try wrapping every widget with expanded.

Hoping that it works

answered Aug 21 '20 at 10:35

Nithesh K

32
4

Nope. Still not working. Can you write your full code? – Ravi Garg Aug 21 '20 at 11:35
`Expanded` expands its child in the main axis direction. The question is asking about the cross axis direction. – Tom Jul 04 '22 at 18:30

How to stretch Containers inside Row to maximum available height?

4 Answers4

Linked