How To Change Flutter Textformfield Border Color?

Flutter textformfield border color customization. In this article, we will be discussing and implementing the customization of Flutter textformfield border color. How to change Flutter textformfield border color and step by step explanation to change Flutter textformfield border color so you don’t have any queries left after this post. So let’s get right into changing Flutter textformfield border color using proper Flutter code example.

Outline

What is Flutter Textformfield Border Color?
Change Flutter Textformfield Underline Border Color
Change Outline Border Color
Custom Flutter Textformfield Design Source Code
Conclusion

What is Flutter Textformfield Border Color?

Flutter textformfield border color, as the name suggests, it is the color of the border of Flutter textformfield. By default, you will see a Flutter textformfield underline border, we will change it’s color and also make a four dimension full box border and change its color as well to make you understand how you can change Flutter textformfield border color for all of them. So let’s now leave the boring part and jump into step by step implementation of the customization of Flutter textformfield border color.

Change Flutter Textformfield Underline Border Color

To change the Flutter textformfield border color of underline, let’s first see what the default Flutter textformfield underline border color is. See the below code for this:

TextFormField()

flutter textformfield default underline border

You can see that we have used simple Flutter textformfield and in the above image, you can see that we have a simple Flutter textformfield with default underline border. This is the default underline border color of Flutter textformfield. Let’s now change it.

For that you have to use the enabled border and focused border constructor of the input decoration class. In the below code, I have passed underline input border to both the enabled and focused border but in enabled border I have used blue color and in focused I have used red color, just to demonstrate that the Flutter textformfield border color of underline is really implemented. Code is given below:

 decoration: InputDecoration(
                   enabledBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.blue)),
                        focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.red))),

In the first image, enabled border underline color is shown and in the second image focused border color is shown.

Change Outline Border Color

Now let’s change the Flutter textformfield border color of the whole Flutter textformfield border. For that we have to use the same enabled and focused border constructor of the input decoration class. Just we have to pass the outline input border class for both and like the above example, I have set blue color for the enabled border and red for the focused border to demonstrate Flutter textformfield border color is working here as well. Let’s see the below code for this:

 decoration: InputDecoration(
                       enabledBorder: OutlineInputBorder(
                            borderSide: BorderSide(color: Colors.blue)),
                        focusedBorder: OutlineInputBorder(
                            borderSide: BorderSide(color: Colors.red))),

flutter textformfield enabled border color

flutter textformfield focused border color

As you can see in the first image that enabled border color is implemented and in the second image focused border color is shown which means Flutter textformfield border color is implemented.

Congrats for making it to the end, now you have a complete understanding of how to change Flutter textformfield border color for both underline border and outline border of Flutter textformfield. If you still have any doubt then you can comment. I would love to answer it.

As a treat, I have created a beautiful Flutter textformfield custom design for you in which Flutter textfield border colors customization is also implemented. I would love to see you use it in your Flutter app projects. The complete source code is provided in the next section.

Custom Flutter Textformfield Design Source Code

flutter textformfield border 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.orange),
                cursorColor: Colors.purple,
                decoration: InputDecoration(
                    hintText: 'This is hint text',
                    hintStyle: TextStyle(color: Colors.orange.shade500),
                    prefixIcon: Icon(Icons.person, color: Colors.orange),
                    suffixIcon: Icon(Icons.edit, color: Colors.orange),
                    border: InputBorder.none,
                    contentPadding: EdgeInsets.all(26),
                    enabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.orange),
                        borderRadius: BorderRadius.circular(30).copyWith(
                            topRight: Radius.circular(0),
                            bottomLeft: Radius.circular(0))),
                    focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.orange),
                        borderRadius: BorderRadius.circular(30).copyWith(
                            topRight: Radius.circular(0),
                            bottomLeft: Radius.circular(0)))),
              ))),
    ));
  }
}

Conclusion

In conclusion, now you have a practical knowledge of how to change Flutter textformfield border color for both underline and outline border of Flutter textformfield. I would love to have your feedback on this post. I have prepared other amazing articles on Flutter app development, Flutter widgets, Flutter animations, Flutter widgets, beautiful Flutter templates and many more, links to some of them are listed below. Thanks for reading this post.

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.