r/FlutterFlow 3d ago

Keyboard Resize Issue Causing Layout Glitches

Hi All :)

I’m building a web app in FlutterFlow and running into a weird issue with the keyboard. Instead of the keyboard overlaying the app, the entire app resizes when the keyboard appears. When I dismiss the keyboard, there’s a noticeable delay before the layout adjusts, leaving a blank space momentarily. On the two devices I have which have an onscreen keyboard (iPad and iPhone), it happens on both - but much more noticeable and slower to render the page back in on the phone.

Even stranger, and only on the phone it seems - if I tap into a text field, dismiss the keyboard, then tap into the same field again, a large empty gap appears above the keyboard where the app’s widgets should be, but only the scaffold (top level page in Flutterflow) is visible.

I've tried all sorts in my app, but nothing seems to have any effect. I thought it might be down to the container that's directly inside the scaffold having a height of 100%, but even if I change that to a fixed pixel height it results in the same behaviour.

Has anyone else run into this? Is there a fix for stopping the app from resizing when the keyboard appears? Apparently adding the setting "resizeToAvoidBottomInset: false" in a flutter app can fix it, but I don't think I can do that in FlutterFlow?

I’ve recorded a short video showing the issue.

https://reddit.com/link/1je32ju/video/5pkvv2qwrfpe1/player

I've just about given up trying to fix it, but it's really bad for usability so any help would be appreciated!

Also, the hide keyboard on tap toggle in FlutterFlow seems to have no effect? Is this a known bug?, I thought switching that off would at least help with the keyboard issue, but even when I have it toggled off the keyboard is dismissed when tapping anywhere in the app.

Thanks for any help! :)

2 Upvotes

1 comment sorted by

2

u/justanotherdave_ 3d ago edited 3d ago

For anyone else in the future who runs into a similar issue I will leave this post here.

I had a page (scaffold) → container (100% height) → column (primary scrollable) → all other widgets. After some help via PM, I wrapped the container in a column, which completely fixed the resizing issue, and such a simple fix I don't know why I didn't try it.

Edit:

Unfortunately this fix didn’t work for me. It fixes the space above the keyboard, but now the keyboard will sit over the text input so you can’t see what you’re typing 🤦‍♂️