Scaleup Guide
Fix Flutter 'Bottom Overflowed' When the Keyboard Opens
In this guide
A simple guide to this issue: Flutter 'Bottom Overflowed' When the Keyboard Opens. Learn why it happens, what to check first, and how to fix it.
Your screen looks fine until a TextField is tapped — then the keyboard slides up, the available height shrinks, and your Column overflows. The fix is to make the content scrollable so it can move above the keyboard.
The Error
A RenderFlex overflowed by 120 pixels on the bottom. (only when the keyboard is open)
Fix: Make the Body Scrollable
Scaffold(
body: SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(children: formFields),
),
)When the keyboard appears, the scroll view simply lets the user scroll to the focused field instead of overflowing.
Bonus: Auto-Scroll to the Focused Field
Wrapping your form in a Form and using Scrollable.ensureVisible (or the flutter_keyboard_visibility package) scrolls the active TextField into view automatically for a polished feel.
Don't Disable It Globally
Setting resizeToAvoidBottomInset: false hides the overflow but also hides the field behind the keyboard. Prefer a scroll view so the user can still see what they type.