How to Change the Input Border Color on Focus in Flutter

To change the input border color when a TextField or TextFormField is focused in Flutter, you utilize the focusedBorder property within the InputDecoration widget.

Flutter's input fields like TextField and TextFormField use the InputDecoration widget to control their visual appearance, including borders, labels, hints, and icons. This decoration object has specific properties to define the border appearance for different states of the input field.

Using InputDecoration's focusedBorder

The key to customizing the border color when the user taps on the input field (focuses it) is the focusedBorder property. This property overrides the default border style specifically for the focused state.

You need to set the decoration property of your TextField or TextFormField to an InputDecoration instance. Inside the InputDecoration, you define the focusedBorder. The focusedBorder takes an InputBorder object, such as OutlineInputBorder for a border around the input field or UnderlineInputBorder for a line below it. Within the InputBorder, you can specify the borderSide property to control the color and width of the border.

Overriding the Default:

As observed in the provided reference video snippet, when you focus on a TextField (by clicking it), you initially see the default focused border color and style provided by Flutter's theme. To override this default appearance with your custom color, you must explicitly define the focusedBorder in the InputDecoration.

Code Example

Here is an example demonstrating how to change the focused border color to blue using an OutlineInputBorder:

TextField(
  decoration: InputDecoration(
    labelText: 'Enter text',
    // Define the border when the TextField is focused
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(
        color: Colors.blue, // Set the desired focus color
        width: 2.0, // Optional: Set border width on focus
      ),
      borderRadius: BorderRadius.circular(8.0), // Optional: Match or change radius
    ),
    // Define the border for other states (optional, but good practice)
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(
        color: Colors.grey, // Color when enabled but not focused
        width: 1.0,
      ),
      borderRadius: BorderRadius.circular(8.0),
    ),
    // You can also define 'border' as a default for all states
    // if specific states like focusedBorder, enabledBorder are not set.
  ),
)

In this example:

• We set the decoration property of the TextField to a new InputDecoration.
• We define focusedBorder using OutlineInputBorder.
• Inside OutlineInputBorder, we set the borderSide.color to Colors.blue to make the border blue when the TextField is focused.
• We also included enabledBorder for completeness, showing how to define the border color when the field is active but not focused.

Understanding Different Border States

The InputDecoration widget allows you to define borders for several states of the input field:

State	InputDecoration Property	Description
Focused	focusedBorder	Border style when the input field currently has focus.
Enabled	enabledBorder	Border style when the input field is enabled but does not have focus.
Error	errorBorder	Border style when the input field has an input validation error.
Focused Error	focusedErrorBorder	Border style when the input field has an error and also has focus.
Disabled	disabledBorder	Border style when the input field is disabled.
Default	border	Default border style applied if specific state borders (like focusedBorder, enabledBorder) are not defined.

By setting the focusedBorder, you explicitly control the appearance when the input field is tapped, overriding any default or border property settings for that specific state.