How to stretch Containers inside Row to maximum available height? - flutter

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

Answer 1

Use IntrinsicHeight as parent of Row that contains Card

Answer 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

Answer 3

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.

Answer 4

Row(
mainAxisAlignment : MainAxisAlignment.spaceEvenly,
.....)
or try wrapping every widget with expanded.
Hoping that it works