Flutter Create Underline Text

To create underline text in flutter we have to use TextDecoration.underline property of Text widget in flutter. This widget will draw a line at the bottom of complete text widget. Underline color can also be changed by decorationColor property of Text.

Flutter Create Underline Text:

1. Defining Text widget with TextDecoration.underline, decorationColor and decorationThickness property of text.

Text(
        'Underline Text in Flutter',
        style: TextStyle(
          fontSize: 34,
          decoration: TextDecoration.underline,
          decorationColor: Colors.red,
          decorationThickness: 1.8,
        ),
      )

2. Complete source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
          body: Center(
              child: Text(
        'Underline Text in Flutter',
        style: TextStyle(
          fontSize: 34,
          decoration: TextDecoration.underline,
          decorationColor: Colors.red,
          decorationThickness: 1.8,
        ),
      ))),
    );
  }
}

Screenshot: