How To Easily Change Flutter Text Underline Color

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,
        ),
      )

You can see the default Flutter text underline color in the above image. The underline actually inherits the color from the text color. Let’s change the color of the Flutter text widget and then see the color of the underline. See the below code:

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

You can see that the Flutter text underline color inherits the green color from the Flutter text color. Let’s now see how to give underline color of its own.

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,
        ),
      )

The underline color is now changed successfully and it has its own color. So in this way, you can easily change the color of the Flutter text underline.

Don’t hesitate to comment using the comment section if you have any more questions about Flutter text underline color customization. I would be happy to answer all your queries.

Below section has the complete Flutter source code of the above implemented and customized color of Flutter text underline.

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.