Solution Proposal for showing or not the errorText in the TextFormField

Use case

It would be nice to have a TextFormField that didn't show the error messages below when trying to do validation. For example, in my design, I chose to show the error messages interactively on the labelText.

Having no option of disabling the errorText can really be annoying when trying to deal with the spacing of the fields. You will either have to create an extra-padded TextFormField and let the errorText be always ' ', or live with the abrupt transition of when the error message appears and the spacing changes.

This has appeared in complaints before:

StackOverflow — Flutter increase height of TextFormField
Issue TextField height changes if the errorText shows #15400 — TextField height changes if the errorText shows

Proposal

I don't have a good solution for the abrupt transition when the errorText appears. Maybe showing it with some sort of AnimatedContainer would be a good option. (One solution that goes along those lines is this one).

However, when it comes to showing or not the errorText, I have a suggestion — also featured in this SO answer — that would change only 2 lines of the source's TextFormField:

Add another parameter to the TextFormField's constructor (below this line), say, errorTextPresent:

// `true` is the current implicit default, i.e., showing the `errorText`
bool errorTextPresent = true

Change the decoration's initialization of the internal TextField to feature the new option.
1. From:
  
  flutter/packages/flutter/lib/src/material/text_form_field.dart
  
  Line 220 in 1ca4815
  
  decoration: effectiveDecoration.copyWith(errorText: field.errorText),
2. To:
```
decoration: effectiveDecoration.copyWith(
    errorText: errorTextPresent ? field.errorText : null)
```

You can now call TextFormField with a new option when you wish to disable the errorText:

TextFormFieldWithErrorTextOption(
  errorTextPresent: false, // `false` will disable the `errorText`
  ...
),

Strictly speaking, this issue should probably have been a PR. But I chose it to be an issue because I didn't really know how the Flutter team would have liked to proceed.

How does this proposal solve the problem of a jarring height change when the error text appears? Do you just want the field to turn red but never show error text?

How does this proposal solve the problem of a jarring height change when the error text appears?

I'm not sure if I'm missing something from the question, but my solution simply disables the errorText, so there wouldn't be any height change altogether.

Do you just want the field to turn red but never show error text?

My complete solution for fixing the height change has more to it than simply disabling the errorText below the field, but that's a solid step and a nice option to have anyway. My final design would feature the labelText changing to show the error — this could be a future nice feature of TextFormField in my opinion, i.e., where to show the errorText —; this way there would be no height change. Of course, I would have plenty of redundant design elements to still show the user the meaning of the field when the labelText has changed to an error message.

A simple sample — in this case, the labelText would be the string "password" initially —:

Ok got it. Could you post a minimal app that shows the problem if you have time? It would be helpful to see a full example. I wasn't even thinking of bordered text fields at first.

I've been working on a project/package for authentication with Flutter (flutter_firebase_auth_benchmark) in the last 2 weeks. The image I shared above is from it. You can check out my implementation of what I suggested in it.

The widget with the mentioned features is the AuthTextFormField, which returns my modified version of the TextFormField, which I called TextFormFieldWithErrorTextOption for the moment.

The project is a way for me to learn more about Flutter and Dart, besides serving a great entrypoint for later apps, since authentication is so ubiquitous.

With respect to the project's architecture, I would say I encountered quite some problems which would change my approach completely if I were to start it over again. You can find out more about the problems in the README.

Thanks for the explanation and for taking the time to write out all that feedback in the README.

For the record, another solution to this problem is to return an empty string from validator and then set the height of the error to zero:

TextFormField(
  decoration: const InputDecoration(
    errorStyle: TextStyle(height: 0),
  ),
  validator: (value) => value.isEmpty ? '' : null,
),

That's not really an ideal solution, though. We might need to make some bigger changes to Flutter's form validation, there was another PR recently with some good discussion about this (#48155). I hesitate to add new parameters like errorTextPresent since it's already pretty complicated, though it definitely would make this use case a lot cleaner.

there was another PR recently with some good discussion about this (#48155)

Really interesting PR indeed.

There are plenty of other solutions for this problem, I guess. I'm not a huge fan of the one you mentioned, though, because you seem to be turning the validator's usefulness down.

Another solution I was thinking about lately was to put this boolean inside InputDecoration instead, since showing or not the error feels more like a decoration choice than functionality itself, and it might make things easier to understand for the user.

Quite frankly, as a Flutter user, I'm not very satisfied with the TextFormField's design overall, specially the error text placement. There are so many modern designs which are so much more appealing. These should be very easy to implement, I think; we should not have to rework dozens of things. Take a look at this one for example, it even features animations, which is something some of the basic Flutter widgets already do have.

On a sidenote, if there is interest in reworking the TextFormField, I would really suggest adding yet another parameter — to InputDecoration probably — for how many characters it takes before the ellipsis character appears on the labelText. I have created an issue about this: #53166. The solution to it seems to be buried deep down in some of the core renderers, but I'm not sure about it.

Flutter's Material library needs to follow the Material spec (see "Error text" in the Material docs). However, we should make it easy for developers to customize our widgets. Sometimes it is kind of like Material/Cupertino or nothing.

I'll take a look at the ellipsis issue.

It would be nice to see some updates on this issue/proposal as I am also currently working with the task where I don't show an error text bellow the textField's

A PR was recently merged that introduces the autovalidateMode property to form fields. Would that solve the problem here?

Closing due to timeout.

Let us know if there is anything still to be done here.

@markusaksli-nc

Closing due to timeout.

Let us know if there is anything still to be done here.

Everything still needs to be done here @markusaksli-nc

This is still a problem for many flutter ui developers.

also see #54104 (comment)

So the autovalidateMode property didn't solve this?

I've been dealing with this issue for more than two years now. It's simply unacceptable that we still don't have any normal solution for this. I've seen and used everything from OverflowBox to manual borderStyle changes...

Setting height: 0 and returning empty error message worked for a while, but it doesn't on the latest master anymore.

Thanks for the explanation and for taking the time to write out all that feedback in the README.

For the record, another solution to this problem is to return an empty string from validator and then set the height of the error to zero:
TextFormField(
  decoration: const InputDecoration(
    errorStyle: TextStyle(height: 0),
  ),
  validator: (value) => value.isEmpty ? '' : null,
),
That's not really an ideal solution, though. We might need to make some bigger changes to Flutter's form validation, there was another PR recently with some good discussion about this (#48155). I hesitate to add new parameters like errorTextPresent since it's already pretty complicated, though it definitely would make this use case a lot cleaner.

By using this method the error is showing on top of the TextFormField.

So we can use this instead

  errorStyle: TextStyle(
                    height: 0,
                    color: Colors.transparent,
                  ),

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

Solution Proposal for showing or not the `errorText` in the `TextFormField` #52634

Use case

Proposal

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Solution Proposal for showing or not the errorText in the TextFormField #52634

Description

Use case

Proposal

Activity

justinmc commented on Mar 19, 2020

psygo commented on Mar 20, 2020

justinmc commented on Mar 20, 2020

psygo commented on Mar 21, 2020

justinmc commented on Mar 25, 2020

psygo commented on Mar 26, 2020

justinmc commented on Mar 27, 2020

PollyGlot commented on Sep 15, 2020

justinmc commented on Sep 15, 2020

markusaksli-nc commented on Oct 7, 2020

homelyng commented on Apr 8, 2021

markusaksli-nc commented on Apr 12, 2021

vidklopcic commented on Apr 22, 2021

naveenyadav15 commented on Jun 1, 2021

github-actions commented on Aug 1, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Solution Proposal for showing or not the `errorText` in the `TextFormField` #52634