CODEWITHSUNDEEP
flutter
Scorb
Scorb

Reputation: 1840

How do I set a TextField to draw its error border?

I have a TextField. I have added the following input decorator to it with a specific errorBorder.

How do I switch between the different border styles. Using a Form does not suffice for my needs, and I find Form to be quite clunky. I am looking for a manual way to set the state on my TextField to error.

InputDecoration(
    filled:true,
    fillColor: Color(0x22000000),
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(3)),
      borderSide: BorderSide(
        color: MyColors.Accent,
        width: 4,
      ),
    ),
    enabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(3)),
      borderSide: BorderSide(
        color: MyColors.PrimaryContrast, width: 2
      ),
    ),
    errorBorder: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(3)),
      borderSide: BorderSide(
        color: Colors.red, width: 2
      ),
    ),
    focusedErrorBorder: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(3)),
      borderSide: BorderSide(
        color: Colors.red, width: 2
      ),
    ),
    labelStyle: TextStyle(
      fontFamily:'Din',
      fontWeight: FontWeight.normal,
      fontSize: 16,
      letterSpacing: 1,
      color: MyColors.Accent
    )
  )

Upvotes: 1

Views: 1276

Answers (1)

Isaac Mauricio
Isaac Mauricio

Reputation: 134

If you provide an errorText it should show the errorBorder. It can be an empty string. I don't know if there is other way to trigger the errorBorder (actually, I think this is the only way).

For some reason I don't see that the flutter documentation explicitly says that you need to provide errorText to show the error border, however in the errorBorder property documentation, under the see also section says:

focusedErrorBorder, displayed when InputDecorator.isFocused is true and InputDecoration.errorText is non-null.

In the FocusedErrorBorder property also says:

errorBorder, displayed when InputDecorator.isFocused is false and InputDecoration.errorText is non-null.

Again I don't know why the documentation of each property itself doesn't say this. Maybe I'm missing something.

Anyways, I hope this helps you.

Upvotes: 3

Related Questions