Home > front end >  Change Textformfield Underline error color flutter
Change Textformfield Underline error color flutter

Time:10-22

I have a textformfield but when I type something in the Underline color become red How can I change that color

code:

TextFormField(
                        autovalidateMode: AutovalidateMode.onUserInteraction,
                        validator: (value) => validateCharacters(value),
                        inputFormatters: [
                          LengthLimitingTextInputFormatter(20),
                        ],
                       decoration: const InputDecoration(
                            errorStyle: TextStyle(color: Colors.grey),
                            enabledBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: Colors.grey),
                            ),
                            focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: Colors.grey),
                            ),
                            hintText: 'Full Name',
                            hintStyle: TextStyle(fontSize: 12)),
                        onChanged: (value) {
                          setState(() {
                            fullName = value.trim();
                          });
                        },
                      )

image: enter image description here

CodePudding user response:

You need to change errorBorder:

TextField(
  decoration: InputDecoration(
    focusedBorder: UnderlineInputBorder(
        borderSide: BorderSide(color: Colors.grey)),

    errorBorder: UnderlineInputBorder(
      borderSide: BorderSide(width: 2, color: Colors.black)
    ),
  ),
)

CodePudding user response:

to change the border color on focused mode, use the focusedBorder property.

  const TextField(
                      decoration: InputDecoration(
                        focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.grey)),
            
                        enabledBorder: UnderlineInputBorder(
                          borderSide: BorderSide(
                              width: 3,
                              color: Colors.greenAccent), //<-- SEE HERE
                        ),
                      ),
                    ),

  • Related