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.

https://stackoverflow.com/questions/56674596/validator-error-message-changes-textformfields-height might be this link is helpful to you — Developer, Mar 22 '23 at 05:04
Removing the height of animated container will solve the problem of shrinking here — Madhav Anadkat, Mar 22 '23 at 05:57

Nidhi Jain · Accepted Answer · 2023-03-22T08:22:30.717

0

Removing height from animated container will help.

edited Mar 22 '23 at 08:22

answered Mar 22 '23 at 08:15

Nidhi Jain

86
3

The thing is.. if I remove the height from animated container there are no more errors. But in the same screen I have 2 types of textformfields. The email and password for login, and confirm password and the phone for register. this way when loggin the confirm password gets "invisible". depending on the value of registerAuthMode. – Bertoni Mar 23 '23 at 00:24
worked, i had a size box between every textformfield. I remove all of them and set heigh to 90. everything running fine now! thanks – Bertoni Mar 23 '23 at 00:49

TextFormField shrinks on error validating FLUTTER

1 Answers1