How to Underline Text in Flutter

Sometimes, you may want to underline text to get the attention of the user. Let’s check how to add text with underline in Flutter.

The TextStyle class is used for styling Text widgets in Flutter. Using the decoration property and TextDecoration class, you can underline your text easily.

Text(
  'Underlined Text',
  style: TextStyle(
    color: Colors.black
    decoration: TextDecoration.underline,
  ),
)

If you want to underline only a specific word or sentence then you should make use of the RichText widget. See the following example.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Underlined Text Example',
      home: FlutterExample(),
    );
  }
}

class FlutterExample extends StatelessWidget {
  const FlutterExample({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Flutter Underline text')),
        body: Center(
            child: RichText(
          text: TextSpan(
            text: 'Here is ',
            style: TextStyle(fontSize: 30, color: Colors.black),
            children: <TextSpan>[
              TextSpan(
                  text: 'underlined',
                  style: TextStyle(
                    decoration: TextDecoration.underline,
                  )),
              TextSpan(text: ' text!'),
            ],
          ),
        )));
  }
}

Following is the output.

flutter underline text

I hope you understand how to underline text in Flutter.

Leave a Comment

Your email address will not be published. Required fields are marked *