💬
Get Help
JS
Jake Speyer

FlutterFlow Elegant ways to Handle Popup Keyboard?

Widgets & Design

I have been struggling with this for a while now. FlutterFlow does not seem to support the flag for changing how the onscreen keyboard overlays on the screen which can really mess with some UI.

What I mean by this is that the on screen keyboard is stuck "Squishing" the content on the page in order to display. Flutter has a toggle for this on the Scaffold called resizeToAvoidBottomInset. This property forces the keyboard to sit ontop of the UI instead of squishing it which is the perfered behavior on some screens/ UI layouts.

However, FlutterFlow does not expose this within the editor.

Does anyone have a decent solution for this? I feel like there should be a property in the Scaffold section for this (see image).

What have you tried so far?

  1. I have tried making the parent column scrollable, but this means that page layouts with text fields at the top of the screen and a button at the bottom (Typical of auth screens) dont work as making it scrollable shoves all widgets to the top of the screen.

  2. I have tried using the hacky workaround of conditionally rendering content I would like to appear under the keyboard in the !onScreenKeyboardVisible, but the content becomes visible while the keyboard is closing which looks really odd as you can have large portions of UI moving down the screen.

Did you check FlutterFlow's Documentation for this topic?
Yes
5
2 replies