Flutter Create Dashed Dotted Wavy Double Underline on Text

There are 5 underline styles available in flutter. Dashed underline( - - ), Dotted underline( . . ), Wavy underline, Double underline and solid underline. Here solid underline is most commonly used for showing single underline at any text. But in many cases we want to show the other underline styles also. We can implement all these types of underline using TextDecorationStyle property of decorationStyle. I am explaining all of them below.

List of TextDecorationStyle properties in flutter for Text:

1. TextDecorationStyle.dashed
2. TextDecorationStyle.dotted
3. TextDecorationStyle.double
4. TextDecorationStyle.solid
5. TextDecorationStyle.wavy

Flutter Create Dashed Dotted Wavy Double Underline on Text:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Column(children: [
      Center(
          child: Container(
              padding: const EdgeInsets.fromLTRB(15, 25, 15, 0),
              child: const Text(
                'Dashed Underline Flutter',
                style: TextStyle(
                    fontSize: 30,
                    decoration: TextDecoration.underline,
                    decorationColor: Colors.blue,
                    decorationThickness: 1.0,
                    decorationStyle: TextDecorationStyle.dashed),
              ))),
      const Text(
        'Dotted Underline Flutter',
        style: TextStyle(
            fontSize: 30,
            decoration: TextDecoration.underline,
            decorationColor: Colors.blue,
            decorationThickness: 1.0,
            decorationStyle: TextDecorationStyle.dotted),
      ),
      const Text(
        'Double Underline Flutter',
        style: TextStyle(
            fontSize: 30,
            decoration: TextDecoration.underline,
            decorationColor: Colors.blue,
            decorationStyle: TextDecorationStyle.double),
      ),
      const Text(
        'Solid Underline Flutter',
        style: TextStyle(
            fontSize: 30,
            decoration: TextDecoration.underline,
            decorationColor: Colors.blue,
            decorationThickness: 1.0,
            decorationStyle: TextDecorationStyle.solid),
      ),
      const Text(
        'Wavy Underline Flutter',
        style: TextStyle(
            fontSize: 30,
            decoration: TextDecoration.underline,
            decorationColor: Colors.blue,
            decorationThickness: 1.0,
            decorationStyle: TextDecorationStyle.wavy),
      ),
    ])));
  }
}

Screenshot: