How to underline text in flutter

Question

How to underline text in flutter inside Text widget?

I cannot seem to find underline inside fontStyle property of TextStyle

Sigh

Answer 1

When underlining everything you can set a TextStyle on the Text widget.

Text(
  'Hello world',
  style: TextStyle(
    decoration: TextDecoration.underline,
  ),
)

If you only want to underline part of the text then you need to use Text.rich() (or a RichText widget) and break the string into TextSpans that you can add a style to.

Text.rich(
  TextSpan(
    text: 'Hello ',
    style: TextStyle(fontSize: 50),
    children: <TextSpan>[
      TextSpan(
          text: 'world',
          style: TextStyle(
            decoration: TextDecoration.underline,
          )),
      // can add more TextSpans here...
    ],
  ),
)

TextSpan is a little strange. The text parameter is the default style but the children list contains the styled (and possibly unstyled) text that follow it. You can use an empty string for text if you want to start with styled text.

You can also add a TextDecorationStyle to change how the decoration looks. Here is dashed:

Text(
  'Hello world',
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationStyle: TextDecorationStyle.dashed,
  ),
)

and TextDecorationStyle.dotted:

and TextDecorationStyle.double:

and TextDecorationStyle.wavy:

Meniscus

Is it possible to add space between the words and underline line ? – Guardsman

@felangga, That's a good question. It would probably be related to the baseline. That is something I want to explore more, but I don't know how to do it yet. Explore the source code and let me know if you figure it out. – Meniscus

There's an open issue for adding space between the text and the underline. github.com/flutter/flutter/issues/30541 – Frigidaire

@Guardsman see my answer below for two solutions that let you increase the space between the text and the underline – Frigidaire

Isn't it easier to wrap both texts inside a row so you have 2 different Text elements? – Acre

@FinleyAdams, you mean if you want "world" to be underlined but not "Hello"? In that case you could put two Text widgets in a Row or a Wrap widget, but often the use case requires underlining longer strings across line breaks, and that doesn't work well if you use two Text widgets. – Meniscus

Answer 2

Exciting solution
If you want to have control over the distance between the text and the underline, you can use this hack. In short, you hide the actual text using Colors.transparent and then display an offset shadow that hovers above the Text underline.

        Text(
            "Forgot Password?",
            style: TextStyle(
              shadows: [
                Shadow(
                    color: Colors.black,
                    offset: Offset(0, -5))
              ],
              color: Colors.transparent,
              decoration:
              TextDecoration.underline,
              decorationColor: Colors.blue,
              decorationThickness: 4,
              decorationStyle:
              TextDecorationStyle.dashed,
            ),
          )

As you'll see below, if you use the out-of-the-box Text underline, it sticks to the bottom of the text and can look a bit ugly,

Boring Solutions

Using just the Text widget you can add the underline with a custom style and color:

Text(
  "Forgot Password?",
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationColor: Colors.blue,
    decorationThickness: 4,
    decorationStyle: TextDecorationStyle.dashed,
   ),
)

The only issue I have with this approach is that you have no control over how close the underline is to the bottom of the text.

If you want to increase the spacing, you'll have to use an unconventional approach that uses Container and it's padding property.

Container(
     padding: EdgeInsets.only(
       bottom: 5, // Space between underline and text
     ),
     decoration: BoxDecoration(
         border: Border(bottom: BorderSide(
         color: Colors.amber, 
         width: 1.0, // Underline thickness
        ))
      ),
     child: Text(
        "Forgot Password?",
        style: TextStyle(
        color: Colors.black,
        ),
       ),
      )

Keep an eye on this GitHub issue for a simpler solution.

Frigidaire

Yet another ugly solution using shadows. final answerStyle = TextStyle( decoration: TextDecoration.underline, decorationStyle: TextDecorationStyle.dashed, color: Colors.transparent, decorationColor: Colors.black, shadows: [Shadow(color: Colors.black, offset: Offset(0, -5))], ); – Kindhearted

@Joe, Very clever! I stole part of your solution and applied it to my problem here (tried to give you credit, but it didn't link to your profile): https://mcmap.net/q/101492/-how-to-format-formbuilderrate-flutter-form-builder-package/1459653 Thanks! – Eelgrass

Nice solution, the only one I have found to control the distance under the text. Yet it's a lot of code just for an underline, so I have created an extension to do it in one line. Have a look at my answer (TextStyleX) – Rutan

nice jugadu solution – Transpadane

Its a wonderful hack..!! it works great..!! – Ecumenicalism

Answer 3

You do it by applying decoration: TextDecoration.underline to TextStyle of a Text.

With Theme example:

          Text(
            "text",
            style: Theme
                .of(context)
                .accentTextTheme
                .subhead
                .copyWith(decoration: TextDecoration.underline),
          )

Basic example:

          Text(
            "text",
            style: TextStyle(decoration: TextDecoration.underline),
          )

Sigh

Answer 4

Following is a simple code

Text(
  'Welcome to Flutter',
  style: TextStyle(decoration:TextDecoration.underline,),
),

You can use decorationStyle to customize it

Text(
  'Welcome to Flutter',
  style: TextStyle(
  fontSize: 24,
  decoration: TextDecoration.underline,
  decorationStyle: TextDecorationStyle.double,
  ),
),

Here is other TextDecorationStyle values:

• TextDecorationStyle.dashed
• TextDecorationStyle.dotted
• TextDecorationStyle.double
• TextDecorationStyle.wavy

Kreg

use decoration color to set the color of underline Text( "Clear All", style: TextStyle( decoration: TextDecoration.underline, color: Theme.of(context).primaryColor, decorationColor: Theme.of(context).primaryColor, ), ) – Draggletailed

Answer 5

Another example

child: Text.rich(
  TextSpan(
    text: 'By using our mobile app, you agree to our ',
    children: [
      TextSpan(
        text: 'Term of Use',
        style: TextStyle(
          decoration: TextDecoration.underline,
        )
      ),
      TextSpan(text: ' and '),
      TextSpan(
        text: 'Privacy Policy',
        style: TextStyle(
          decoration: TextDecoration.underline,
        )
      ),
    ]
  ),
),

Output:

Twitch

Answer 6

Control the distance between the text and underline in one line

Building on Joe Muller's answer here is an extension method that allows to have control over the text/underline distance without cluttering the widget tree's code. It's used like this:

Widget build(BuildContext context) {
  final myStyle = Theme.of(context).textTheme.headline4;

  return Text(
    'Hello, World!',
    //------------------------------------------------
    // simply apply the underlined method to the style
    style: myStyle?.underlined(distance: 2),
    //------------------------------------------------
  );
}

Here is the extension:

extension TextStyleX on TextStyle {
  /// A method to underline a text with a customizable [distance] between the text
  /// and underline. The [color], [thickness] and [style] can be set
  /// as the decorations of a [TextStyle].
  TextStyle underlined({
    Color? color,
    double distance = 1,
    double thickness = 1,
    TextDecorationStyle style = TextDecorationStyle.solid,
  }) {
    return copyWith(
      shadows: [
        Shadow(
          color: this.color ?? Colors.black,
          offset: Offset(0, -distance),
        )
      ],
      color: Colors.transparent,
      decoration: TextDecoration.underline,
      decorationThickness: thickness,
      decorationColor: color ?? this.color,
      decorationStyle: style,
    );
  }
}

The extension also allows to control the underline color, thickness and style just like any other underline decoration. Have a look at a more complete example in this DartPad.

It is still a hack but it allows to keep the widget tree's code clean in the wait for a fix from the Flutter team.

Rutan

Answer 7

You can use TextDecoration in style to underline a given text.

For example

Text(
    "Your text here",
    style: TextStyle(
        decoration: TextDecoration.underline),
    )
)

Servitor

Answer 8

for example

Text(
  "Terms and Condition",
  style: TextStyle(
    decoration:
        TextDecoration.underline,
    height: 1.5,
    fontSize: 15,
    fontWeight: FontWeight.bold,
    fontFamily: 'Roboto-Regular',
  ),
),

Rhoea

Answer 9

The most customized way to do this is to wrap text in container and give the bottom border. You can also give space between text and underline as many as you want according to your design. Please refer to Joe Muller, last option.

Container(
 padding: const EdgeInsets.only(
   bottom: 5, // Space between underline and text
 ),
 decoration: BoxDecoration(
     border: Border(bottom: BorderSide(
     color: Colors.amber, 
     width: 2.0, // Underline thickness
    ))
  ),
 child: Text(
    "Forgot Password?",
    style: TextStyle(
    color: Colors.black,
    ),
   ),
  )

Folacin

Answer 10

Alternatively and for preventing complexities you can also use Flutter Markdown https://pub.dev/packages/flutter_markdown

Ulcerate

Answer 11

style: TextStyle( decoration: TextDecoration.underline, ),

Ooze