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?