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

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.

You might also like:

How To Easily Change Flutter Container Size

How To Easily Set Flutter Container Full Width

How To Easily Align Flutter Text Justify

How To Easily Set Space Between Flutter Text And Underline

How To Easily Set Flutter Text Letter Spacing

Acer Nitro 5 AN515 57 79TD Gaming Laptop Amazing Specs-Best Gaming Laptop

How To Easily Set Flutter Text Underline

How To Easily Add Flutter Text Shadow

How To Easily Set Flutter Text Word Spacing

How To Change Flutter Text Line Height-Easy Flutter Code Example

Samsung 13.3 Galaxy Book 2 Pro Laptop Amazing Hidden Specs

Amazing Specs Of Galaxy Chromebook Mercury Gray Laptop

How To Set Flutter Text Italic-Easy Flutter Code Example

How To Easily Change Flutter Text Size