Flutter divider widget not appearing

Question

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

Answer 1

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

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

Answer 2

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

Answer 3

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

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

Answer 4

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

Answer 5

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

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