If you’ve ever built a form inside a bottom sheet in Flutter, you’ve probably run into this issue:
👉 When the keyboard opens, the bottom part of your sheet gets covered, making input fields hard (or impossible) to access.
🚨 The Problem
By default, a bottom sheet doesn’t automatically adjust its layout when the keyboard appears. This often results in:
- Hidden input fields
- Poor user experience
- Frustrating form interactions
✅ A Cleaner Solution: Use Padding
Instead of adding a SizedBox at the bottom, a more elegant and maintainable approach is to wrap your content with dynamic bottom padding:
Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextField(),
TextField(),
],
),
)
🧠 Why This Works Better
MediaQuery.of(context).viewInsets.bottom gives you the exact height of the keyboard.
Using it as padding means:
- The entire content shifts up naturally
- No need for extra spacer widgets
- Layout stays cleaner and more readable
Compared to SizedBox, this approach is more declarative — you’re directly telling Flutter how the layout should adapt.
🧩 Full Example
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (context) {
return Padding(
padding: EdgeInsets.only(
left: 16,
right: 16,
top: 16,
bottom: MediaQuery.of(context).viewInsets.bottom,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextField(),
TextField(),
],
),
);
},
);
⚠️ Pro Tips
- Always set
isScrollControlled: true - Use
SingleChildScrollViewif your form can overflow - Combine with
SafeAreafor better device compatibility
🎯 Result
Your bottom sheet will smoothly move above the keyboard, keeping all inputs visible and accessible.
Sometimes the best solutions aren’t more code — just better structure. 🚀