CODEWITHSUNDEEP
flutter
Nathan Bird
Nathan Bird

Reputation: 932

Flutter divider widget not appearing

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!

Upvotes: 43

Views: 127059

Answers (18)

Ferer Atlus
Ferer Atlus

Reputation: 288

This works for me

Card (
   child: Column ( 
      children: [ 
       Text("Text"), 
       SizedBox( 
          width: 100.00, 
          child: Divider( color: Colors.grey, thickness: 1.0),),
      ],
   )
),

Upvotes: 0

shahabedin mohamadi
shahabedin mohamadi

Reputation: 1

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.

Upvotes: 0

Aahil Alwani
Aahil Alwani

Reputation: 117

The code below worked for me:

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

Note that PreferredSize is a Widget

Upvotes: 0

Aminul Haque Aome
Aminul Haque Aome

Reputation: 2599

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

Upvotes: 12

Gokul Raj Kumar
Gokul Raj Kumar

Reputation: 353

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

Working sample:

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

Upvotes: 0

Neo
Neo

Reputation: 419

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

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

Upvotes: 18

Esteban Rafael Trivino Guerra
Esteban Rafael Trivino Guerra

Reputation: 29

Add the thickness:

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

Upvotes: -1

hamza irfan
hamza irfan

Reputation: 11

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

Upvotes: 1

Aizan Sagheer
Aizan Sagheer

Reputation: 1564

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

Upvotes: 0

Shailendra Rajput
Shailendra Rajput

Reputation: 2887

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

Upvotes: 0

Anandh Krishnan
Anandh Krishnan

Reputation: 5984

Just Use this function for wherever you want

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

Upvotes: -1

kalide
kalide

Reputation: 99

 Padding(
        padding: const EdgeInsets.only(right:20),
            child:Divider(
              color: Color(0xfff8a9c5),
              thickness: 2,


            ),
      ),

Upvotes: -1

CopsOnRoad
CopsOnRoad

Reputation: 267664

Horizontal divider

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

Vertical divider

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

Upvotes: 0

Musfiq Shanta
Musfiq Shanta

Reputation: 1615

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

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

Upvotes: 2

Merouane T.
Merouane T.

Reputation: 876

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

Upvotes: 16

Trendy
Trendy

Reputation: 277

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( 
         ....
 ),
)

Upvotes: 1

dolar
dolar

Reputation: 1785

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

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

Upvotes: 10

German Saprykin
German Saprykin

Reputation: 6951

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

Upvotes: 59

Related Questions