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.

  'Dotted Underline',
  style: TextStyle(
    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 {
  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);

  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:,
            children: <TextSpan>[
                  text: 'Dotted',
                  style: TextStyle(
                    decoration: TextDecoration.underline,
                    decorationStyle: TextDecorationStyle.dotted,
              TextSpan(text: ' underlined text!'),

Following is the output of the above example.

Flutter dotted underline

I hope this Flutter tutorial will be helpful for you.

Leave a Comment

Your email address will not be published.