TextFormField borderSide color is not working-CodePudding

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

CodePudding user response：

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

Your screen after focus ->

CodePudding user response：

Change your input decoration(For TextFormField) like the code given below

decoration: InputDecoration(
                  focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(10.0)),
                      borderSide: BorderSide(color: Color(0xffd8d6de))),
                  disabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(10.0)),
                      borderSide: BorderSide(color: Color(0xffd8d6de))),
                  enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(10.0)),
                      borderSide: BorderSide(color: Color(0xffd8d6de))),
                  border: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(10.0)),
                      borderSide: BorderSide(color: Color(0xffd8d6de))),
                ),

Give the focusedBorder, disabledBorder and enabledBorder same properts so everytime the textformfiled looks same.

Thank You

CodePudding user response：

you just need to add enabledBorder on InputDecoration add this to your code

enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(10.0)),
            borderSide: BorderSide(color: Colors.blue),
),