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.