How to Underline Text in Flutter

In this example, we will show you how to set text decoration to underline in Flutter. You will learn to underline text wholly or partially part of the text widget. Underlining is an important factor for formatting text. See the example below:

//underline whole text
Text("Hello World ! This is FlutterCampus", 
      style: TextStyle(decoration: TextDecoration.underline)
)

You have to pass decoration:TextDecoration.underline on TextStyle to underline the text. But, this will underline the whole text, you can partially underline the text using the following code:

Text.rich( //underline partially
  TextSpan( 
      style: TextStyle(fontSize: 30), //global text style
      children: [
          TextSpan(text:"Hello World ! "),
          TextSpan(text:"This is Flutter Campus", style: TextStyle(
              decoration:TextDecoration.underline
          )), //partial text style
      ]
  )
)

You can use RichText as well too, see the example: How to Style Partial Part on Text() Widget in Flutter

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {  
  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
              appBar: AppBar(
                title: Text("Underline Text in Flutter"),
                backgroundColor: Colors.redAccent
              ),
              body: Container(
                  padding: EdgeInsets.only(top:30, left:20, right:20),
                  alignment: Alignment.topLeft,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [ 

                        //underline whole text
                        Text("Hello World ! This is FlutterCampus", 
                              style: TextStyle(decoration: TextDecoration.underline, fontSize: 30)
                        ),

                        Text.rich( //underline partially
                          TextSpan( 
                              style: TextStyle(fontSize: 30), //global text style
                              children: [
                                  TextSpan(text:"Hello World ! "),
                                  TextSpan(text:"This is Flutter Campus", style: TextStyle(
                                      decoration:TextDecoration.underline
                                  )), //partial text style
                              ]
                          )
                        )

                      
                  ],)
              )
       );
  }
}