Not able to change TextField Border Color

The new way to do it is to use enabledBorder like this:

new TextField(
  decoration: new InputDecoration(
    enabledBorder: const OutlineInputBorder(
      borderSide: const BorderSide(color: Colors.grey, width: 0.0),
    ),
    focusedBorder: ...
    border: ...
  ),
)

Well, I really don’t know why the color assigned to border does not work. But you can control the border color using other border properties of the textfield.

Understanding the Border Properties

The TextField in Flutter has several border properties that can be used to customize its appearance:

• disabledBorder: Is activated when enabled is set to false
• enabledBorder: Is activated when enabled is set to true (by default enabled property of TextField is true)
• errorBorder: Is activated when there is some error (i.e. a failed validate)
• focusedBorder: Is activated when we click/focus on the TextField.
• focusedErrorBorder: Is activated when there is error and we are currently focused on that TextField.

A Code Snippet to Illustrate the Concept

The following code snippet shows how to use these border properties to customize the appearance of a TextField:

TextField(
 enabled: false, // to trigger disabledBorder
 decoration: InputDecoration(
   filled: true,
   fillColor: Color(0xFFF2F2F2),
   focusedBorder: OutlineInputBorder(
     borderRadius: BorderRadius.all(Radius.circular(4)),
     borderSide: BorderSide(width: 1,color: Colors.red),
   ),
   disabledBorder: OutlineInputBorder(
     borderRadius: BorderRadius.all(Radius.circular(4)),
     borderSide: BorderSide(width: 1,color: Colors.orange),
   ),
   enabledBorder: OutlineInputBorder(
     borderRadius: BorderRadius.all(Radius.circular(4)),
     borderSide: BorderSide(width: 1,color: Colors.green),
   ),
   border: OutlineInputBorder(
     borderRadius: BorderRadius.all(Radius.circular(4)),
     borderSide: BorderSide(width: 1,)
   ),
   errorBorder: OutlineInputBorder(
     borderRadius: BorderRadius.all(Radius.circular(4)),
     borderSide: BorderSide(width: 1,color: Colors.black)
   ),
   focusedErrorBorder: OutlineInputBorder(
     borderRadius: BorderRadius.all(Radius.circular(4)),
     borderSide: BorderSide(width: 1,color: Colors.yellowAccent)
   ),
   hintText: "HintText",
   hintStyle: TextStyle(fontSize: 16,color: Color(0xFFB3B1B1)),
   errorText: snapshot.error,
 ),
 controller: _passwordController,
 onChanged: _authenticationFormBloc.onPasswordChanged,
                            obscureText: false,
)

As you can see, each border property is used to customize the appearance of the TextField in a specific situation (e.g. when it’s disabled, enabled, focused, etc.). By using these properties, you can control the border color and style of your TextField in different scenarios.

Conclusion

In conclusion, if you’re unable to change the border color of your TextField in Flutter, try using the enabledBorder, disabledBorder, errorBorder, and other related properties. This will give you more control over the appearance of your TextField in different situations.