close

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

text underline flutter

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

Flutter Text Underline

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

dashed underline flutter

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

dotted underline flutter

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

double underline flutter

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

wavy underline flutter

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

Leave a Comment

%d bloggers like this: