How does NestedScrollView work and when do you need it?
TL;DR: NestedScrollView coordinates scrolling between an outer scrollable (e.g., SliverAppBar) and inner scrollables (e.g., tab content ListViews), enabling a collapsible header above tabbed content.
Full Answer
The classic pattern: a collapsing app bar above a TabBarView where each tab has its own ListView. Without NestedScrollView, the inner ListViews scroll independently, ignoring the outer header.
NestedScrollView provides two contexts: the outer scroll (SliverAppBar) and the inner scroll (tab body). It synchronizes them so the header collapses as the user scrolls any tab.
- ▸headerSliverBuilder — builds the outer slivers (SliverAppBar, SliverPersistentHeader)
- ▸body — the inner scrollable (usually TabBarView)
- ▸Each inner ListView needs PageStorageKey to preserve scroll position per tab
- ▸NestedScrollView.sliverOverlapAbsorberHandleFor() for correct overlap handling
Wrap each tab body in a SafeArea and use SliverOverlapInjector to account for the overlapping SliverAppBar. Without it, the first few items of each tab are hidden behind the app bar.
Code Examples
Collapsible profile header with pinned TabBar; scrolling either tab collapses the header
Common Mistakes
- ✗Using a regular Scaffold + TabBarView without NestedScrollView — header won't respond to tab scrolling
- ✗Forgetting PageStorageKey on inner ListViews — scroll position resets on tab switch
Interview Tip
This is a very common production pattern (social profiles, news apps). Walking through it confidently signals real app-building experience.