37

today I am trying to make sticker.ly app UI in a flutter. But I stuck in adding space between underline and text. here is my code

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Container(
            padding: EdgeInsets.all(13),
            margin: MediaQuery.of(context).padding,
            child: Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Text('For You', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16, decoration: TextDecoration.underline,),),
                    SizedBox(width:8),
                    Text('Sticker', style: TextStyle(color: Colors.black54, fontWeight: FontWeight.bold, fontSize: 16),),
                    SizedBox(width:8),
                    Text('Status', style: TextStyle(color: Colors.black54, fontWeight: FontWeight.bold, fontSize: 16),),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

and here I want to add space between underline and Text('For You') . is there any way to do this in a much better way?

8 Answers 8

69

Here's a simple hacky way to do it:

Text(
            "Forgot Password?",
            style: TextStyle(
              shadows: [
                Shadow(
                    color: Colors.red,
                    offset: Offset(0, -5))
              ],
              color: Colors.transparent,
              decoration:
              TextDecoration.underline,
              decorationColor: Colors.blue,
              decorationThickness: 4,
              decorationStyle:
              TextDecorationStyle.dashed,
            ),
          )

I wrote an article about text underlining with a few other solutions but this is my favorite.

3
  • 2
    Nice solution! I have wrapped the code into an extension that avoids cluttering the widget's code, see this answer: stackoverflow.com/a/69343754/2083587
    – mr_mmmmore
    Sep 27, 2021 at 9:07
  • That seems tricky to me Dec 30, 2022 at 6:29
  • Remember to wrap your Text widget with Transform.translate with opposite Offset (Offset(0,5) for this example) otherwise Text would be rendered in different position than it was before Jun 9, 2023 at 8:34
16

You can try something like this:

Container(
padding: EdgeInsets.only(
  bottom: 3, // This can be the space you need between text and underline
),
decoration: BoxDecoration(
  border: Border(bottom: BorderSide(
    color: Colors.black,
    width: 1.0, // This would be the width of the underline
  ))
),
child: Text(
  "For You",style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16, decoration: TextDecoration.underline,)
  ,),)
5
  • why you copied your answer from StackOverflow?... I tried this doesn't work for me May 6, 2020 at 10:39
  • provide your unique answer to grow flutter community, not a copied answer May 6, 2020 at 10:45
  • I tried it personally and it worked, I am sorry if it didn't work for you. May 6, 2020 at 10:46
  • this is perfect! because the first answer actually creates the underline, but no control over the spacing and almost always they are too close together.
    – Aadn
    Oct 27, 2021 at 18:08
  • 2
    I think this should be the accepted answer
    – JFValdes
    Mar 5, 2022 at 9:23
3

Little improved version of https://stackoverflow.com/a/64839295/7683297

Text(
                                    cohort.name,
                                    maxLines: 2,
                                    overflow: TextOverflow.ellipsis,
                                    textAlign: TextAlign.center,
                                    style: TextStyle((
                                      height: 1.5,
                                      shadows: [
                                        Shadow(
                                            color: Colors.black,
                                            offset: Offset(0, -5))
                                      ],
                                      color: Colors.transparent,
                                      decoration: TextDecoration.underline,
                                      decorationColor: Colors.black,
                                    ),
1
  • cool this is the easiest method thanks! Mar 22 at 7:30
2

after a lot of tries I am able to resolve by issue. Here is my code

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Container(
            padding: EdgeInsets.all(13),
            margin: MediaQuery.of(context).padding,
            child: Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Text('For You', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16,),),
                    SizedBox(width:8),
                    Text('Sticker', style: TextStyle(color: Colors.black54, fontWeight: FontWeight.bold, fontSize: 16),),
                    SizedBox(width:8),
                    Text('Status', style: TextStyle(color: Colors.black54, fontWeight: FontWeight.bold, fontSize: 16),),
                  ],
                ),
                Row(children: <Widget>[
                  Padding(padding: EdgeInsets.symmetric(horizontal: 1, vertical: 5),
                  child: Container(
                    height: 3,
                    width: 52,
                    color: Colors.black,
                  ),
                  ),
                ],),
              ],
            ),  
          ),
          //search bar layout
          Container(
            child: Column(children: <Widget>[

            ],),
          ),
        ],
      ),
    );
  }
}
2

Here's my non-hacky way to do it (hack wasn't working for me):

IntrinsicWidth(
  child: Column(
  children: [
    Text(dateRange, style: _jobTitleStyle(context)),
    Container(height: 1, color: Colors.white),
  ],
 ),
),

Draw a line with a Container like so. Then shrink it to match the size of Text by using IntrinsicWidth (note, this may have performance impact if overused).

2
 Container(
    decoration:  BoxDecoration(
                    border: Border(
                    bottom: BorderSide(color: Colors.black))
                 ),
     child: const Text("Forgot password ?"),
 )

enter image description here

0

Posting what's worked for me here. Tried all the above answers but they didn't help me

IntrinsicWidth(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.start,
              children: const [
                Text(
                  "Show more product and categories",
                ),
                Divider(
                  thickness: 0.3,
                ),
              ],
            ),
          )

Here is how it looks like

enter image description here

IntrinsicWidth() is used to limit the Divider() width with Text() widget

-1

This underlining way, has a bigger padding between text and the underline:

Container(
  child: Text.rich(
    TextSpan(
      style: TextStyle(
        ...,
        decoration: TextDecoration.underline,
      ),
      children: [...],
    ),
  ),
),

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.