Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to avoid TextFormField from expanding on error?

I’m building a contact form for my website, and I can’t figure out why the box get elevated on error, also the subject field get kind of compressed.

Any idea on how to fix it?

enter image description here

Here the code:

    return SizedBox(
      height: 460,
      width: MediaQuery.of(context).size.width > 900
          ? MediaQuery.of(context).size.width * 0.4
          : MediaQuery.of(context).size.width * 0.6,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Expanded(
                child: TextFormField(
                  autovalidateMode: AutovalidateMode.onUserInteraction,
                 ...
              ),
              const SizedBox(width: 15),
              Expanded(
                child: TextFormField(
                  autovalidateMode: AutovalidateMode.onUserInteraction,
                  ...
                  ),
                  validator: (value) {
                    if (value == null || value.isEmpty) {
                      return 'Please enter an email';
                    } else if (!isValidateEmail(value)) {
                      return 'Please enter a valid email';
                    }
                    return null;
                  },
                ),
              ),
            ],
          ),
          SizedBox(
            height: 250,
            child: Expanded(
              child: TextFormField(
                maxLines: 20,
                ...
                ),
              ),
            ),
          ),
        ],
      ),
    );
Tags:

2

Answers


  1. 0

    try this:

    return Card(
  elevation: 2,
  child: Container(
    width: MediaQuery.of(context).size.width > 900
        ? MediaQuery.of(context).size.width * 0.4
        : MediaQuery.of(context).size.width * 0.6,
    padding: const EdgeInsets.all(16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        TextFormField(
          autovalidateMode: AutovalidateMode.onUserInteraction,
          //other options
        ),
        const SizedBox(height: 15),
        TextFormField(
          autovalidateMode: AutovalidateMode.onUserInteraction,
          validator: (value) {
            if (value == null || value.isEmpty) {
              return 'email is not correct';
            } else if (!isValidateEmail(value)) {
              return 'email is not correct';
            }
            return null;
          },
        ),
        const SizedBox(height: 15),
        TextFormField(
          maxLines: 5,
          //other properties
        ),
      ],
    ),
  ),
);
    Login or Signup to reply.
  2. 0

    The error text makes the TextInputField larger. To display both fields at the same height, you have two options. Either wrap the field in a SizedBox or use a helperText with a single space.

    You can find the original post with an example here.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search