A Complete Guide to Underlining Text in Flutter (2021)

Last updated on April 8, 2021 Guest Contributor Loading... Post a comment

This article walks you through a few examples of underlining Text in Flutter (with instructions and explanations), in order from easy to advanced, from simple to complex.

Example 1: Basic

The TextStyle class has a parameter named decoration that can be used to add an underline to your Text widget. By default, the line has the same color with the text.

Screenshot:

The code:

Column(
          children: [
            Text(
              'The Green Planet',
              style: TextStyle(
                  fontSize: 40,
                  color: Colors.green,
                  decoration: TextDecoration.underline),
            ),
            SizedBox(
              height: 30,
            ),
            Text(
              'Summer Time',
              style:
                  TextStyle(fontSize: 30, decoration: TextDecoration.underline),
            )
          ],
        ),

Example 2: Styling the Underline

You can also control how the underline look like by using the following options that provided by the TextStyle class:

  • decorationStyle: solid (default), dashed, dotted, wavy, double.
  • decorationThickness: How thick your underline is,
  • decorationColor: Control the color of the unserline,

Screenshot:

The code:

olumn(
          children: [
            Text(
              'Random Forest',
              style: TextStyle(
                  fontSize: 40,
                  color: Colors.green,
                  decoration: TextDecoration.underline,
                  decorationStyle: TextDecorationStyle.dashed,
                  decorationColor: Colors.orange,
                  decorationThickness: 3),
            ),
            SizedBox(
              height: 30,
            ),
            Text(
              'Deep Dream',
              style: TextStyle(
                fontSize: 45,
                color: Colors.purple,
                decoration: TextDecoration.underline,
                decorationStyle: TextDecorationStyle.wavy,
                decorationThickness: 2,
                decorationColor: Colors.red,
              ),
            )
          ],
        ),

Example 3: Adding some Space between Text and Underline

You can control the gap between text and its underlining by adding a drop shadow and make the original text transparent. The Y offset of the shadow will determine the gap. Setting it to a negative number helps you to increase the space.

Note that what you see on the screen is the shadow of the text, not the actual text.

Screenshot:

The code:

Text(
            'The Big Dog',
            style: TextStyle(
              fontSize: 40,
              color: Colors.transparent,
              fontWeight: FontWeight.bold,
              shadows: [
                Shadow(offset: Offset(0, -20), color: Colors.black)
              ],
              decoration: TextDecoration.underline,
              decorationStyle: TextDecorationStyle.dashed,
              decorationColor: Colors.green,
              decorationThickness: 4
            ),
          ),

Example 4: Underlining only a few words of a paragraph

You can use RichText and TextSpan to underline only some parts of a paragraph.

Screenshot:

The code:

RichText(
            text: TextSpan(
                style: TextStyle(fontSize: 30, color: Colors.black),
                children: [
                  TextSpan(
                    text: 'He thrusts the post ',
                  ),
                  TextSpan(
                      text: 'and still insists',
                      style: TextStyle(
                          decoration: TextDecoration.underline,
                          color: Colors.blue)),
                  TextSpan(text: ' he see the ghost')
                ]),
          ),

Conclusion

We’ve gone through a couple of different examples of underlining Text in Flutter. Keep the ball rolling and continue learning more interesting stuff by reading also these articles:

You can also check out our Flutter topic page or Dart topic page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles