Customize TextField Border in Flutter | Ultimate Guide of 2022

The TextField widget in Flutter is one of the most used widgets. It is used to get user input in a variety of forms such as email, password, phone, home address, etc. But after adding the default TextField, sometimes you might need to customize the border of TextField. So in this tutorial, we will see how to add and customize TextField border in Flutter.

Here are different versions of the TextField border:

Here’s what we’ll cover:

• How to add border to a TextField in Flutter
• How to add border radius / rounded border to TextField
• Changing TextField default border color
• Display TextField error border
• Display TextField focus border
• Show only the bottom border in TextField
• How to change TextField border width
• Removing TextField border
• Customize TextField border globally(Bonus ⭐️)

How to add border to a TextField in Flutter

To add a border to a TextField in Flutter, you can specify the decoration property and then use the InputDecoration and OutlineInputBorder widget. The OutlineInputBorder widget has the borderSide widget which you can use to pass in the BorderSide widget with width and color parameter to create the border.

Here are step by step instructions the to add border to textfield in Flutter:

1. Locate the file where you have placed the TextField widget.
2. Inside the TextField widget, add the decoration parameter and assign the InputDecoration widget.
3. Inside the InputDecoration widget, add the enabledBorder parameter and assign the OutlineInputBorder widget.
4. Inside the OutlineInputBorder, add the BorderSide widget with color parameter and set the color of your choice.

Code Example

const TextField(
  decoration: InputDecoration(
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(
          width: 3, color: Colors.greenAccent), //<-- SEE HERE
    ),
  ),
)

Output

How to add border radius / rounded border to TextField

To add border radius or create rounded border around the TextField widget, add the decoration property and then use OutlineInputBorder widget. The OutlineInputBorder widget accepts the borderRadius parameter. You can use the borderRadius parameter with BorderRadius.circular(50.0) to create the cricular border around the TextField.

Code Example

TextField(
  decoration: InputDecoration(
    enabledBorder: OutlineInputBorder(
      borderSide:
          BorderSide(width: 3, color: Colors.greenAccent), //<-- SEE HERE
      borderRadius: BorderRadius.circular(50.0),
    ),
  ),
)

Output

Changing TextField default border color

To change the TextField default border color, you can visit the in depth guide here. 😃

Display TextField error border

To display TextField error border, you can add the decoration parameter inside the TextField widget and then assign the InputDecoration widget. Inside the InputDecoration, you can add border for the error state by specifying errorBorder the parameter. You can assign the OutlineInputBorder widget and add border as usual.

Code Example

const TextField(
  decoration: InputDecoration(
    errorBorder: OutlineInputBorder( //<-- SEE HERE
      borderSide: BorderSide(
          width: 3, color: Colors.redAccent), 
    ),
  ),
)

Output

Display TextField focus border

To display TextField error border, you can add the decoration parameter inside the TextField widget and then assign the InputDecoration widget. Inside the InputDecoration, you can add border for the error state by specifying focusedBorder the parameter. You can assign the OutlineInputBorder widget and add border as usual.

Code Example

const TextField(
  decoration: InputDecoration(
    focusedBorder: OutlineInputBorder( //<-- SEE HERE
      borderSide: BorderSide(
          width: 3, color: Colors.blueAccent), 
    ),
  ),
)

Output

Show only the bottom border in TextField

To show only the bottom border in TextField, you can specify the decoration property and then use the InputDecoration and UnderlineInputBorder widget. The UnderlineInputBorder widget accepts the borderSide widget which you can use to create the border.

Code Example

const TextField(
  decoration: InputDecoration(
    enabledBorder: UnderlineInputBorder( //<-- SEE HERE
      borderSide: BorderSide(
          width: 3, color: Colors.greenAccent), 
    ),
  ),
)

Output

How to change TextField border width

To change the TextField border width, first add the border as usual and then simply modify the width value inside the BorderSide parameter.

Code Example

TextField(
  decoration: InputDecoration(
    enabledBorder: OutlineInputBorder(
      borderSide:
          BorderSide(
          width: 5, //<-- SEE HERE
          color: Colors.greenAccent,),
      borderRadius: BorderRadius.circular(50.0),
    ),
  ),
),
//----------
const TextField(
  decoration: InputDecoration(
    enabledBorder: UnderlineInputBorder(
      borderSide: BorderSide(
        width: 3, //<-- SEE HERE
        color: Colors.greenAccent,
      ), 
    ),
  ),
)

Output

Removing TextField border

To remove the TextField border you can visit the in depth tutorial here.

Customize TextField border globally

In the previous section, we saw how to customize the TextField border at the page level. but sometimes you might be looking to have a common style across all the pages of your app. In that case, you might want to customize the TextField border color at the app level.

You can change the TextField border color globally by defining the inputDecorationTheme and then adding the OutlineInputBorder widget. Inside the OutlineInputBorder widget, you can specify which type of border you want to change. for example, enabledBorder, focusedBorder, and so on, and then assign the color.

Here’s how you do it:

1. Locate the MaterialApp widget.
2. Inside the MaterialApp, add the theme parameter with ThemeData class assigned.
3. Inside the ThemeData add the inputDecorationTheme parameter and then assign the InputDecorationTheme.
4. Inside the InputDecorationTheme add the enabledBorder parameter and then assign the OutlineInputBorder.
5. Inside the OutlineInputBorder add the borderSide parameter and then assign the BorderSide with color of your choice.

Code Example

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
    inputDecorationTheme: const InputDecorationTheme(
      enabledBorder: OutlineInputBorder(
        borderSide: BorderSide(width: 3, color: Colors.greenAccent),
      ),
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(width: 3, color: Colors.amberAccent),
      ),
    ),
  ),
  home: ChangeTextFieldBorderColorDemo(),
);

Conclusion

In this tutorial, we learned how to customize textfield border in Flutter with practical examples, we first saw how to add border, add border radius, add border for focsed and error state and later explored how to add border to only bottom of TextField. We also went through the code to customize the textfield border at app level.

Would you like to check other interesting Flutter tutorials?