Flutter IndexedStack vs. PageView: Pick the Right Widget Fast

Which widget keeps your screens smooth and state intact? Learn how Flutter’s IndexedStack and PageView handle navigation, memory, and user state—so you can pick the right one for your app without second-guessing.

Are your Flutter tabs resetting scroll position every time a user switches between them? As apps grow with more screens and logic, keeping navigation smooth without losing state becomes harder.

What happens when you choose the wrong navigation widget?

Users expect quick transitions, remembered inputs, and uninterrupted scrolling. However, using the wrong option can lead to wasted memory or screen rebuilds that break the experience. The problem gets worse with complex flows.

That’s why comparing Flutter IndexedStack vs PageView is so important.

This article explains how each handles scroll position, memory, and rebuilds. It will help you pick the right one for your app’s navigation.

Key Takeaways

• IndexedStack keeps all child widgets alive, which is ideal for preserving state across navigation bar pages.

• PageView provides scrollable transitions with lazy loading and optional state preservation via mixins.

• Choose IndexedStack for quick tab switching, PageView for swiping or dynamic content loading.

• Use AutomaticKeepAliveClientMixin to preserve scroll position in PageView.

• Combine both for custom tab pages and complex bottom navigation bar page layouts.

Understanding the Widgets: IndexedStack vs PageView

Let’s begin by comparing how these two widgets work fundamentally.

IndexedStack: Ideal for Persistent Navigation

The IndexedStack widget shows one child from a list, based on the active index. Unlike a typical Stack, the indexed stack turns into a tab manager by keeping each child widget alive in memory.

Copy
1
2
3
4
5
6
7
8
IndexedStack(
  index: _selectedIndex,
  children: [
    HomePage(),
    SearchPage(),
    ProfilePage(),
  ],
)

This approach ensures:

• The scroll position and state of tab pages remain untouched.

• ListView displaying content doesn’t reset when switching tabs.

• Works great with bottom tabs via a bottom navigation bar.

However, every child is built up front—even unused ones. If all the tabs are heavy, this can lead to longer startup times or memory pressure.

Use Case: A shopping app with a bottom navigation bar page of 3 sections (Home, Orders, Profile). Users expect instant transitions, and each screen should preserve scroll position.

PageView: Perfect for Swipeable, Lazy-Loaded Pages

PageView is like a horizontally scrollable ListView, allowing users to swipe across pages. Unlike IndexedStack, it:

• Builds only the first time you swipe to a page (with PageView.builder)

• Supports gestures and animations out of the box

• Requires setup to preserve the state (like AutomaticKeepAliveClientMixin)

Copy
1
2
3
4
5
6
7
8
PageView(
  controller: _controller,
  children: [
    HomePage(),
    SearchPage(),
    ProfilePage(),
  ],
)

To preserve scroll position in PageView:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class MyTabPage extends StatefulWidget {
  @override
  _MyTabPageState createState() => _MyTabPageState();
}

class _MyTabPageState extends State<MyTabPage>
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return ListView.builder(...); // Example scrollable list
  }
}

This approach is scalable, making it suitable for:

• Scrollable list UIs like carousels or onboarding

• Tabbar widgets with tab pages that change via swipe

• A bottom navigation bar that should delay building screens

Pro Tip: Disable user swiping (NeverScrollableScrollPhysics) to simulate IndexedStack behavior.

IndexedStack vs PageView: Key Differences in Use Cases

Here’s a quick snapshot of real-world patterns:

Bottom Navigation Tabs

State Flow Between Tabs

This diagram illustrates tab switching with both approaches. IndexedStack keeps state, while PageView requires keep-alive mixins to behave similarly.

Top App Bar Tabs (Swipe Navigation)

• Use PageView via TabBarView – users expect swiping

• IndexedStack is overkill unless swipe is disabled

Scrollable Content (List, Feeds)

• Need to preserve scroll position?

  ◦ Use IndexedStack (default behavior)

  ◦ Or PageView + AutomaticKeepAliveClientMixin

Avoid Pitfall: Using PageView without preserving state causes list scrolls to reset.

Code Comparison: IndexedStack vs PageView

IndexedStack Example

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class MainScreen extends StatelessWidget {
  final int index;
  MainScreen(this.index);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: index,
        children: [
          HomePage(),
          SearchPage(),
          ProfilePage(),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(...),
    );
  }
}

PageView Example

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
class PageViewScreen extends StatefulWidget {
  @override
  _PageViewScreenState createState() => _PageViewScreenState();
}

class _PageViewScreenState extends State<PageViewScreen> {
  PageController _controller = PageController();

  @override
  void dispose() {
    _controller.dispose(); // Dispose to avoid leaks
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _controller,
        physics: NeverScrollableScrollPhysics(), // Optional
        children: [
          HomePage(),
          SearchPage(),
          ProfilePage(),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(...),
    );
  }
}

Both examples represent a simple scaffold with three bottom tab pages.

When to Choose What?

✅ Use IndexedStack when:

• You need all the TabBar child widgets ready instantly

• You want to preserve the scroll position without extra code

• The number of bottom tabs is small (3–5)

• You’re building a basic Flutter app or a simple navigation bar

✅ Use PageView when:

• You want swipe gestures and animations

• Pages are scrollable list views or loaded lazily

• You’re optimizing performance for large navigation bar sets

• You need to change pages via a controller programmatically

Best Practices and Gotchas

Make the Right Choice for a Better Flutter Experience

Your choice between IndexedStack and PageView shapes how your app handles scroll position, memory, and tab-switching speed. IndexedStack works best for simple tabs where preserving state matters most. For swipe gestures, lazy loading, and scalable pages, PageView delivers more control and flexibility.

Flutter apps need fast and responsive navigation to meet user expectations. By mastering Flutter IndexedStack vs. PageView, you’ll build smoother flows and better user experiences. Pick the widget that fits your app and start building with clarity.