Flutter Text Underline

Underline text in Flutter Text Widget

In this tutorial, you will learn how to underline text in Text widget.

Prepare a TextStyle class object with value for decoration property as TextDecoration.underline. Pass this object as value to style property of the Text widget.

Sample Code Snippet

Following is a simple code snippet with style value formed to underline the text in Text widget.

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

Example Flutter Application

Create a Flutter application and replace main.dart with the following code.


import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new MyApp(),

class MyApp extends StatefulWidget {
  _State createState() => new _State();

class _State extends State<MyApp> {
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Flutter Tutorial - googleflutter.com'),
      body: new Center(
        child: new Text(
          'Welcome to Flutter Tutorial.',
          style: TextStyle(
            fontSize: 25,

When you run this Flutter Application, you should get the UI similar to that of in the following screenshot, where text is underlined.

Flutter Text Underline Example


In this Flutter Tutorial, we learned how to underline text in Text widget of Flutter.

Desclaimer: We are not affiliated, associated, authorized, endorsed by, or in any way officially connected with the Google, Apple or Flutter, or any of its subsidiaries or its affiliates. The names Google, Apple and Flutter as well as related names, marks, emblems and images are registered trademarks of their respective owners. This site googleflutter.com covers tutorials related to Flutter developed by Google.