CODEWITHSUNDEEP
fluttertextfield
waqas023
waqas023

Reputation: 48

How to remove an error text below my textfield in Flutter

I am using a TextField widget in my Flutter app, and I want to change the border color based on some condition. I am using the borderSide property of the OutlineInputBorder to set the border color, and it seems to work for displaying an error message when the condition is met. However, even when the condition is not met, the border color remains red.

 TextField(
  controller: userName,
  onChanged: (value) {},
  decoration: InputDecoration(
    hintText: "Email",
    errorText: valid == true ? "" : "Not Good",
    errorStyle: TextStyle(fontSize: valid == true ? 0 : 12),
    prefixIcon: const Icon(Icons.email),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10),
      borderSide: BorderSide(
        color: valid == true ? Colors.black : Colors.red,
      ),
    ),
  ),
),

Upvotes: 0

Views: 597

Answers (2)

Rashid Wassan
Rashid Wassan

Reputation: 764

There is a parameter called errorBorder in InputDecoration(). You can use it to add a custom border on error.

TextField(
 decoration: InputDecoration(
            errorBorder: OutlineInputBorder(),),
)

Upvotes: 1

Cheihbi Salah
Cheihbi Salah

Reputation: 36

You can use errorBorder:

TextField(
  onChanged: (value) {},
  decoration: InputDecoration(
    errorBorder: const OutlineInputBorder(
      borderSide: BorderSide(color: Colors.red, width: 0.0),
    ),
    hintText: "Email",
    errorText: valid == true ? "email" : "Not Good",
    errorStyle: TextStyle(fontSize: valid == true ? 0 : 12),
    prefixIcon: const Icon(Icons.email),
    border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
        borderSide:
            BorderSide(color: valid == true ? Colors.black : Colors.blue)),
  ),
);

Upvotes: 1

Related Questions