Flutter - Vertical Divider

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



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 sized box with a single (bottom) border. You could do the same but with dimensions switched.

I'll try to update with a source example but it's not easy to type it out on my phone ????. (And really, this might be worth a PR to flutter as it's a fairly common thing...)

import 'package:flutter/material.dart';
class VerticalDivider extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Container(
height: 30.0,
width: 1.0,
color: Colors.white30,
margin: const EdgeInsets.only(left: 10.0, right: 10.0),
);
}
}


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

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(),
);
}


add this method anywhere.

_verticalDivider() => BoxDecoration(
border: Border(
right: BorderSide(
color: Theme.of(context).dividerColor,
width: 0.5,
),
),
);


now wrap your content in container

Container(
decoration: _verticalDivider(),
child: //your widget code
);