How To Change 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),
          ),
        )

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

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

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