How to underline text in flutter

Question

How to underline text in flutter inside Text widget?

I cannot seem to find underline inside fontStyle property of TextStyle

Answer 1

You can use TextDecoration in style to underline a given text.

For example

Text(
    "Your text here",
    style: TextStyle(
        decoration: TextDecoration.underline),
    )
)

Answer 2

Exciting solution
If you want to have control over the distance between the text and the underline, you can use this hack. In short, you hide the actual text using Colors.transparent and then display an offset shadow that hovers above the Text underline.

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

As you'll see below, if you use the out-of-the-box Text underline, it sticks to the bottom of the text and can look a bit ugly,

Boring Solutions

Using just the Text widget you can add the underline with a custom style and color:

Text(
  "Forgot Password?",
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationColor: Colors.blue,
    decorationThickness: 4,
    decorationStyle: TextDecorationStyle.dashed,
   ),
)

The only issue I have with this approach is that you have no control over how close the underline is to the bottom of the text.

If you want to increase the spacing, you'll have to use an unconventional approach that uses Container and it's padding property.

Container(
     padding: EdgeInsets.only(
       bottom: 5, // Space between underline and text
     ),
     decoration: BoxDecoration(
         border: Border(bottom: BorderSide(
         color: Colors.amber, 
         width: 1.0, // Underline thickness
        ))
      ),
     child: Text(
        "Forgot Password?",
        style: TextStyle(
        color: Colors.black,
        ),
       ),
      )

Keep an eye on this GitHub issue for a simpler solution.

Answer 3

When underlining everything you can set a TextStyle on the Text widget.

Text(
  'Hello world',
  style: TextStyle(
    decoration: TextDecoration.underline,
  ),
)

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.

Text.rich(
  TextSpan(
    text: 'Hello ',
    style: TextStyle(fontSize: 50),
    children: <TextSpan>[
      TextSpan(
          text: 'world',
          style: TextStyle(
            decoration: TextDecoration.underline,
          )),
      // can add more TextSpans here...
    ],
  ),
)

TextSpan is a little strange. The text parameter is the default style but the children list contains the styled (and possibly unstyled) text that follow it. You can use an empty string for text if you want to start with styled text.

You can also add a TextDecorationStyle to change how the decoration looks. Here is dashed:

Text(
  'Hello world',
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationStyle: TextDecorationStyle.dashed,
  ),
)

and TextDecorationStyle.dotted:

and TextDecorationStyle.double:

and TextDecorationStyle.wavy:

Answer 4

You do it by applying decoration: TextDecoration.underline to TextStyle of a Text.

With Theme example:

          Text(
            "text",
            style: Theme
                .of(context)
                .accentTextTheme
                .subhead
                .copyWith(decoration: TextDecoration.underline),
          )

Basic example:

          Text(
            "text",
            style: TextStyle(decoration: TextDecoration.underline),
          )

Answer 5

for example

Text(
  "Terms and Condition",
  style: TextStyle(
    decoration:
        TextDecoration.underline,
    height: 1.5,
    fontSize: 15,
    fontWeight: FontWeight.bold,
    fontFamily: 'Roboto-Regular',
  ),
),