Flutter divider widget not appearing - flutter

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 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:
Also:
Is there any way to increase the size of the actual line from the Divider? (Not just the spacing)
Thanks!

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

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 3

Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: Colors.lightGreen,width: 3.0),
),
),
)
Instead of using divider you can use a customized container...

Answer 4

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 5

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

Answer 6

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

Answer 7

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 8

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

Answer 9

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

Answer 10

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

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

Answer 12

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

Answer 13

Just adding the thickness parameter to 1 or above will solve the issue.
Working sample:
const Divider(
height: 1,
thickness: 1),

Answer 14

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

Answer 15

Just Use this function for wherever you want
Divider verticalDivider() {
return Divider(
height: 2,
color: Colors.greenAccent,
);
}