TextField height changes if the errorText shows

[Hixie]

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

[alidawud]

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

[SinaSeirafi]

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

[babenkovladimir]

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

[justinmc]

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.

[justinmc]

The two workarounds for this problem are:

1. Wrap the TextFormField in a fixed height parent.

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

2. 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.

[AyushmanChatterjee]

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.

[ksankumar]

The two workarounds for this problem are:

1. Wrap the TextFormField in a fixed height parent.

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

1. 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

[jacobokoenig]

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