Flutter - Vertical Divider

Not as far as I know. However, it is quite simple to create one — if you look at the source for Flutter's Divider you'll see that it is simply a SizedBox with a single (bottom) border. You could do the same but with dimensions switched.


Update (Oct 4, 2018): a VerticalDivider implementation has been merged in by the Flutter team. Check out the docs but it's very simple to use — simply put it between two other items in a row.

Note: If you are using VerticalDivider as separator in Row widget then wrap Row with IntrinsicHeight , Container or SizedBox else VerticalDivider will not show up. For Container and SizedBox widget you need define height.


As of 10 days ago, flutter has merged a VerticalDivider implementation. It will be available in the default channel very soon, but for now you have to switch to the dev channel to use it: flutter channel dev.

Here is a example of how to use it:

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

There are 2 easy ways for both of them.


Vertical dividers:

  1. VerticalDivider()
    
  2. Container(
      width: 1,
      height: double.maxFinite,
      color: Colors.grey,
    )
    

Horizontal dividers:

  1. Divider()
    
  2. Container(
      height: 1,
      width: double.maxFinite,
      color: Colors.grey,
    )
    

Tags:

Flutter