Flutter – How to underline text in flutter

flutter

How to underline text in flutter inside Text widget?

I cannot seem to find underline inside fontStyle property of TextStyle

Best Answer

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

enter image description here

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.

enter image description here

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:

enter image description here

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

and TextDecorationStyle.dotted:

enter image description here

and TextDecorationStyle.double:

enter image description here

and TextDecorationStyle.wavy:

enter image description here

Related Topic