Search code examples
flutterdart

Validator error message changes TextFormField's height


When the error message shows up, it reduces the height of the TextFormField. If I understood correctly, that's because the height of the error message is taking into account in the height specified.

Here's a screen before :

before

and after :

after

Tried to put conterText: ' ' to the BoxDecoration (as I've seen on another topic) but it didn't help.

An idea ?

EDIT : OMG completly forgot to put the code, here it is :

 return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Container(
            height: 40.0,
            child: _createTextFormField(loginEmailController, Icons.alternate_email, "Email Adress", false, TextInputType.emailAddress),
          ),
          Container(
            height: 40.0,
            child: _createTextFormField(loginPasswordController, Icons.lock, "Password", true, TextInputType.text),
          ),

          SizedBox(
            width: double.infinity,
            child: loginButton
          )
        ],
      ),
    );

  }

  Widget _createTextFormField(TextEditingController controller, IconData icon, String hintText, bool obscureText, TextInputType inputType){
      return TextFormField(
        keyboardType: inputType,
        controller: controller,
        obscureText: obscureText,
        /* style: TextStyle(
          fontSize: 15.0,
        ), */
        decoration: InputDecoration(
         /*  contentPadding:
              EdgeInsets.symmetric(vertical: 5.0, horizontal: 8.0), */
          border: OutlineInputBorder(borderRadius: BorderRadius.circular(5.0)),
          icon: Icon(
            icon,
            color: Colors.black,
            size: 22.0,
          ),
          //hintText: hintText,
          labelText: hintText,
        ),
        validator: (value) {
          if (value.isEmpty) {
            return 'Enter some text';
          }
          return null;
        },
      );
    }

Solution

  • In your Code - you need to comment out the 40 height given to each container.

    Container(
                 // height: 40.0,
                  child: _createTextFormField(
                      loginEmailController,
                      Icons.alternate_email,
                      "Email Adress",
                      false,
                      TextInputType.emailAddress),
                ),
                Container(
                //  height: 40.0,
                  child: _createTextFormField(loginPasswordController, Icons.lock,
                      "Password", true, TextInputType.text),
                ),
    

    and then in your - TextFormField in InputDecoration, you can alter these value as per your liking.

      contentPadding:
          EdgeInsets.symmetric(vertical: 10.0, horizontal: 10.0),