CODEWITHSUNDEEP
flutterdartflutter-layout
Ravi Garg
Ravi Garg

Reputation: 1534

How to stretch Containers inside Row to maximum available height?

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

Upvotes: 6

Views: 4779

Answers (4)

Hossein Zaaferani
Hossein Zaaferani

Reputation: 131

Use IntrinsicHeight as parent of Row that contains Card

Upvotes: 13

Nithesh K
Nithesh K

Reputation: 32

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

or try wrapping every widget with expanded.

Hoping that it works

Upvotes: 0

kuhnroyal
kuhnroyal

Reputation: 7563

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

Upvotes: 3

Programmer_3
Programmer_3

Reputation: 530

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.

Upvotes: 0

Related Questions