How to set dynamic container height related to it's next container'a height in flutter?

Question

I want my second (blue) container height should match the first (red) container height.

Here is the preview now,

And here is the code I've done.

ListView(
  padding: EdgeInsets.only(top: 0),
  children: <Widget>[
    Row(
      children: <Widget>[
        Container(color: Colors.red, height: 100, width: 100,),
        Container(color: Colors.blue, height: 50, width: 50,),
      ],
    ),
    Divider(),
    Row(
      children: <Widget>[
        Container(color: Colors.red, height: 300, width: 100,),
        Container(color: Colors.blue, height: 50, width: 50,),
      ],
    ),
  ],
)

So, how can I make the blue container automatically match the red container height?

Answer 1

Remove the height parameter of the child you want to expand and use IntrinsicHeight class like below.

ListView(
        padding: EdgeInsets.only(top: 0),
        children: <Widget>[
          IntrinsicHeight(
            child: Row(
              children: <Widget>[
                Container(color: Colors.red, height: 100, width: 100,),
                Container(color: Colors.blue,width: 100,),
              ],
            ),
          ),
          Divider(),
          IntrinsicHeight(
            child: Row(
              children: <Widget>[
                Container(color: Colors.red, height: 300, width: 100,),
                Container(color: Colors.blue, width: 50,),
              ],
            ),
          ),
        ],
      )