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

Text without underline
Text without underline

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

Underline text in flutter
Underline text

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

Dashed Underline text in flutter
Dashed Underline text

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

Dotted Underline text in flutter
Dotted Underline text

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

Double Underline text in flutter
Double Underline text

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

Wavy Underline text in flutter
Wavy Underline text

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.

 

Code The Best
Hi, I am CodeTheBest. Here you will learn the best coding tutorials on the latest technologies like a flutter, react js, python, Julia, and many more in a single place.