In this Flutter post, we will be changing Flutter text underline color and explaining it step by step using a proper and easy Flutter example code. By the end of this post, you will have a complete practical knowledge of hos to change Flutter text underline color in your Flutter app projects as well. So let’s get right into customizing Flutter text underline color.
What is Flutter Text Underline Color?
Flutter text underline color is the color of the underline border of the Flutter text widget. First we will see what the default Flutter text underline color is and then we will give it a color of our own choice. Let’s understand it using an easy Flutter example.
Default Flutter Text Underline Color
We have to implement a Flutter text widget with an underline. Click here to visit a detailed article on how to implement Flutter text underline. In order to see the default color of Flutter text underline, you have to use the style constructor of the Flutter text widget class then pass text style class to it. After that use the decoration constructor of the text style class and pass TextDecoration.underline to it. See the below code:
Text( 'Default Underline color', style: TextStyle( decoration: TextDecoration.underline, fontSize: 20, ), )

Text( 'Underline color', style: TextStyle( color: Colors.green, decoration: TextDecoration.underline, fontSize: 20, ), )

Change Flutter Text Underline Color
To give Flutter text underline color of its own, we have to use the decoration color constructor of the text style class. We have passed it a blue color as it takes color. You can pass any color to it. See the below given code:
Text( 'Custom Underline color', style: TextStyle( color: Colors.green, decorationColor: Colors.blue, decoration: TextDecoration.underline, fontSize: 20, ), )

Flutter Text Underline Color Customization Source Code
import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Homepage(), ); } } class Homepage extends StatelessWidget { @override Widget build(BuildContext context) { return SafeArea( child: Scaffold( body: Center( child: Padding( padding: const EdgeInsets.all(15), child: Text( 'Custom Underline color', style: TextStyle( color: Colors.green, decorationColor: Colors.blue, decoration: TextDecoration.underline, fontSize: 20, ), ), )))); } }
Conclusion
As this post’s conclusion, you now fully understand how to use and change Flutter text underline color. Don’t hold back on your feedback about this post. Thank you for reading this article.