Stretch children of a Flutter Row to the maximum *natural* height

Question

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(title),
    ),
    body: ListView(
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.end,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Container(
              alignment: AlignmentDirectional.center,
              color: Colors.red,
              child: Text('Lorem ipsum dolor sit amet'),
              width: 150,
            ),
            Container(
              color: Colors.blue,
              width: 4,
              height: 8,
            ),
            Container(
              width: 12,
            ),
            Container(
              color: Colors.blue,
              width: 4,
              height: 8,
            ),
            Container(
              width: 12,
            ),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.end,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Container(
              alignment: AlignmentDirectional.center,
              color: Colors.red,
              child: Text('Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet'),
              width: 150,
            ),
            Container(
              color: Colors.blue,
              width: 4,
              height: 8,
            ),
            Container(
              width: 12,
            ),
            Container(
              color: Colors.blue,
              width: 4,
              height: 8,
            ),
            Container(
              width: 12,
            ),
            Container(
              color: Colors.blue,
              width: 4,
              height: 8,
            ),
            Container(
              width: 12,
            ),
          ],
        ),
      ],
    ),
  );
}

The little blue Containers are there to simulate Columns. To match perfectly, I need them to stretch themselves to the height of the leftmost Container (with the Text lable). I have tried to achieve this with BoxConstraints, but they cause render to fail because of infinite height. Setting a fixed height is not feasible because the text may change; I do can set a maximum height.

Is it possible to achieve this effect?

Answer 1

you can use https://api.flutter.dev/flutter/widgets/IntrinsicHeight-class.html

and set cross alignment to stretch in the row

ListView(
        children: <Widget>[
          IntrinsicHeight(// <---------- this one here
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch, // <---------- set to stretch
              mainAxisAlignment: MainAxisAlignment.end,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Container(
                  alignment: AlignmentDirectional.center,
                  color: Colors.red,
                  child: Text('Lorem ipsum dolor sit amet'),
                  width: 150,
                ),
                Container(
                  color: Colors.blue,
                  width: 4,
                  height: 8,
                ),
                Container(
                  width: 12,
                ),
                Container(
                  color: Colors.blue,
                  width: 4,
                  height: 8,
                ),
                Container(
                  width: 12,
                ),
              ],
            ),
          ),// end here
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Container(
                alignment: AlignmentDirectional.center,
                color: Colors.red,
                child: Text('Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet'),
                width: 150,
              ),
              Container(
                color: Colors.blue,
                width: 4,
                height: 8,
              ),
              Container(
                width: 12,
              ),
              Container(
                color: Colors.blue,
                width: 4,
                height: 8,
              ),
              Container(
                width: 12,
              ),
              Container(
                color: Colors.blue,
                width: 4,
                height: 8,
              ),
              Container(
                width: 12,
              ),
            ],
          ),
        ],
      )

---

I have intentionally skipped the second Row to show the difference