NavigationEasy20 XP3 min read
What are the common tab navigation patterns in Flutter?
TL;DR: Flutter offers BottomNavigationBar/NavigationBar (mobile bottom), NavigationRail (tablet side), TabBar (top/horizontal), and Drawer/NavigationDrawer (hamburger menu) — choose based on destination count and device form factor.
Full Answer
| Aspect | Widget | Best Use Case |
|---|---|---|
| BottomNavigationBar | 3-5 primary destinations on mobile | Legacy Material 2 style |
| NavigationBar | 3-5 destinations, Material 3 | Preferred for new apps |
| NavigationRail | Tablet/desktop side navigation | Compact, icon+label |
| NavigationDrawer | 5+ destinations, desktop/tablet | Expandable, icon+text |
| TabBar | Content-level category tabs | Inside a screen, not top-level |
🎯
Use adaptive navigation patterns: show BottomNavigationBar on small screens, NavigationRail on medium, and NavigationDrawer on large — for a responsive app.
Code Examples
dartAdaptive navigation by screen size
Output
Mobile: BottomNavigationBar. Tablet (≥600px): NavigationRail on left. Desktop (≥1200px): NavigationDrawer on left.
Common Mistakes
- ✗Using BottomNavigationBar on tablet — too small touch targets, wastes horizontal space
- ✗Using TabBar for top-level navigation — semantically wrong; use BottomNavigationBar instead
Interview Tip
💡
Adaptive navigation (responsive to screen size) is a key differentiator. Even mentioning the breakpoints (600/1200) shows Material Design knowledge.
#TabBar#BottomNavigationBar#NavigationBar#NavigationRail#DrawerMenu