TextField height changes if the errorText shows

@HansMuller

Put this in a dialog, and as you type in the text field, the dialog changes height.

        new Form(
          autovalidate: true,
          child: new ListBody(
            children: <Widget>[
              new TextFormField(
                decoration: const InputDecoration(
                  labelText: 'User name',
                ),
                validator: (String name) {
                  if (name.length < 2)
                    return 'User names must be alphabetic and at least three characters long.';
                  },
                ),
              ),
            ],
          ),
        ),

cc @HansMuller

this might help you
https://stackoverflow.com/questions/50523006/flutter-increase-height-of-textformfield

Put the TextFormField inside a Container, and give it a certain height.
That should prevent vertical moving.

I used SizedBox. I set a specific height, which was enough for the height not to jump.

Here are some screenshots showing my understanding of the problem:

When the input has an error message, it is considered to be taller than without it, so the parent widget increases its height to accommodate it. That can definitely be pretty jarring for the developer in cases like this dialog or maybe even with a column of text fields.

I'm going over some solutions and I'll post back.

The two workarounds for this problem are:

Wrap the TextFormField in a fixed height parent.

SizedBox(
  height: 80,
  child: TextFormField(
    validator: myValidator,
  ),
),

Give a helperText of a single space.

TextFormField(
  decoration: const InputDecoration(
    helperText: ' ',
  ),
  validator: myValidator,
),

The referenced PR just adds an explanation of these workarounds to the documentation. I think this is better than changing any behavior. We want to avoid breaking changes. Also, I can see a situation where users want the existing behavior so that they can tightly space their inputs.

Thank you so much! This was driving me insane as I am using two textformfields side by side in a row and the validation errorText kept breaking up the alignment of the form fields. Using an empty helperText was a simple solution to the problem.

The two workarounds for this problem are:

Wrap the TextFormField in a fixed height parent.
SizedBox(
  height: 80,
  child: TextFormField(
    validator: myValidator,
  ),
),
Give a helperText of a single space.
TextFormField(
  decoration: const InputDecoration(
    helperText: ' ',
  ),
  validator: myValidator,
),
The referenced PR just adds an explanation of these workarounds to the documentation. I think this is better than changing any behavior. We want to avoid breaking changes. Also, I can see a situation where users want the existing behavior so that they can tightly space their inputs.

With helperText makes awesome solution

This is still an issue for me, even with a sizedbox or container, and a helper text! Can't prevent the text field from becoming smaller!

Container(
          height: 32,
          child: TextFormField(
            decoration: InputDecoration(
              helperText: '  ',
              enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(16),
                borderSide: BorderSide(
                  color: Colors.white,
                ),
              ),
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(16),
                borderSide: BorderSide(
                  color: Colors.white,
                ),
              ),
            ),
            validator: validator,
          ),
        ),

@jacobokoenig

@jacobokoenig I don't think I see the TextFormField becoming smaller in your example. I'm on the master channel. I changed your code by adding a color to the Container so that I could see how tall it is, and I also added autovalidate to your TextFormField so that the error message shows immediately.

Neither the border of the TextFormField or the Container in the background change size after the error appears.

This is still an issue for me, even with a sizedbox or container, and a helper text! Can't prevent the text field from becoming smaller!

Container(
          height: 32,
          child: TextFormField(
            decoration: InputDecoration(
              helperText: '  ',
              enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(16),
                borderSide: BorderSide(
                  color: Colors.white,
                ),
              ),
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(16),
                borderSide: BorderSide(
                  color: Colors.white,
                ),
              ),
            ),
            validator: validator,
          ),
        ),

I also encountered the same problem, the workaround that I made was make the fontsize of your errorText and helperText the same so that they will take the space.

Taken from this SO answer and the new issue #52634:

There's another alternative to adding extra, permanent padding to cover the errorText — which would probably mess up many designer's original project.

You could create a modified version of the source's TextFormField.

To achieve just that, you can:

Copy-paste all of the content in the source's TextFormField.
Rename your custom TextFormField just so you avoid naming conflicts with the original.
- You should probably also rename the internal state class.
- In VS Code, you can use Ctrl + H to replace TextFormField for, say, TextFormFieldWithErrorTextOption.

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

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

Change the decoration's initialization for the internal TextField:

From:

decoration: effectiveDecoration.copyWith(field.errorText)

To:

decoration: effectiveDecoration.copyWith(
    errorText: errorTextPresent ? field.errorText : null)

Then, you can use your new TextFormField similarly to how you use any TextFormField:

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

https://stackoverflow.com/a/60208333/5392889

try this answer. Worked really well for me

@ooanishoo

https://stackoverflow.com/a/60208333/5392889

try this answer. Worked really well for me

@ooanishoo It will probably help if we don't want to show the field validation message.
But if we want to show error message then #15400 (comment) really helpful .

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

TextField height changes if the errorText shows #15400

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

TextField height changes if the errorText shows #15400

Description

Activity

alidawud commented on Oct 8, 2018

SinaSeirafi commented on Oct 28, 2018

babenkovladimir commented on Feb 8, 2019

justinmc commented on Mar 21, 2019

justinmc commented on Mar 22, 2019

AyushmanChatterjee commented on Jul 16, 2019

ksankumar commented on Oct 6, 2019

jacobokoenig commented on Nov 16, 2019

justinmc commented on Nov 18, 2019

camsethsum commented on Feb 26, 2020

psygo commented on Mar 15, 2020

ooanishoo commented on Mar 26, 2020

TheAlphamerc commented on Apr 2, 2020

lock commented on Apr 19, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions