Widget TreeEasy20 XP2 min read
What is the difference between IndexedStack and PageView?
TL;DR: IndexedStack keeps all children in the tree (preserving their state) and shows only one at a time. PageView lazily builds children on demand and supports swipe navigation.
Full Answer
| Aspect | IndexedStack | PageView |
|---|---|---|
| Children built | All at once | Lazily (with cache extent) |
| State preservation | Always — all children stay mounted | Depends on keepAlive mixin |
| Swipe navigation | No | Yes — built-in PageController |
| Memory | Higher — all trees live simultaneously | Lower — unmounts distant pages |
| Use case | Bottom nav tabs with preserved scroll | Onboarding flows, image galleries |
🎯
Use AutomaticKeepAliveClientMixin on PageView page States to preserve them when swiped out of view — equivalent to IndexedStack's always-alive behavior but with lazy initial build.
Code Examples
dartIndexedStack for bottom navigation
Output
Three tabs; switching preserves scroll position and state of each tab since all are always mounted
Common Mistakes
- ✗Using IndexedStack with many heavy tabs — all tabs are built and live in memory simultaneously
- ✗Expecting PageView to preserve state without AutomaticKeepAliveClientMixin
Interview Tip
💡
The IndexedStack + BottomNavigationBar pattern is so common in production apps that demonstrating it fluently shows real-world Flutter experience.
#IndexedStack#PageView#tabs#navigation#state-preservation