Reputation: 385
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
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
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:
That is so easy. I wish it could help.
Upvotes: 0
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