Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to underline a Container Widget in Flutter

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.

like image 331
MeLean Avatar asked Jul 01 '18 19:07

MeLean


People also ask

How do you underline Text on a button in Flutter?

When underlining everything you can set a TextStyle on the Text widget. If you only want to underline part of the text then you need to use Text. rich() (or a RichText widget) and break the string into TextSpans that you can add a style to.

How do you change the Text underline color in Flutter?

You can change the TextField underline color globally by defining the inputDecorationTheme and then adding the UnderlineInputBorder widget. Inside the UnderlineInputBorder widget, you can specify which type of border you want to change. for example, enabledBorder , focusedBorder , and so on, and then assign the color.


1 Answers

Add a bottom BorderSide to your container.

     Container(
        decoration: BoxDecoration(
           border: Border(
              bottom: BorderSide(width: 1.0, color: Colors.black),
           ),
       ),
    ),
like image 159
GraSim Avatar answered Sep 22 '22 07:09

GraSim