What are Slivers in Flutter and when should you use them?
TL;DR: Slivers are scrollable areas with a custom scroll effect protocol. They allow fine-grained control over scroll behavior — composing collapsible app bars, lazy lists, and grids inside a single CustomScrollView.
Full Answer
Regular scrollable widgets (ListView, GridView) are convenience wrappers. Under the hood, Flutter uses Slivers — a lower-level protocol for scrollable content.
Common Slivers
- ▸SliverAppBar — collapsible/expandable app bar with parallax
- ▸SliverList — lazy-loading list of items
- ▸SliverGrid — lazy-loading grid
- ▸SliverToBoxAdapter — wraps any non-sliver widget
- ▸SliverPersistentHeader — sticky headers
- ▸SliverFillRemaining — fills remaining viewport space
All slivers live inside a CustomScrollView. They communicate scroll extent and geometry via SliverConstraints and SliverGeometry.
Use SliverToBoxAdapter with caution inside a long list — it wraps a fixed-size widget. Wrap expensive non-sliver widgets only when necessary.
Code Examples
Scrollable view with a pinned, collapsible app bar followed by a lazily-built list of 100 items
Common Mistakes
- ✗Placing a ListView inside a CustomScrollView — use SliverList instead
- ✗Forgetting SliverToBoxAdapter when mixing regular widgets with slivers
Interview Tip
Mention that Flutter's own Scaffold uses SliverAppBar internally, and that NestedScrollView combines two CustomScrollViews for tab-bar patterns.