How to Add a Vertical Divider Between Widget on Column In Flutter?

· 2 min read
How to Add a Vertical Divider Between Widget on Column In Flutter
How to Add a Vertical Divider Between Widget on Column In Flutter

Column Widget is a widget where the elements or child are arranged vertically like a column.  In today’s article, we will go through How to Add a Vertical Divider Between Widget on Column In Flutter?

How to Add a Vertical Divider Between Widget on Column In Flutter?

Try to replace

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

with

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

You can also try with a code snippet like the below:

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

You can also try with below code snippet.

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

Conclusion:

Thanks for being with us on a flutter journey!!!

In this article, we have been through how to add a vertical divider between widgets on columns in flutter?

Do let us know if you need any assistance with flutter development. We would love to assist you.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Leave a Reply