TextFormField borderSide color is not working

Question

Asked by TimeToCode on November 22, 2021 (source).

I'm trying to add the color on border, but it's not working, please check where i'm doing wrong.

Here is my code

  passwordtext() {
    return Container(
        width: MediaQuery.of(context).size.width * 0.9,
        child: Focus(
          focusNode: myFocusNode,
          child: TextFormField(
            decoration: InputDecoration(
                focusedBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(10.0)),
                    borderSide: BorderSide(color: HexColor("#d8d6de"))),
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(10.0)),
                    borderSide: BorderSide(color: Colors.red)),
                
          ),
        ));
  }

When I tap on the field border color changes which I want it also without tap on it

enter image description here

enter image description here

Answer

Question answered by Yeasin S (source).

You need to call enabledBorder on InputDecoration

TextFormField(
          decoration: InputDecoration(
            focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.all(Radius.circular(10.0)),
                borderSide: BorderSide(color: Colors.green)),
            border: OutlineInputBorder(
                borderRadius: BorderRadius.all(Radius.circular(10.0)),
                borderSide: BorderSide(color: Colors.red)),
            enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.all(Radius.circular(10.0)),
                borderSide: BorderSide(color: Colors.green)), // your color
          ),
        ),

More about InputDecoration

BORDER FLUTTER FLUTTER-LAYOUT TEXTFIELD
SHARE: