How to underline text in flutter

How to underline text in flutter inside Text widget?

I cannot seem to find underline inside fontStyle property of TextStyle

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:

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

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.

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

For example

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

for example

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

Control the distance between the text and underline in one line

Building on Joe Muller's answer here is an extension method that allows to have control over the text/underline distance without cluttering the widget tree's code. It's used like this:

Widget build(BuildContext context) {
  final myStyle = Theme.of(context).textTheme.headline4;

  return Text(
    'Hello, World!',
    //------------------------------------------------
    // simply apply the underlined method to the style
    style: myStyle?.underlined(distance: 2),
    //------------------------------------------------
  );
}

Here is the extension:

extension TextStyleX on TextStyle {
  /// A method to underline a text with a customizable [distance] between the text
  /// and underline. The [color], [thickness] and [style] can be set
  /// as the decorations of a [TextStyle].
  TextStyle underlined({
    Color? color,
    double distance = 1,
    double thickness = 1,
    TextDecorationStyle style = TextDecorationStyle.solid,
  }) {
    return copyWith(
      shadows: [
        Shadow(
          color: this.color ?? Colors.black,
          offset: Offset(0, -distance),
        )
      ],
      color: Colors.transparent,
      decoration: TextDecoration.underline,
      decorationThickness: thickness,
      decorationColor: color ?? this.color,
      decorationStyle: style,
    );
  }
}

The extension also allows to control the underline color, thickness and style just like any other underline decoration. Have a look at a more complete example in this DartPad.

It is still a hack but it allows to keep the widget tree's code clean in the wait for a fix from the Flutter team.

Following is a simple code

Text(
  'Welcome to Flutter',
  style: TextStyle(decoration:TextDecoration.underline,),
),

You can use decorationStyle to customize it

Text(
  'Welcome to Flutter',
  style: TextStyle(
  fontSize: 24,
  decoration: TextDecoration.underline,
  decorationStyle: TextDecorationStyle.double,
  ),
),

Here is other TextDecorationStyle values:

• TextDecorationStyle.dashed
• TextDecorationStyle.dotted
• TextDecorationStyle.double
• TextDecorationStyle.wavy

style: TextStyle( decoration: TextDecoration.underline, ),