Increase space between keyboard and TextField

Question

I have several TextField and TextFormField in my app, but I customized them so they can display an error message below them.

Because it now shows an error, the space between the actual TextField seems smaller. So is there a way to increase the size between the keyboard and a widget when the screen scrolls up?

I'm assuming this space is a value set somewhere, but cannot seem to find it.

So this is not a question about making the screen scroll this works, it's about increasing the space between the keyboard.

Thanks.

Solution

Since you make use of TextField widgets, you can use the scrollPadding property which indicates how much space you want to have between so called viewInsets (usually something like the UI keyboard) and the TextField widget. So you can set something like EdgeInsets.only(bottom: 32.0) (default is 20.0).

Keep in mind: This does only work, if the surrounding Scrollable (like ListView) has enough space to scroll past the TextField widget to fit the given scrollPadding - otherwise you will see, that the TextField is right above the keyboard, "ignoring" the padding. To resolve that, you could place a SizedBox as the last entry in your Scrollable widget which ensures that there is enough place to scroll once the keyboard is shown:

ListView(
  TextField(
    scrollPadding: const EdgeInsets.only(bottom: 32.0),
  ),
  SizedBox(height: MediaQuery.of(context).viewInsets.bottom + 32.0),
),

Comments

[sarru1291]

validator in textformfield already display error below field. If your requirement is different try dialog or snackbar.

[vixez]

I have strict UI designs that I need to follow. The default error is insufficient and other methods are not acceptable. That is why I created a custom widget.

[Thong M Truong]

it works for me!