The Ultimate Guide to Underlining Text in Flutter

Whether you want to draw attention to the salient points of a sentence or indicate to user’s that certain text is hyperlinked, at some point in your Flutter Journey you’re going to want to underline some text. Fortunately, Flutter offers several solutions that will get you from this to t̲h̲i̲s̲.

FYI I used yaytext.com to add the underline in Medium

As the old adage goes, the simplest solution is usually the best solution. On that note, we will begin our investigation with the Text widget.

The Text Widget

The simplest version of a text underline can be done by specifying a TextDecoration inside your Text widget’s TextStyle.

You can customize everything about the underline, including color, thickness, and style by updating decoration properties inside the TextStyle.

The only thing you can’t control is how much space there is between the bottom of the text and the underline. This can be frustrating if you need a thick underline like in the picture above.

The Text Widget (Hack Version)

If you want to increase this spacing, you’ll have to get a little creative. I thought of this solution while writing this article and I’m actually pretty proud of it. In short, the idea is to display the Text widget’s shadow and hide the actual text. Here is the same solution from above but with a red shadow offset by -5 in the y-direction:

We’re getting close. Now, let’s just hide the actual text using Colors.transparent.