How To Easily Change Flutter Text Underline Color

Flutter text underline color customization. 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.

Outline

What is Flutter Text Underline Color?
Default Flutter Text Underline Color
Change Flutter Text Underline Color
Flutter Text Underline Color Customization Source Code
Conclusion

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

Flutter text underline color

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. I would also highly recommend that you visit my other articles on beautiful Flutter templates with free source code, Flutter widgets, Flutter custom animations, Flutter web, Flutter app development, Flutter books and many more. Few post links can be found below or by using the search box of this site or its menu navigation bar. Thank you for reading this article.

Flutter app articles you might like to read: beautiful gradient login UI, Dart Vs JavaScript, flutter login UI form, flutter basics for beginners, explanation of widgets in flutter, flutter architecture, flutter vs native, flutter sliverappbar customization, mobile app marketing tips, flutter bottom navigation bar, flutter appbar actions, flutter appbar title center, why learn react native framework, react native jobs, react native elements, unique flutter development, Acer Chromebook Spin 511 Laptop.