flutter underline text

In Flutter, underlining a text is easy. This post has listed 6 ways to make it happen.

Let’s start…

1. How To Underline Text in Flutter?

flutter underline text
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

flutter text style 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?

flutter text style underline

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

container text underlined flutter
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

text.rich underline
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

richtext underline
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

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

flutter underline text

In this example, we will create all examples and shown them one by one below.

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.

Flutter Underline Constant Docs

Please disable your adblocker or whitelist this site!