Menu
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.
923
You need to wrap VerticalDivider() widget with the IntrinsicHeight widget. Otherwise, the vertical divider will not show up. And to gain some padding over the top and bottom you can add indent.
If you needed the row widget there, another way to provide the column width for the Divider class would be to wrap the Column Widget with something like Expanded - then your code would work.
In Flutter, there are two widgets suitable for that purpose: Divider and VerticalDivider. Divider is used to create a horizontal line divider, while VerticalDivider is used to create a vertical line divider. The examples below show you how to use those widgets. To use the Divider widget, just call the constructor. Below is the constructor.
Divider is used to create a horizontal line divider, while VerticalDivider is used to create a vertical line divider. The examples below show you how to use those widgets. To use the Divider widget, just call the constructor. Below is the constructor. Since there is no required argument, you can call the constructor without passing anything.
How to Add Divider Between Items In Flutter?? Generally, when a user receives a large amount of data through ListView Widget each item needs to be arranged and separated so it looks cool. To Separate, each item we can add a divider between them.
There are many options available in flutter which you can use to provide space and make UI attractive. If you use Row and Column for arranging widgets, then by default limited options are available for alignment.
Try to replace
VerticalDivider(color: Colors.red, width: 20)
with
Container(height: 80, child: VerticalDivider(color: Colors.red))
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
