Flutter – Changing the border color of the OutlineInputBorder

In Flutter, you might have encountered a situation where you want to change the border color of the OutlineInputBorder. This can be useful when you need to style your TextField or TextInputField based on whether it’s enabled or focused. In this post, we’ll explore how to achieve this.

The Problem

In Flutter, when you use a TextField and want to change its border color, you might not know where to start. The OutlineInputBorder is often used as the default border for TextFields. However, changing its color can be tricky if you’re new to Flutter.

The Solution

In July 2021, a change was made to the InputDecoration class in Flutter that allows us to change the border color of the TextField based on whether it’s enabled or focused. This is achieved using the enabledBorder and focusedBorder properties.

Using enabledBorder and focusedBorder

You can use the following code snippet to change the border color of your TextField when it’s not clicked by the user (i.e., when it’s enabled) and when it’s clicked by the user (i.e., when it’s focused).

new TextField(
  decoration: new InputDecoration(
    enabledBorder: const OutlineInputBorder(
      // width: 0.0 produces a thin "hairline" border
      borderSide: const BorderSide(color: Colors.grey, width: 0.0),
    ),
    border: const OutlineInputBorder(),
    labelStyle: new TextStyle(color: Colors.green),
    ...
  ),
)

Changing Border Color Example

Here’s an example of how to change the border color using enabledBorder and focusedBorder:

enabledBorder: OutlineInputBorder(
  borderRadius: BorderRadius.circular(25.0),
  borderSide: BorderSide(color: Colors.pinkAccent),
),
focusedBorder: OutlineInputBorder(
  borderRadius: BorderRadius.circular(25.0),
  borderSide: BorderSide(color: Colors.pinkAccent),
),

This code snippet will change the border color of your TextField to pink when it’s enabled or focused, and keep a thin grey border when it’s not clicked by the user.

Conclusion

In this post, we’ve explored how to change the border color of the OutlineInputBorder in Flutter using the enabledBorder and focusedBorder properties. This is a useful technique to style your TextField or TextInputField based on whether it’s enabled or focused.