TextField get pushed up whenever validation message show up, anyone got a solution?

Question

so this is my Form widget and the inside is email textfield, but whenever i try an error like empty field or wrong email format, it push the widget up and it become very ugly.

child: Form(
              key: emailkey,
              child: Container(
                padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                height: 55,
                decoration: BoxDecoration(
                  color: Colors.grey[100],
                  border: Border.all(
                    color: Colors.grey[100],
                  ),
                  borderRadius: BorderRadius.all(Radius.circular(10)),
                ),
                child: TextFormField(
                  keyboardType: TextInputType.emailAddress,
                  decoration: new InputDecoration(
                    border: InputBorder.none,
                    icon: Icon(Icons.mail_outline),
                    hintText: 'Email',
                    contentPadding: EdgeInsets.fromLTRB(0, 13, 0, 13),
                  ),
                  validator: (String value){
                    if(value.isEmpty){
                      return "Please enter your email!";
                    }else if(!RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+").hasMatch(value)){
                      return "Please enter a valid email!";
                    }
                  },
                  onSaved: (String _email){
                    email1 = _email;
                  },

Answer 1

Try to give a helperText a single space and adjust border to your needs from start. This will prevent textFormField from changing its height on error and likely will help to get rid of this behavior:

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