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
            ),
          ],
        ),

What about using a `Container(decoration: ..)` to add a colored border to the left? — Günter Zöchbauer, Aug 31 '18 at 10:32
Thanks! Will try to implement now. However there will be at least 4 different divider colors depending on server request. — petras J, Aug 31 '18 at 10:46
"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. — Günter Zöchbauer, Aug 31 '18 at 11:11
Thanks Günter it works likes a charm although it feels like a little hack today. — petras J, Aug 31 '18 at 11:29
What feels like a hack? Using a border? I don't see why you would consider this a hack. — Günter Zöchbauer, Aug 31 '18 at 11:30
I meant no disrespect, but having a build in vertical divider would nicer. — petras J, Aug 31 '18 at 11:32
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. — Günter Zöchbauer, Aug 31 '18 at 11:46
@PetrasJ you can use still use a `Divider` inside the `Container` — Arlind Hajredinaj, Sep 03 '18 at 10:46
did you check out this one: https://stackoverflow.com/questions/49388281/flutter-vertical-divider/50711441 — Phong Nguyen, Jul 12 '19 at 09:00

merfire · Answer 1 · 2022-08-25T12:15:03.360

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

thank you very very much really saved me – Mosa Aug 02 '23 at 19:10 — Mosa, Aug 02 '23 at 19:10

score 0 · Answer 2 · answered Aug 31 '18 at 11:29

0

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

answered Aug 31 '18 at 11:29

Viren V Varasadiya

25,492
9
45
61

score 0 · Answer 3 · answered Sep 25 '21 at 07:22

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,
  );
}

score -5 · Answer 4 · answered Aug 31 '18 at 11:21

-5

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,
    )
)

answered Aug 31 '18 at 11:21

Arlind Hajredinaj

8,380
3
30
45

It's a possibility but divider only has height parameter, but by rotating to vertical it might work. – petras J Aug 31 '18 at 11:29

Flutter vertical divider as tall as its parent

4 Answers4