How To Change Flutter Textfield Border Color

flutter textfield border color

In this Flutter tutorial, we will learn about the customization of Flutter textfield border color in detail. From default to custom border color, everything will be discussed in detail using proper code examples in order for better understanding.

Introduction: Flutter Textfield Border Color

Before understanding what Flutter textfield border color is, first let’s understand what Flutter textfield is.

Flutter textfield is used to take input from the user. For instance, Flutter textfield can be used in the Flutter login form to take email and password from the user and other forms as well. It is used to take inputs from the user and after it is inputted, then we can use it depending on our set of requirements.

As the name suggests, border color specifies the color of the textfield border.  Let’s first see the default border color, then we’ll learn how to properly customize its color.

Customizing Flutter Textfield Border Color (Easy Examples)

By default, Flutter textfield comes with an underline border. We can remove it by passing InputBorder.none to the border constructor of the textfield.

We will learn about the customization of both the enabled border and the focused border of the textfield. The enabled border is displayed when the textfield is not focused while the focused border is displayed when the textfield is focused.

The default color of the enabled border is grey and it’s blue for the focused border.

Flutter Textfield Enabled Border Color

TextField(
          style: TextStyle(color: Colors.grey),
          decoration: InputDecoration(
            enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.blue),
                borderRadius: BorderRadius.circular(100)),
            border: InputBorder.none,
            hintText: 'Write someting...',
            hintStyle: TextStyle(color: Colors.grey.shade400),
          ),
        )
flutter textfield enabled border
We have used the enabled border constructor of the input decoration class. Now in the above image, we can see a Flutter textfield border of rounded corners having a blue color.

We have implemented this using the border side constructor of textfield. We’ve used the border radius constructor of the outline input border class which you can see in the above code. We have changed the Flutter textfield border color of the enabled border using the enabled border constructor.

Flutter Textfield Focused Border Color

TextField(
          style: TextStyle(color: Colors.grey),
          decoration: InputDecoration(
            focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.blue),
                borderRadius: BorderRadius.circular(100)),
            border: InputBorder.none,
            hintText: 'Write someting...',
            hintStyle: TextStyle(color: Colors.grey.shade400),
          ),
        )
flutter textfield focus border color

The same process has been used to change the border color of the focused Flutter textfield. We can give it any other color we want. It’s not necessary to give the same color to the enabled and focused border of the textfield.

We can see that we now have given a custom border color to our focused Flutter textfield widget.

Congrats on making it to the last, so this is how we can easily change the Flutter textfield border color and just for little easiness, below is the code for both enabled and focused borders.
 enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.blue), 
                                  ),
 focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.blue),
                                   ),
By using the color constructor of the border side class passed to the border side constructor of the outline input border, we can change the color of both the enabled and the focused border as done in the above code. Border side class has other constructors as well like width which can make the border thick or thin. Do test them as well.

If you want to customize the underline border of the textfield then use the underline input border class.

If you want to learn about Flutter textfield other than just changing Flutter textfield border color then click here.

Below is the source code of the Flutter textfield widget with a custom border color.

Flutter Textfield Border Color Source Code

flutter textfield enabled border color

flutter textfield focused 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: 50),
        child: TextField(
          decoration: InputDecoration(
            enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.red),
                borderRadius: BorderRadius.circular(200)),
            focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.green),
                borderRadius: BorderRadius.circular(50)),
          ),
        ),
      )),
    ));
  }
}

Conclusion

In conclusion of this tutorial, hope you now have a complete understanding of how to easily customize the Flutter textfield border color. We would love to have your feedback on this tutorial.

We’d be delighted to see you visit our other articles on Flutter app development and Python programming. Thank you for reading this one.

Leave a Comment

Your email address will not be published.