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.
const 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 the RichText widget over the normal Text Widget.
See the Flutter example given below.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
'Flutter Dotted Underline Text',
),
),
body: Center(
child: RichText(
text: const 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.
