5

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. enter image description here

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()],
)
8
  • provide your code. Aug 21, 2020 at 9:26
  • code is provided.
    – Ravi Garg
    Aug 21, 2020 at 9:33
  • 1
    Try crossAxisAlignment: CrossAxisAlignment.stretch inside the Row widget Aug 21, 2020 at 9:33
  • @ArshShaikh It failed with the error: BoxConstraints forces an infinite height.
    – Ravi Garg
    Aug 21, 2020 at 9:37
  • Then wrap your Row with Expanded widget
    – Aldy Yuan
    Aug 21, 2020 at 9:39

4 Answers 4

8

Use IntrinsicHeight as parent of Row that contains Card

2
  • This should be the answer.
    – Msvstl
    Apr 20, 2022 at 16:09
  • Upvoted, Thanks
    – Wai Han Ko
    Aug 2 at 6:55
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

2
  • 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, 2020 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, 2020 at 11:50
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.

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

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

or try wrapping every widget with expanded.

Hoping that it works

2
  • Nope. Still not working. Can you write your full code?
    – Ravi Garg
    Aug 21, 2020 at 11:35
  • Expanded expands its child in the main axis direction. The question is asking about the cross axis direction.
    – Tom
    Jul 4, 2022 at 18:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.