How to add a Vertical Divider between Widget on Column in Flutter?

Question

Good day.

I've surfed on this website about how to add a Vertical Divider between Widget on Column in Flutter? but I got nothing.

here what I want

I already make the horizontal divider. but when I try to make a vertical divider that separating between 2 objects (text | image), I got nothing.

here are the code:

Row(children: <Widget>[
                Expanded(
                  child: new Container(
                      margin: const EdgeInsets.only(left: 10.0, right: 20.0),
                      child: Divider(
                        color: Colors.black,
                        height: 36,
                      )),
                ),
                Text("OR"),
                Expanded(
                  child: new Container(
                      margin: const EdgeInsets.only(left: 20.0, right: 10.0),
                      child: Divider(
                        color: Colors.black,
                        height: 36,
                      )),
                ),
              ]),

code above is for horizontal

Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Row(
              children: <Widget>[
                Image.asset('images/makanan.png', width: 30,),
                Text('Diskon 20%', style: TextStyle(fontSize: 5, color: Colors.green),)
              ],
            ),
            VerticalDivider(
              color: Colors.red,
              width: 20,
            ),
            Row(
              children: <Widget>[
                Image.asset('images/makanan.png', width: 30,),
                Text('Diskon 20%', style: TextStyle(fontSize: 5, color: Colors.green),)
              ],
            ),
          ],
        ),

code above I make for Vertical Divider. but failed.

Need your help, Thank you.

Cisalpine

Use Container instead of VerticalDivider widget – Foggia

oke thank you @AndroidTeam for the suggestion. I'll ty it. – Cisalpine

works nicely. arigatou gozaimasu :) – Cisalpine

Answer 1

Try to replace

VerticalDivider(color: Colors.red, width: 20)

with

Container(height: 80, child: VerticalDivider(color: Colors.red))

Hyperacidity

Answer 2

Try this:

IntrinsicHeight(
    child: new Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    Text('Foo'),
    VerticalDivider(),
    Text('Bar'),
    VerticalDivider(),
    Text('Baz'),
  ],
))

Sportsman

This works but can be very costly, this widget can result in a layout that is O(N²) in the depth of the tree. – Rima

This is the only way that do not need to specify height manually, so I think It's worth to try If there is no other solution. – Hydrate

Answer 3

oke here the answer.

it works for me. Thank you mr @Android Team and mr @sunxs for your help :)

Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Row(
              children: <Widget>[
                Image.asset('images/makanan.png', width: 30,),
                Text('Diskon 20%', style: TextStyle(fontSize: 5, color: Colors.green),)
              ],
            ),
            Container(height: 80, child: VerticalDivider(color: Colors.red)),
            Row(
              children: <Widget>[
                Image.asset('images/makanan.png', width: 30,),
                Text('Diskon 20%', style: TextStyle(fontSize: 5, color: Colors.green),)
              ],
            ),
            Container(height: 80, child: VerticalDivider(color: Colors.red)),
            Row(
              children: <Widget>[
                Image.asset('images/makanan.png', width: 30,),
                Text('Diskon 20%', style: TextStyle(fontSize: 5, color: Colors.green),)
              ],
            ),
          ],
        ),

Cisalpine

Answer 4

you can either use

VerticalDivider(
thickness: 1,
color:Colors.black
            
),

or

Container(
height: 30,
width: 1,
color: Colors.black

)

Human

Answer 5

The most optimal way is to put the Vertical Divider inside a SizedBox.

SizedBox(
 height: 80, 
 child: VerticalDivider(color: primaryColor),
)

Crissman

Answer 6

you can try:

Container(
  color: Colors.grey,
  height: 30,
  width: 1,
),

It worked for me! :))

Casilde

Use code sampler {} and put this Container( color: Colors.grey, height: 30, width: 1, ), inside of it so your answer is more readable to the oters. Thank you. – Liggitt

Answer 7

The VerticalDivider Widget allows developers to add a vertical line that covers the available vertical space, usually in a row or column. It helps create clear distinctions between different parts or components of the user interface, providing visual separation without extra white space or margins.

VerticalDivider(
       color: Colors.white,
       width: 1.0,
),

Demo

Yarndyed

Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to provide additional explanation of your code so developers can understand your reasoning. This is especially useful for new developers who aren’t as familiar with the syntax or struggling to understand the concepts. Would you kindly edit your answer to include additional details for the benefit of the community? – Embraceor