How To Change Flutter Textformfield Underline Color?

Flutter textformfield underline color customization. In this article, I will be discussing and implementing the customization of Flutter textformfield underline color in Flutter textformfield. I will be using a very simple example so you can easily understand how to change Flutter textformfield underline color. Let’s not waste anymore time and start implementing the customization of Flutter textformfield underline color.

Outline

What is Flutter Textformfield Underline Color?
Default Flutter Textformfield Underline Color
Change Flutter Textformfield Underline Color
Beautiful Flutter Textformfield Design Source Code
Conclusion

What is Flutter Textformfield Underline Color?

Flutter textformfield underline color is the color of the underline border of the Flutter textformfield. We will implement a simple Flutter textformfield and see what type of underline border would we get. Let’s now implement Flutter textformfield underline color using a proper Flutter code example.

Default Flutter Textformfield Underline Color

Let’s see the default color of the Flutter textformfield. For that let’s define a simple Flutter textformfield. See the code below:

TextFormField()

flutter textformfield default underline color

As you can see I have used a simple Flutter textformfield class and in the above image you can see that we have a simple Flutter textformfield with a default underline border. This is the default color of the Flutter textformfield underline border.

Change Flutter Textformfield Underline Color

Let’s now change the Flutter textformfield underline color because that is the reason you are reading this post. For that we have to use the decoration constructor of the Flutter textformfield and passing it the input decoration class. Now using the enabled border constructor of the input decoration class. Enabled border is shown when the textformfield is not focused. We have passed underline input border class to it and we have set the color to blue. See the below code:

 enabledBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: Colors.blue)
                                   )

flutter textformfield underline enabled color

You can see in the above code that we have used the border side class to change the default underline color to blue. In the above image, you can see that the Flutter textformfield underline color is now blue.

Same is done for the focused border as well, this border is shown when the textformfield is focused or editing means user is giving it inputs. See the below code for this:

 focusedBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: Colors.green)
                                   )

flutter textformfield underline focused color

You can see in the above image that I have given some inputs to the Flutter textformfield and also given the underline border a green color to demonstrate that the Flutter textformfield underline color is working for both enabled and focused border.

So this is how we can change the Flutter textformfield underline color. Hope you now have a detailed knowledge of how to change Flutter textformfield underline color depending on your Flutter project requirements. If you still have any doubts about the customization of Flutter textformfield underline color then you can comment your queries. I would love to answer them.

Now as a treat, I have prepared a beautiful custom Flutter textformfield design for you in which the customization of Flutter textformfield underline color is also implemented. Hope you will like it. The source code is available in the next section.

Beautiful Flutter Textformfield Design Source Code

flutter textformfield 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: EdgeInsets.symmetric(horizontal: 40),
              child: TextFormField(
                  style: TextStyle(color: Colors.grey),
                  cursorColor: Colors.purple,
                  decoration: InputDecoration(
                    filled: true,
                    fillColor: Colors.blue.withOpacity(.1),
                    hintText: 'This is hint text',
                    hintStyle: TextStyle(color: Colors.grey),
                    prefixIcon: Icon(
                      Icons.person,
                      color: Colors.grey,
                    ),
                    border: InputBorder.none,
                    enabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.blue),
                        borderRadius: BorderRadius.circular(30)
                            .copyWith(topRight: Radius.circular(0))),
                    focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.blue),
                        borderRadius: BorderRadius.circular(30)
                            .copyWith(topRight: Radius.circular(0))),
                    contentPadding: EdgeInsets.all(23),
                  )))),
    ));
  }
}

Conclusion

As a final point, now you have a thorough understanding of how to customize and change your Flutter textformfield underline color. I would really appreciate your thoughts on this post. I would also encourage you to read my other articles on Flutter app development, Flutter widgets, Flutter animations Flutter templates and many more, links to some of these informative posts are listed below. That’s all for this post. Thanks for reading.

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.