Aneesh Jose
Aneesh Jose

Reputation: 385

How to adjust the height of a container as the maximum height of its sibling in a row

I have two widgets in a row. The first widget is a black line with width 5.0, the second widget is a text widget whose size may vary according to the content. I want the first container to have the same height as of the second widget

Upvotes: 6

Views: 4211

Answers (3)

RodXander
RodXander

Reputation: 833

There's some valuable information missing from the accepted answer.

IntrinsicHeight(
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.stretch, <-- IMPORTANT
    children: <Widget>[
      Container(), <-- NO NEED FOR HEIGHT, ANY WIDGET SUPPORTED NOW
      SecondWidget(),
    ],
)

This way you can make any widget as tall as SecondWidget, not just a Container.

Upvotes: 1

Saeed All Gharaee
Saeed All Gharaee

Reputation: 1683

You can use Expanded widget. It divides siblings to the same height or width. here is the code:

Row(
    children: <Widget>[
      Expanded(
        child: Container(
          color: Colors.red,
        ),
      ),
      Expanded(
        child: Container(
          color: Colors.green,
        ),
   )

And here is the result:

enter image description here

That is so easy. I wish it could help.

Upvotes: 0

Md Golam Rahman Tushar
Md Golam Rahman Tushar

Reputation: 2375

One way is to make both widget child of an IntrinsicHeight widget and then declare the height of the first container as double.infinity. This should solve your problem. Example code is given below:

IntrinsicHeight(
  child: Row(
    children: <Widget>[
      Container(  //this is the first container
         height: double.infinity
      ),
      secondWidget(
      )
    ],
)

Let me know if you have further query. Happy coding!

Upvotes: 13

Related Questions