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.
![Flutter Text Underline Example](https://googleflutter.com/wp-content/uploads/2019/12/flutter_text_underline.png)
Summary
In this Flutter Tutorial, we learned how to underline text in Text widget of Flutter.