How to underline a Container Widget in Flutter

Question

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.

GraSim · Answer 1 · 2020-11-23T19:18:28.780

26

Add a bottom BorderSide to your container.

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

edited Nov 23 '20 at 19:18

answered Aug 27 '20 at 00:40

GraSim

3,830
1
29
35

Bostrot · Accepted Answer · 2020-04-21T23:16:23.473

7

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

edited Apr 21 '20 at 23:16

answered Jul 01 '18 at 19:38

Bostrot

5,767
3
37
47

Ok, but where should go this Divider? After Container? – MeLean Jul 01 '18 at 19:41
It is a quite good approach, but I can not set the divider width now. – MeLean Jul 01 '18 at 19:52
Then try to remove the padding around it. – Bostrot Jul 01 '18 at 19:53
I 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 – MeLean Jul 01 '18 at 19:58
Well, you could put it in a Container and set the width with the `width` property. – Bostrot Jul 01 '18 at 20:01

score 5 · Answer 3 · answered Jul 28 '20 at 04:31

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

score 1 · Answer 4 · answered Jul 02 '18 at 06:14

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

score 0 · Answer 5 · answered Sep 04 '22 at 05:58

0

User this const Divider(color: Colors.black54),

answered Sep 04 '22 at 05:58

germain kataku

21
4

What kind of value adds your answer more then the accepted answer given by Bostrot? – MeLean Sep 20 '22 at 06:35

How to underline a Container Widget in Flutter

5 Answers5