Search code examples
widgetflutterunderline

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.


Solution

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