43

I'm currently learning how to build apps using the Flutter SDK and Android Studio. My problem is that I need to add a Divider widget between the 'Administrative' text and the rest of the Card but as you can see in the screenshot below, the divider isn't showing up. I've tried changing the size (In which case the space between the two texts just increases) and I've tried setting the color to see if it was defaulting to transparent on my phone. Nothing works!

Here's my code for the Card Widget State:

class BBSCardState extends State<BBSCard>{
  @override
  Widget build(BuildContext context) {
    return new Padding(
      padding: const EdgeInsets.only(top: 16.0, bottom: 16.0, left: 12.0, right: 12.0),
      child: new Card(
        child: new Row(
          children: <Widget>[
            new Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                new Padding(
                  padding: const EdgeInsets.only(top: 22.0, bottom: 8.0),
                  child: new Text("Administrative", style: new TextStyle(color: new Color.fromARGB(255, 117, 117, 117), fontSize: 32.0, fontWeight: FontWeight.bold)),
                ),
                new Divider(),
                new Text("text")
              ],
            ),
          ],
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
        )
      )
    );
  }
}

And here's the screenshot of what the card looks like:

The divider does not appear between the two texts

Also: Is there any way to increase the size of the actual line from the Divider? (Not just the spacing)

Thanks!

18 Answers 18

59

You could remove Row, then Column would take all available space and Divider would have width.

@override
Widget build(BuildContext context) {
  return new Padding(
    padding: const EdgeInsets.only(
        top: 16.0, bottom: 16.0, left: 12.0, right: 12.0),
    child: new Card(
      child: new Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          new Padding(
            padding: const EdgeInsets.only(top: 22.0, bottom: 8.0),
            child: new Text("Administrative",
                style: new TextStyle(
                    color: new Color.fromARGB(255, 117, 117, 117),
                    fontSize: 32.0,
                    fontWeight: FontWeight.bold)),
          ),
          new Divider(
            color: Colors.red,
          ),
          new Text("text")
        ],
      ),
    ),
  );
}

Result

To make custom divider you could check implementation of Divider and adjust it. E.g. replace Divider with

new SizedBox(
  height: 10.0,
  child: new Center(
    child: new Container(
      margin: new EdgeInsetsDirectional.only(start: 1.0, end: 1.0),
      height: 5.0,
      color: Colors.red,
    ),
  ),
)

CustomDivider

2
  • 1
    Oh, I see! Thanks, I'm very new to dart and am coming straight from Android. Some of these concepts aren't too easy for me to grasp. Commented Mar 4, 2018 at 15:49
  • 2
    If you needed the row widget there, another way to provide the column width for the Divider class would be to wrap the Column Widget with something like Expanded - then your code would work.
    – Chanakya
    Commented Jul 2, 2021 at 21:12
18

it was happening to me but I found out that this property solves it: thickness

 child: Divider(
                color: Colors.teal.shade100,
                thickness: 1.0,
              ),
16

I had the same issue, but by putting my Divider inside an Expanded Widget fixed my problem.

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Expanded(
      child: Divider(
        thickness: 1,
        color: Color(0xff818181),
      ),
    ),
    SizedBox(width: 10),
    Text(
      'Login using Social Media',
      style: TextStyle(color: Color(0xff818181), fontWeight: FontWeight.w500),
    ),
    SizedBox(width: 10),
    Expanded(
      child: Divider(
        thickness: 1,
        color: Color(0xff818181),
      ),
    ),
  ],
),
12

In Column, use Divider() and in Row, use VerticalDivider()

10
Container(
           decoration: BoxDecoration(
             border: Border(
               bottom: BorderSide(color: Colors.lightGreen,width: 3.0),
             ),
           ),
         ) 

Instead of using divider you can use a customized container...

2
 Container(
                    width: 200,
                    child: Divider(
                      thickness: 10,
                      color: Colors.red,
                    ),
                  ),

or 
 Expanded(
                    child: Divider(
                      thickness: 10,
                      color: Colors.red,
                    ),
                  ),
1

If you want to draw line for the Widget Views, Try using the BoxDecoration as like in below example

child: new Container(
  decoration: new BoxDecoration(
   border: Border(
    top: BorderSide(width: 1.0, color: Colors.grey),
    left: BorderSide(width: 1.0, color: Colors.grey),
    right: BorderSide(width: 1.0, color: Colors.grey),
    bottom: BorderSide(width: 1.0, color: Colors.grey),),
 );

 child: new Row( 
         ....
 ),
)
1

If you want to use it inside row like you have multiple widgets to show inside row and also a divider then you can use Sizedbox with height and width . pasting code

 SizedBox(
            width: 60,
            height: 30,
            child: Divider(
              height: 20,

              color: defaultColor,
              thickness: 5,
            ),
          ),
0

Horizontal divider

Container(
  width: double.infinity,
  height: 2, // Thickness
  color: Colors.grey,
)

Vertical divider

Container(
  width: 2, // Thickness
  height: double.infinity,
  color: Colors.grey,
)
0

Recently I have to archive divider which have circular corner. but if I'm using container with border side it's not give accurate output. So you can use this code if you want circular corner.

ClipRRect(
                  borderRadius: BorderRadius.circular(6.33.r),
                  child: Container(
                    width: 100.w,
                    decoration: BoxDecoration(
                      border: Border(
                        bottom: BorderSide(
                            color: Color.fromRGBO(196, 196, 196, 0.6),
                            width: 5.0.w),
                      ),
                    ),
                  ),
                ),
0

I tried with expanded widget but not worked. But only this way it works for me

SizedBox(
        height: 50,
        child: VerticalDivider(
          thickness: 3,
          width: 4,
          indent: 0,
          color: ColorConstants.silverColor,
        ),
      ),

This way also worked for me, when I wrapped parent (Row) with IntrinsicHeight

IntrinsicHeight(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: const [       
      Padding(
        padding: EdgeInsets.symmetric(horizontal: 15.0),
        child: VerticalDivider(
          thickness: 3,
          width: 4,
          indent: 0,
          color: ColorConstants.silverColor,
        ),
      ),
      HighTrendWidget(
        trendValue: 'HIGH',
        trendDifference: '1743.88',
      )
    ],
  ),
)
0

Just adding the thickness parameter to 1 or above will solve the issue.

Working sample:

const Divider(
     height: 1,
     thickness: 1), 
0

The code below worked for me:

PreferredSize(
   preferredSize: Size.fromHeight(1),
   child: Container(
      color: Colors.grey,
      height: 1,
   ),
),

Note that PreferredSize is a Widget

0

Delete this line: import: dart:js_util;

I had a same problem. But it had another reason. It was because of: import: dart:js_util; After removing this line, my issue was resolved. While I'm uncertain about the specific impact of this library on the Divider, it appears that it was preventing the Divider from being displayed.

0

This works for me

Card (
   child: Column ( 
      children: [ 
       Text("Text"), 
       SizedBox( 
          width: 100.00, 
          child: Divider( color: Colors.grey, thickness: 1.0),),
      ],
   )
),
-1
 Padding(
        padding: const EdgeInsets.only(right:20),
            child:Divider(
              color: Color(0xfff8a9c5),
              thickness: 2,


            ),
      ),
-1

Just Use this function for wherever you want

 Divider verticalDivider() {
   return Divider(
      height: 2,
      color: Colors.greenAccent,
    );
  }
1
-1

Add the thickness:

Divider(
   thickness: 1,
   color: Colors.teal.shade100,
)

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.