How to Underline text in Flutter: Different Variations

Do you want to add underline text in flutter? If yes then you have come to the right place. In this entire article, you will learn how to create an underline text in a flutter.

Create a Text in a flutter

To create a text in flutter you have to use Text() widget.

Center(
            child: Text(
          "Code the Best",
          style: TextStyle(fontSize: 40),
        ))

Output

How to create underline text

To create an underline text in flutter you have to use the decoration attribute inside the TextStyle() constructor like below.

TextStyle(
    decoration: TextDecoration.underline,
  )

Underline Text in a flutter

Let’s Simply underline the text using the TextDecoration.underline.

Text(
          "Code the Best",
          style: TextStyle(fontSize: 40, decoration: TextDecoration.underline),
        )

Output

Dashed Underline text

In the same way, you can create dashlined text using the TextDecorationStyle.dashed.

Text(
          "Code the Best",
          style: TextStyle(
              fontSize: 40,
              decoration: TextDecoration.underline,
              decorationStyle: TextDecorationStyle.dashed),
        )

Output

Dotted Underline Text

Use the TextDecorationStyle.dotted for the dotted underlined text.

Text(
          "Code the Best",
          style: TextStyle(
              fontSize: 40,
              decoration: TextDecoration.underline,
              decorationStyle: TextDecorationStyle.dotted),
        )

Output

Double Underline Text

If you want to add a double underline below the text then you will use the TextDecorationStyle.double.

Text(
          "Code the Best",
          style: TextStyle(
              fontSize: 40,
              decoration: TextDecoration.underline,
              decorationStyle: TextDecorationStyle.double),
        )

Output

Wavy Underline Text

You can also create a wavy underline text using the TextDecorationStyle.wavy.

Text(
          "Code the Best",
          style: TextStyle(
              fontSize: 40,
              decoration: TextDecoration.underline,
              decorationStyle: TextDecorationStyle.wavy),
        )

Output

Conclusion

There are ways to create different variations of the underlined text in a flutter. You can also change the color of the underline text to look more beautiful. I hope you have liked this article and understood how to create underlined text in flutter.

If you have any queries then you can contact us for more help.