CODEWITHSUNDEEP
flutterdartflutter-layout
Praveen Kumar
Praveen Kumar

Reputation: 1727

Flutter - Vertical Divider and Horizontal Divider

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

enter image description here

Upvotes: 130

Views: 212685

Answers (16)

Himal Thapa
Himal Thapa

Reputation: 1

out of all the answers the simplest I found for me is to simply wrap the row widget with IntrinsicHeight widget for now....

Upvotes: 0

MrMoon
MrMoon

Reputation: 41

you can use a Container as a divider, with the desired with 'thickness if for horizontal divider' height 'thickness if for vertical divider'

Container(
           color: Colors.blue,
           width: 7,
           height: 77,
           ),

This class is relatively expensive. Avoid using it where possible. (As mentioned in the documentation) – Omar Fayad

Upvotes: 0

prenszuko
prenszuko

Reputation: 55

I guess i found a more robust solution when dealing with this problem;enter image description here

IntrinsicHeight(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Expanded(
                        child: Container(
                          decoration: BoxDecoration(borderRadius: BoxRadius.circular(),color: Colors.gray),
                          height: 5,
                          margin: CustomPaddings.horizontal(),
                        ),
                      ),
                      Text(
                        "TEST",
                        style: Theme.of(context)
                            .textTheme
                            .subtitle1!
                            .copyWith(
                                color: Colors.black,
                                fontWeight: FontWeight.bold),
                      ),
                      Expanded(
                        child: Container(
                          decoration: BoxDecoration(borderRadius: BoxRadius.circular(),color: Colors.gray),
                          height: 5,
                          margin: CustomPaddings.horizontal(),
                        ),
                      ),
                    ],
                  ),
                ),

Upvotes: 2

ali sampson
ali sampson

Reputation: 467

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

Upvotes: 11

CopsOnRoad
CopsOnRoad

Reputation: 267664

Vertical divider:

  • As a direct child:

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

  • In a Row:

    enter image description here

    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:

    enter image description here

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

Upvotes: 99

Prakash Basnet
Prakash Basnet

Reputation: 121

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

Upvotes: 1

MBK
MBK

Reputation: 3364

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

enter image description here

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

Upvotes: 1

Dinith Herath
Dinith Herath

Reputation: 131

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.

Upvotes: 8

rmtmckenzie
rmtmckenzie

Reputation: 40433

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.

Upvotes: 206

minato
minato

Reputation: 2332

Try to wrap it inside the Container with some height as

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

Upvotes: 27

yubaraj poudel
yubaraj poudel

Reputation: 3889

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

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

Upvotes: 13

jgillich
jgillich

Reputation: 76219

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

Upvotes: 74

Nomi
Nomi

Reputation: 760

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

Upvotes: 3

Dork
Dork

Reputation: 31

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

Upvotes: 3

rwynn christian
rwynn christian

Reputation: 59

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

Upvotes: 0

Victor Tong
Victor Tong

Reputation: 1007

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

Upvotes: 24

Related Questions