TextFormField shrinks on error validating FLUTTER

Question

I am learning Dart/Flutter, and I got a error that I just can't figure it out.

no problem with this textfield:

TextFormField(
                keyboardType: TextInputType.emailAddress,
                controller: emailController,
                obscureText: false,
                focusNode: emailFocusNode,
                textInputAction: TextInputAction.next,
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: "Insira o Email",
                  prefixIcon: Icon(Icons.mail),
                ),
                validator: (String? value){
                  if (value != null && value.isEmpty){
                    return "Insira o Email";
                  }
                  return null;
                },
              ),

but with this one the hight of the Textfield shrinks

AnimatedContainer(
                duration: const Duration(milliseconds: 500),
                height: registerAuthMode ? 65 : 0,
                child: AnimatedOpacity(
                  duration: const Duration(milliseconds: 500),
                  opacity: registerAuthMode ? 1 : 0,
                  child: TextFormField(
                    validator: (String? value){
                      if(registerAuthMode){
                        if(value != null && value!.isEmpty){
                          return "Insira a Senha";
                        }else{
                          if (value != passwordController.text){
                            return "As senhas não são Iguais";
                          }
                        }
                        return null;
                      }
                      return null;
                    },
                    controller: confirmPasswordController,
                    focusNode: confirmPasswordFocusNode,
                    obscureText: obscureText,
                    textInputAction: TextInputAction.done,
                    decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: "Repita a  Senha",
                        prefixIcon: const Icon(Icons.password),
                        suffixIcon: IconButton(
                          onPressed: toggleObscureText, icon: obscureText
                            ? const Icon(Icons.visibility)
                            : const Icon(Icons.visibility_off),)
                    ),
                  ),
                ),
              ),

before validate after validate

the bottom for validate

 ElevatedButton(
                    onPressed: () {
                      if (_formKey.currentState!.validate()){
                      }
                    },
                    child: Text(registerAuthMode ? 'Registrar' : 'Entrar'),
                    style: ButtonStyle(
                      elevation: MaterialStateProperty.all(8.0),
                    ),
                  ),

my guess is that has some kind of problem with the widget animated container and animated opacity

again, im pretty new to this, so if I did something wrong or ask for help the wrong way sorry.

I can't figure it out. but has to do something with animates opacity and/or AnimatedCointainer

EDIT:

so I checked this : Validator error message changes TextFormField's height

and kinda worked.

I put an error style inside the decoration from the textformfield.

decoration: InputDecoration(
                  errorStyle: const TextStyle(fontSize: 0.1),

and this was the result: didnt shrink but no error msg

but now de ERROR dosent show anymore. the border turn red, but no more insert your password"or something like this.

Answer 1

Removing height from animated container will help.