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

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(
          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: