It'sPhil
It'sPhil

Reputation: 117

Change Textformfield Underline error color flutter

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

Upvotes: 0

Views: 355

Answers (2)

eamirho3ein
eamirho3ein

Reputation: 17880

You need to change errorBorder:

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

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

Upvotes: 2

john
john

Reputation: 1998

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
                        ),
                      ),
                    ),

Upvotes: 1

Related Questions