83

I'm trying to use the VerticalDivider widget to separate items in the Row. Here is the whole body.

enter image description here

Row:

Row(
  children: <Widget>[
    Text('420 Posts', style: TextStyle(color: Color(0xff666666)),),
    VerticalDivider(
      thickness: 2,
      width: 20,
      color: Colors.black,
    ),
    Text('420 Posts', style: TextStyle(color: Color(0xff666666)),)
  ],
),
3
  • I test and it's showing fine. Commented Jan 29, 2020 at 3:51
  • show your whole widget or some parents widgets. Commented Jan 29, 2020 at 3:52
  • I updated the question. You can see the whole body in the Github Gist.
    – Burak
    Commented Jan 29, 2020 at 4:05

6 Answers 6

203

Wrap your Row with IntrinsicHeight,

IntrinsicHeight(
  child: Row(
    children: <Widget>[
      Text('420 Posts', style: TextStyle(color: Color(0xff666666)),),
      VerticalDivider(
        thickness: 2,
        width: 20,
        color: Colors.black,
      ),
      Text('420 Posts', style: TextStyle(color: Color(0xff666666)),)
    ],
  ),
)
8
  • 12
    That's works. I wonder why we need to wrap with IntrinsicHeight. Commented Jan 29, 2020 at 4:46
  • 2
    I am not sure. It forces all the children in row to reasonable height. Commented Jan 29, 2020 at 5:10
  • And in the latest Flutter SDK (Channel stable, v1.12.13+hotfix.5), the vertical divider actually tries to get the max height. So I am not getting the issue at all. Commented Jan 29, 2020 at 5:14
  • 2
    It works but I'd rather just use container (instead of VerticalDivider) than add another wrapper widget..
    – TGLEE
    Commented Feb 9, 2021 at 5:54
  • 10
    IntrinsicHeight is expensive to build so be careful and only use when there is no other solutions. In this case simple container would work. api.flutter.dev/flutter/widgets/IntrinsicHeight-class.html
    – Sangam
    Commented Jul 16, 2021 at 13:21
29

The VerticalDivider need height for work correctly, use it with the SizedBox or equivalent with height param defined.

Example:

SizedBox(
   height: 40
   child: VerticalDivider(
      thickness: 2,
      width: 20,
      color: Colors.black,
   ),
)
4

Wrap your row with IntrinsicHeight or specify some height of your row widget

Example With IntrinsicHeight :

IntrinsicHeight(
  child: Row(
    children: const [
      YourWidget1(),
      VerticalDivider(
        color: Colors.red,
      ),
      YourWidget2()
    ],
  ),
),

Example With Fixed Height :

SizedBox(
  height: 40,
  child: Row(
    children: const [
      YourWidget1(),
      VerticalDivider(
        color: Colors.red,
      ),
      YourWidget2()
    ],
  ),
),
4

When you add Vertical Divider inside Row, Wrap widget, it may not display because of varying heights. The main reason, for this reason, is the unrestricted height of the parent widget of the Row/Wrap widget. So use fixed height like a Container or IntrinsicHeight

3

You can also wrap Row into Container with specified height.

3
2

Wrap the VerticalDivider with SizedBox and specify the height

This works:

SizedBox(
  height: 200,
  child: VerticalDivider(
    width: 20,
    thickness: 1,
    color: Colors..teal
  ),
)
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.