email_validator squishing tefxformfield flutter

Issue

I am building a flutter web app, where I have a textformfield where I validate the input email. I use email_validator for this, however when the address is invalid, it ‘squishes’ the textfield like this: enter image description here This is my code:

Container(
                      width: MediaQuery.of(context).size.width / 5,
                      height: MediaQuery.of(context).size.height / 125 * 7,
                      child: TextFormField(
                          expands: true,
                          minLines: null,
                          maxLines: null,
                          key: _teftFormFieldKey,
                          style: TextStyle(
                              color: Colors.white,
                              fontFamily: 'FuturaFura',
                              fontSize: 20),
                          cursorColor: Colors.grey,
                          textAlign: TextAlign.center,
                          textAlignVertical: TextAlignVertical.center,
                          controller: emailController,
                          validator: (value) =>
                              EmailValidator.validate(value)
                                  ? null
                                  : "Please enter a valid email",
                          decoration: InputDecoration(
                              contentPadding: EdgeInsets.symmetric(
                                  vertical: 10, horizontal: 10),
                              hintText: 'Your email',
                              hintStyle: TextStyle(
                                  color: Colors.grey,
                                  fontFamily: 'FuturaFura'),
                              enabledBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.all(
                                      Radius.circular(100)),
                                  borderSide: BorderSide(
                                      color: textFormFieldOutline)),
                              focusedBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.all(
                                      Radius.circular(100)),
                                  borderSide: BorderSide(
                                      color: textFormFieldOutline,
                                      width: 2.5)),
                              errorBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.all(
                                      Radius.circular(100)),
                                  borderSide: BorderSide(
                                      color: textFormFieldOutline)),
                              focusedErrorBorder: OutlineInputBorder(
                                borderRadius:
                                    BorderRadius.all(Radius.circular(100)),
                                borderSide: BorderSide(
                                    color: Color.fromRGBO(184, 44, 47, 1)),
                              ))),
                    ),

I also have a button that it needs to be in line with:enter image description here so if I add a helperText, it won’t work,
I really need help. Thanks.

Solution

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 behaviour:

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

Answered By – Simon Sot

Answer Checked By – Gilberto Lyons (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *