How to Create Dotted Underlined Text in Flutter

Even though very rare sometimes you may want to underline a text with a dotted line. Let’s check how to do that in Flutter.

You may also want to check out my other blog posts – how to underline text in Flutter and how to double underline text in Flutter.

Using the TextStyle widget you can make TextDecorationStyle dotted to create a dotted underline in Flutter. See the code snippet given below.

Text(
  'Dotted Underline',
  style: TextStyle(
    color: Colors.black
    decoration: TextDecoration.underline,
    decorationStyle: TextDecorationStyle.dotted,
  ),
)

If you only want to make some specific text to be underlined then better choose RichText widget over the normal Text Widget.

See the Flutter example given below.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter  Dotted 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 Dotted Underline Text')),
        body: Center(
            child: RichText(
          text: TextSpan(
            text: 'Here is ',
            style: TextStyle(fontSize: 40, color: Colors.black),
            children: <TextSpan>[
              TextSpan(
                  text: 'Dotted',
                  style: TextStyle(
                    decoration: TextDecoration.underline,
                    decorationStyle: TextDecorationStyle.dotted,
                  )),
              TextSpan(text: ' underlined text!'),
            ],
          ),
        )));
  }
}

Following is the output of the above example.

I hope this Flutter tutorial will be helpful for you.