How to underline a Container Widget in Flutter
10,898
Solution 1
You can use a simple Divider
widget including a padding:
new Padding(
padding: EdgeInsets.all(8.0),
child: new Divider()
),
You can then wrap your existing widget with a column:
new Column(
children: <Widget> [
yourContainerWidget,
new Padding(
padding: EdgeInsets.all(8.0),
child: new Divider()
),
]
)
Solution 2
Add a bottom BorderSide
to your container.
Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(width: 1.0, color: Colors.black),
),
),
),
Solution 3
You can simply to create underline in Container widget using Border
here the code:
Container(
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 1.0
),
),
),
child: Text(
'Underline my parent!',
maxLines: 2,
textAlign: TextAlign.center,
),
),
Solution 4
One simple solution is to create a line using Container
widget. And wrap Row widget using a Column widget and add that line as the second child, like below:
var aLine = Container(color: Colors.grey, width: 50.0, height: 2.0,);
Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'Underline my parent!',
maxLines: 2,
textAlign: TextAlign.center,
),
),
),
],
),
aLine
],
),
Related videos on Youtube
Comments
-
MeLean almost 2 years
I am trying to underline a Container in my Flutter app. So far I achieved a some kind of underling when I used the following code:
Container( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Expanded( child: Padding( padding: EdgeInsets.all(8.0), child: Text( 'Underline my parent!', maxLines: 2, textAlign: TextAlign.center, ), ), ) ], ), decoration: Border(bottom: BorderSide(color: Colors.grey)), ),
But now I want the underline dash not being from start to end, I want to have space on the start and on the end. If there is some smarter way to underline widgets I would be glad to see it too.
-
MeLean almost 6 yearsOk, but where should go this Divider? After Container?
-
MeLean almost 6 yearsIt is a quite good approach, but I can not set the divider width now.
-
Bostrot almost 6 yearsThen try to remove the padding around it.
-
MeLean almost 6 yearsI mean width of underling dash, now it is fixed pixels, I do not see any possibility to make it's width for example 5 pixels
-
Bostrot almost 6 yearsWell, you could put it in a Container and set the width with the
width
property.