In Flutter, underlining a text is easy. This post has listed 6 ways to make it happen.
Let’s start…
Contents
1. How To Underline Text in Flutter?
Flutter provides a constant value to make underlined text – TextDecoration.underline. Use it as value of decoration inside TextStyle.
- So remember, decoration: TextDecoration.underline.
Text(
'Flutter Text Underline Example',
style: TextStyle(
//creates underlined text.
decoration: TextDecoration.underline,
),
),
1.1 Dashed Underline
Making a dashed underline is easy with Text widget. You just need to use below code inside TextStyle.
- decoration: TextDecoration.underline – creates underline Text.
- decorationStyle: TextDecorationStyle.dashed – Makes the underline to dashed line.
Text(
'Dashed Underline',
style: TextStyle(
//fontSize: 30,
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.dashed,
),
),
1.2. Dotted Underline
For dotted underline, use TextDecorationStyle.dotted.
Text(
'Dotted Underline',
style: TextStyle(
fontSize: 30,
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.dotted,
),
),
1.3. Flutter Double Underline Example
If a single underline is not enough for you, want a double underline?. You can use TextDecorationStyle.double inside TextStyle.
Text(
'Double underline',
style: TextStyle(
fontSize: 30,
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.double,
),
),
1.4. Flutter Wavy Underline
If you have used word, you may have seen wavy underlines when the content have spelling or grammatical errors. Do you want to make a wavy underline like that using Text widget? use TextDecorationStyle.wavy.
Text(
' Wavy underline',
style: TextStyle(
fontSize: 30,
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.wavy,
),
),
2. How To Increase Space Between Underline And Text In Flutter?
The above-mentioned examples don’t have enough space between text and underline. In this and the next example, you can adjust the space between them.
- Here, the visible text content is shadow of real text content. The real text is invisible due to transparent color.
- Offset determines the text’s shadow location.
- Offset second argument controls the vertical space difference.
- Change -20 with other values and check.
Text(
"Text Underline",
style: TextStyle(
color: Colors.transparent,
decorationColor: Colors.red,
decorationThickness: 5,
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.solid,
fontSize: 30,
shadows: [
Shadow(
color: Colors.black,
offset: Offset(0, -20),
),
],
),
),
3. Underline Text Using Container
In this method, You will use Container widget and creates a border at the bottom. This border will act as underline to the Text widget.
- Here, using bottom border padding value, can increase the space between them.
Container(
padding: EdgeInsets.only(
//using bottom property, can control the space between underline and text
bottom: 7,
),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.red,
width: 2.0,
),
),
),
child: Text(
"Text Underline Using Container",
style: TextStyle(
fontSize: 20,
color: Colors.black,
),
),
),
4. Flutter Underline Text Using Text.rich
Using Text.rich constructor, you can underline the word or character in a sentence or paragraph as you like.
- Text.rich uses TextSpan to show text, Almost same as Text widget.
- Using style property, you can create underline.
Text.rich(
TextSpan(
text: ' Underline using ',
style: TextStyle(fontSize: 30),
children: [
TextSpan(
text: 'Text.rich',
style: TextStyle(
decoration: TextDecoration.underline,
fontSize:30,
),
),
],
),
),
5. Underline text using RichText
This method almost same as Text.rich() method. Here, we will use RichText widget and TextSpan to make the underline.
RichText(
text: TextSpan(
text: "Underline Using ",
style: TextStyle(
fontSize: 25,
color: Colors.black,
),
children: [
TextSpan(
text: 'RichText',
style: TextStyle(
fontSize: 25,
color: Colors.black,
decoration: TextDecoration.underline,
),
)
]),
),
6. Underline Using Divider
This is a simple hack. Divider widget can used to make horizontal lines or separate content. Here Divider widget make a yellow line below the Text widget.
- indent: amount of empty space to the leading edge.
- endIndent: amount of empty space to the trailing edge.
Text(
'Underline using Divider',
style: TextStyle(fontSize: 20),
),
Divider(
color: Colors.yellow,
thickness: 10,
indent: 70,
endIndent: 70,
),
7. All In One Example
In this example, we will create all examples and shown them one by one below.
- Here Column widget will used to align text in vertical order.
- Remove Debug banner in Flutter
- Set Up Flutter and Create Project.
- Flutter Command To Run Project
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Text Underline Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Flutter Text Underline Example',
style: TextStyle(
fontSize: 25,
decoration: TextDecoration.underline,
),
),
SizedBox(
height: 30,
),
Text(
'Dashed Underline',
style: TextStyle(
fontSize: 30,
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.dashed,
),
),
SizedBox(
height: 20,
),
Text(
"Dashed Underline - 2",
style: TextStyle(
fontSize: 30,
shadows: [
Shadow(
color: Colors.black,
offset: Offset(0, -5),
),
],
color: Colors.transparent,
decoration: TextDecoration.underline,
decorationColor: Colors.red,
decorationThickness: 5,
decorationStyle: TextDecorationStyle.dashed,
),
),
SizedBox(
height: 30,
),
Text(
'Dotted Underline',
style: TextStyle(
fontSize: 30,
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.dotted,
),
),
SizedBox(
height: 20,
),
Text(
'Double underline',
style: TextStyle(
fontSize: 30,
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.double,
),
),
SizedBox(
height: 20,
),
Text(
' Wavy underline',
style: TextStyle(
fontSize: 30,
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.wavy,
),
),
SizedBox(
height: 30,
),
RichText(
text: TextSpan(
text: "Underline Using ",
style: TextStyle(
fontSize: 25,
color: Colors.black,
),
children: [
TextSpan(
text: 'RichText',
style: TextStyle(
fontSize: 25,
color: Colors.black,
decoration: TextDecoration.underline,
),
)
]),
),
SizedBox(height: 30),
Text.rich(
TextSpan(
text: ' Underline using ',
style: TextStyle(fontSize: 30),
children: [
TextSpan(
text: 'Text.rich',
style: TextStyle(
decoration: TextDecoration.underline,
fontSize: 30,
),
),
],
),
),
SizedBox(
height: 20,
),
Container(
padding: EdgeInsets.only(
//using bottom property, can control the space between underline and text
bottom: 7,
),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.red,
width: 2.0,
),
),
),
child: Text(
"Text Underline Using Container",
style: TextStyle(
fontSize: 20,
color: Colors.black,
),
),
),
SizedBox(
height: 20,
),
Text(
'Underline using Divider',
style: TextStyle(fontSize: 20),
),
Divider(
color: Colors.yellow,//color of the divider
thickness: 10,//thickness of the divider
indent: 70,
endIndent: 70,
),
],
),
),
),
);
}
}
If you like this post, please share it with your family and friends.
Thank You.