Flutter vertical divider as tall as its parent

Question

Hi Flutter community:)

Working on a flutter app and seeking help with UI widget.

I'm lost on how to set child's height according to a parent's height.

Need to create a vertical divider(or Container with custom height) and set it's height to maximum of its parent because the parent height(which is a column in my case) will change depending on inside widgets.

I've found ways of creating vertical divider but with a fixed height. Tried using BoxFit, BoxConstraints, FittedBox and few other ways and failed to set height of a parent.

The divider is placed inside a Container>Row>Column->Container and divider's height should be the height of a Column.

As in example of this image:

https://i.stack.imgur.com/uUWjF.png

p.s. all widget is placed inside a ListView

      Column(
         children: <Widget>[
            Container(
              color: Colors.blue,
              width: 5.0,
              //height: -> setting to maximum of its parent
            ),
          ],
        ),

Answer 1

You can use IntrinsicHeight for this.

I used Container for my divider in this example, because I needed border radius on my divider, but you can use VerticalDivider too.

IntrinsicHeight(
        child: Row(
          children: <Widget>[
            // This is your divider
            Container(
              width: 3,
              height: double.infinity,
              color: Colors.blue,
              margin: const EdgeInsets.only(right: 4),
            ),
            Column(
              children: <Widget>[
                Text(
                  'Text 1',
                  style: TextStyle(fontSize: 20),
                ),
                Text(
                  'Text 2',
                  style: TextStyle(fontSize: 20),
                ),
                Text(
                  'Text 3',
                  style: TextStyle(fontSize: 20),
                ),
              ],
            ),
          ],
        ),
      ),

This is the result

If you just need a simple divider on the side I would suggest that you add border to the Container, because documetnation for IntrinsicHeight says is expensive to call, so avoid using it where possible.

Here you can read more about adding border to the Container.