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), ), )

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), ), )

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.
enabledBorder: OutlineInputBorder( borderSide: BorderSide(color: Colors.blue), ),
focusedBorder: OutlineInputBorder( borderSide: BorderSide(color: Colors.blue), ),
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.
Flutter Textfield Border Color 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: 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.