How to underline a Container Widget in Flutter

widget flutter underline
MeLine picture MeLine · Jul 1, 2018 · Viewed 7.4k times · Source

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.

Answer

GraSim picture GraSim · Aug 27, 2020

Add a bottom BorderSide to your container.

     Container(
        decoration: BoxDecoration(
           border: Border(
              bottom: BorderSide(width: 1.0, color: Colors.black),
           ),
       ),
    ),

Related questions

How do I center text vertically and horizontally in Flutter?

I'd like to know how to center the contents a Text widget vertically and horizontally in Flutter. I only know how to center the widget itself using Center(child: Text("test")) but not the content itself, it's by default left …

Read More
How to get a height of a Widget?

I don't understand how LayoutBuilder is used to get the height of a Widget. I need to display the list of Widgets and get their height so I can compute some special scroll effects. I am developing a package and …

Read More
When the keyboard appears, the Flutter widgets resize. How to prevent this?

I have a Column of Expanded widgets like this: return new Container( child: new Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[ new Expanded( flex: 1, child: convertFrom, ), new Expanded( flex: 1, child: convertTo, ), new Expanded( flex: 1, child: description, ), ], ), ); It looks like …

Read More