Flutter - Vertical Divider and Horizontal Divider

Solution 1:

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.

Solution 2:

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

Solution 3:

Vertical divider:

• As a direct child:

  VerticalDivider(
    color: Colors.black,
    thickness: 2,
  )
  

• In a Row:

  

  IntrinsicHeight(
    child: Row(
      children: [
        Text('Hello'),
        VerticalDivider(
          color: Colors.black,
          thickness: 2,
        ),
        Text('World'),
      ],
    ),
  )
  

Horizontal divider:

• As a direct child:

  Divider(
    color: Colors.black,
    thickness: 2,
  )
  

• In a Column:

  

  IntrinsicWidth(
    child: Column(
      children: [
        Text('Hello'),
        Divider(
          color: Colors.black,
          thickness: 2,
        ),
        Text('World'),
      ],
    ),
  )
  

Solution 4:

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