Flutter - Vertical Divider and Horizontal Divider

Question

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

Answer 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.

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

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

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

Answer 5

Try to wrap it inside the Container with some height as

Container(height: 80, child: VerticalDivider(color: Colors.red)),

Answer 6

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

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

Answer 7

You can use a vertical divider with a thickness of 1.

          VerticalDivider(
            thickness: 1,
            color: Color(0xFFF6F4F4),
          ),

And if you can't see the vertical divider wrap the row with a IntrinsicHeight widget.

Answer 8

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 9

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

Answer 10

Use Container for divider is easy, wrap your row in IntrinsicHeight()

          IntrinsicHeight(
                child: Row(
                  children: [
                    Text(
                      'Admissions',
                      style: TextStyle(fontSize: 34),
                    ),
                    Container(width: 1, color: Colors.black), // This is divider
                    Text('another text'),
                  ],
                ),

Answer 11

Just wrap your Row in IntrinsicHeight widget and you should get the desired result:

IntrinsicHeight(
    child: Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    Text('Name'),
    VerticalDivider(),
    Text('Contact'),
  ],
))

Answer 12

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 13

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.

IntrinsicHeight(
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Flexible(
                      child: VerticalDivider(
                        thickness: 0.8,
                        color: Colors.grey,
                      ),
                    ),
                    Flexible(
                      child: Text(
                        "Random Text",
                        style: TextStyle(
                            fontSize: 12,
                            color: AppColor.darkHintTextColor,),
                      ),
                    ),
                  ],
                ),
              )