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.

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

Example Flutter Application

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

main.dart

import 'dart:ui';

import 'package:flutter/material.dart';

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

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

class _State extends State<MyApp> {
  @override
  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(
            decoration:TextDecoration.underline,
            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.

Summary

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