How to prevent keyboard from covering an input field

[abhinavc]

Hi Danvick,
I am trying to implement the following form structure

Column(
    children: <Widget>[
        someFormBanner(),
        Container( 
             child: FormBuilder(
                key: _globalKey,
                autovalidate: true,
                child: Column(
                   mainAxisSize: MainAxisSize.min,
                   children: <Widget>[
                       FormBuilderTextField( ... ), 
                       FormBuilderTextField( ... ), 
                       FormBuilderTextField( ... ), 
                       FormBuilderTextField( ... ), 
                       FormBuilderTextField( ... ), 
                       FormBuilderTextField( ... ), 
                   ],
                ),
             ),
        ), 
    ], 
)

If I click on a text field lower down, I find that the keyboard covers it

Is there a way to make the focussed field scroll-up above the keyboard?
I have even tried FormBuilder > SingleChildScrollView > Column instead of the above FormBuilder > Column layout. But to no effect

I am hoping I don't have to implement FocusNode etc. and that the solution lies within the
library itself.

Thanks for your help
Abhinav.

[danvick]

Hi Anhinav,
First of all, I'd advise you to use SingleChildScrollView so that you don't get overflow issues on smaller devices.

Try setting resizeToAvoidBottomInset flag on your Scaffold to true. This will push up the content of the page when the keyboard shows. Is this the behavior you are expecting?

[abhinavc]

Hi Danvick,
I didn't have much luck with resizeToAvoidBottomInset: true. It seems it's true by default anyways

However, what seemed to work better was wrapping the form within a Card. In particular, I implemented Scaffold > Card > FormBuilder > ListView as opposed to Scaffold > Column > FormBuilder > Column. It seems that Scaffold by default will roll up a floating widget when the keyboard pops up. And I suppose a Card is a floating widget whereas a Column is not

That said, I'm not sure if what I've done is hack or a valid workaround. Just wanted to share with you anyways

Thanks
Abhinav

[abhinavc]

My bad. Using Card is not necessarily the solution.

However, I found that using FormBuilder > ListView > <form-fields> worked better for me than
FormBuilder > SingleChildScrollView > Column etc. Can't explain why though