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.sstatic.net/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
            ),
          ],
        ),

Erenow

What about using a Container(decoration: ..) to add a colored border to the left? – Jannery

Thanks! Will try to implement now. However there will be at least 4 different divider colors depending on server request. – Erenow

"there will be at least 4 different divider colors depending on server request" don't see why this would by any different as with a divider and shouldn't cause any problems. – Jannery

Thanks Günter it works likes a charm although it feels like a little hack today. – Erenow

What feels like a hack? Using a border? I don't see why you would consider this a hack. – Jannery

I meant no disrespect, but having a build in vertical divider would nicer. – Erenow

An reason why? If you already have a widget of the desired size and just make it's border visible. Is this only for visual appearance or should the divider get some behavior like being draggable? It's not about respect. I'm just curious about your line of reasoning. – Jannery

@PetrasJ you can use still use a Divider inside the Container – Strother

did you check out this one: https://mcmap.net/q/179511/-flutter-vertical-divider-and-horizontal-divider/… – Berseem

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.

EDIT: 25.08.2022.

Flutter's official channel video explaining Intrinsic widgets

Ilka

Answer 2

You can use expanded widget to use full height of the parent widget.

Gamophyllous

Answer 3

You should fist determine how many items in yout listtile after that you can use this

you can use this container for draw a line

for (var i in yourItem) Dividers(i),

Container Dividers(Map<String, dynamic> changes) {
  return Container(
    decoration: BoxDecoration(
      border: Border(
        top: BorderSide(width: 30, color: Colors.blue),
        bottom: BorderSide(width: 30, color: Colors.blue),
      ),
      color: Colors.white,
    ),
    margin: EdgeInsets.only(left: 22),
    width: 2,
  );
}

Stalinabad

Answer 4

You can use a Container and do not specify the height neither the constraints the container will expand to fill the space in its parent.

Container(
    child: Divider(
        width: 5.0, 
        color: Colors.blue,
    )
)

Strother

It's a possibility but divider only has height parameter, but by rotating to vertical it might work. – Erenow