Flutter Text Underline

Hello guys how are you all? Hope you all are fine. Today in this tutorial we are going to learn Flutter Text Underline. Here we will talk about all possible methods to add Text underline in a flutter. So without wasting your time, Let’s start this tutorial.

Flutter Text Underline

1. Using underline

You can underline everything you can set a TextStyle on the Text widget.

Example

            Text(
              'FlutterCorner',
              style: TextStyle(
                decoration: TextDecoration.underline,
              ),
            )

Output

2. Using Text.rich()

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.

Example

            Text.rich(
              TextSpan(
                text: 'Flutter',
                style: TextStyle(fontSize: 50),
                children: <TextSpan>[
                  TextSpan(
                    text: 'Corner',
                    style: TextStyle(
                      decoration: TextDecoration.underline,
                    ),
                  ),
                  
                ],
              ),
            )

Output

3. Using TextDecorationStyle.dashed

You can also add a TextDecorationStyle to change how the decoration looks. Here is dashed:

Example

            Text(
              'FlutterCorner',
              style: TextStyle(
                decoration: TextDecoration.underline,
                decorationStyle: TextDecorationStyle.dashed,
                fontSize: 40,
              ),
            ),

Output

1. Using TextDecorationStyle.dotted

You can also add a TextDecorationStyle to change how the decoration looks. Here is dotted:

Example

            Text(
              'FlutterCorner',
              style: TextStyle(
                decoration: TextDecoration.underline,
                decorationStyle: TextDecorationStyle.dotted,
                fontSize: 40,
              ),
            ),

Output

1. Using TextDecorationStyle.double

You can also add a TextDecorationStyle to change how the decoration looks. Here is double:

Example

            Text(
              'FlutterCorner',
              style: TextStyle(
                decoration: TextDecoration.underline,
                decorationStyle: TextDecorationStyle.double,
                fontSize: 40,
              ),
            ),

Output

1. Using TextDecorationStyle.wavy

You can also add a TextDecorationStyle to change how the decoration looks. Here is wavy:

Example

            Text(
              'FlutterCorner',
              style: TextStyle(
                decoration: TextDecoration.underline,
                decorationStyle: TextDecorationStyle.wavy,
                fontSize: 40,
              ),
            ),

Output

Summery

So it’s all About Flutter Text Underline. Hope this above-all solution helped you a lot. Comment below Your thoughts and your queries. Comment Below on your suggestion.

Check Out Below Article

• How to make a blur Background Image effect in Flutter using BackdropFilter.
• Create Rounded Corners Image in Flutter.
• set Background Image to Scaffold in Flutter.
• How To Select multiple images with Flutter
• How to Set Network Image In Circular Avatar In Flutter?