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.