NavigationBeginner10 XP2 min read
When do you use a modal bottom sheet vs a dialog in Flutter?
TL;DR: Dialogs interrupt the user with important decisions or alerts. Bottom sheets show contextual actions or additional content in a mobile-friendly, swipeable panel from the bottom.
Full Answer
| Aspect | Dialog | Modal Bottom Sheet |
|---|---|---|
| Position | Center of screen | Slides up from bottom |
| Use case | Confirmations, alerts, critical actions | Options, filters, content pickers |
| Dismissal | Tap outside or button | Swipe down, drag, or tap outside |
| Content height | Fixed dialog size | Flexible — can be full screen |
| Material spec | AlertDialog, SimpleDialog | showModalBottomSheet, DraggableScrollableSheet |
🎯
For complex bottom sheets (tabs, scroll), use DraggableScrollableSheet inside showModalBottomSheet for a collapsible, scrollable pattern.
Code Examples
dartshowModalBottomSheet usage
Output
Rounded bottom sheet slides up with Share/Edit/Delete options; draggable to full screen
Common Mistakes
- ✗Using AlertDialog for content-heavy actions — use bottom sheet for better mobile UX
- ✗Not passing isScrollControlled: true for tall content — bottom sheet caps at 50% screen height by default
Interview Tip
💡
Mentioning the isScrollControlled and DraggableScrollableSheet combo shows you build production-quality UIs, not just basic examples.
#bottom-sheet#dialog#showModalBottomSheet#showDialog#UX