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.

Use Container instead of VerticalDivider widget – Apr 08 '19 at 07:06 — , Apr 08 '19 at 07:06
oke thank you @AndroidTeam for the suggestion. I'll ty it. – Roman Traversine Apr 08 '19 at 07:20 — Roman Traversine, Apr 08 '19 at 07:20
works nicely. arigatou gozaimasu :) – Roman Traversine Apr 08 '19 at 07:28 — Roman Traversine, Apr 08 '19 at 07:28

score 69 · Accepted Answer · answered Apr 08 '19 at 07:15

69

Try to replace

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

with

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

answered Apr 08 '19 at 07:15

sunxs

886
8
4

score 10 · Answer 2 · answered Feb 14 '20 at 19:32

10

Try this:

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

answered Feb 14 '20 at 19:32

AnasSafi

5,353
1
35
38

1

This works but can be very costly, this widget can result in a layout that is O(N²) in the depth of the tree. – IgZiStO May 20 '20 at 16:34
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. – Tokenyet Jul 27 '20 at 06:50

score 4 · Answer 3 · answered Apr 08 '19 at 07:27

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

score 4 · Answer 4 · answered Apr 15 '21 at 15:48

4

you can either use

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

or

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

)

answered Apr 15 '21 at 15:48

F.K

93
7

score 2 · Answer 5 · answered Jan 29 '22 at 23:49

2

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

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

answered Jan 29 '22 at 23:49

Omach

43
6

Jason · Answer 6 · 2021-04-09T08:25:17.083

1

you can try:

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

It worked for me! :))

edited Apr 09 '21 at 08:25

answered Apr 09 '21 at 03:35

Jason

11
2

2

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. – Sameera De Silva Apr 09 '21 at 05:27

Savan Gangani · Answer 7 · 2023-06-20T13:41:08.790

1

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

edited Jun 20 '23 at 13:41

answered Jun 17 '23 at 04:01

Savan Gangani

37
4

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?** – Jeremy Caney Jun 19 '23 at 02:25

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

7 Answers7