Flutter - Vertical Divider

Question

In flutter, is there an option to draw a vertical line between components as in the image.

Answer 1

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

Answer 2

As @rwynnchristian suggested, this seems to be the simplest solution IMO. Just leaving the code here:

import 'package:flutter/material.dart';
class VerticalDivider extends StatelessWidget {
  @override
  Widget build(BuildContext context) => RotatedBox(
    quarterTurns: 1,
    child: Divider(),
  );
}

Answer 3

Tried with VerticalDivider() but cannot get any divider. I Solved it with

 Container(color: Colors.black45, height: 50, width: 2,),

Answer 4

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.

Answer 5

Try RotatedBox in combination with a divider to get it vertical, RotatedBox is a widget of flutter that automatically rotates it's child based on the quarterTurn property you have to specify. Head over to here for a detailed explanation https://docs.flutter.io/flutter/widgets/RotatedBox-class.html

Answer 6

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