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

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.

Solution 1:^[1]

Try this:

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

Solution 2:^[2]

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

Solution 3:^[3]

you can either use

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

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

)

Solution 4:^[4]

you can try:

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

It worked for me! :))

Solution 5:^[5]

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

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	AnasSafi
Solution 2	Roman Traversine
Solution 3	F.K
Solution 4
Solution 5	Omach

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]