Form is ubiquitous in apps. So there is a high chance that you will hit this problem in your first encounter with Flutter.
Say you were testing your pixel-perfect designed form on your test device. You hit the input field, the device’s keyboard was brought up and it covered some of your screen’s contents. You saw a little warning about bottom overflow. You checked your terminal and it printed:
Regardless of the warning, your UI seems to still work, kind of. You noticed that scrolling did not work. So, you googled the problem and found an answer on SO.
resizeToAvoidBottomInset
The first option as per the SO answer is to use resizeToAvoidBottomInset: false flag on Scaffold.
This will certainly remove both warnings on the UI and the terminal. However, your UI will still just kind of work. The scrolling still does not work. All it does is preventing the body from being resized when the keyboard is up, hence avoiding the overflow issue.
Option 2: Use one of ScrollView classes
The second option is to wrap your UI inside one of ScrollView classes. In this example, I will use SingleChildScrollView.
There is no need to set the resizeToAvoidBottomInset flag here, and the Container is moved inside SingleChildScrollView instead to make the whole content scrollable. Now the overflow problem disappears and scrolling works!
Of course you can still use resizeToAvoidBottomInset along with ScrollView classes. It will just ensure your body will not be resized when another UI is shown on top your Scaffold. I haven’t encountered a case where I need that, but I am sure there is a use case for that. Will do another post if I encountered it. 👋
