What are Slivers in Flutter and when would you use CustomScrollView?
Short Answer
Slivers are scrollable areas that can be composed together inside a CustomScrollView, letting you mix different scroll behaviors — like a collapsing app bar, a grid, and a list — into one continuous scrollable, which a single ListView or GridView can't do.
A regular ListView or GridView owns its entire scrollable area — you can't easily mix a different kind of scrolling child (like a pinned header) inside it. CustomScrollView instead takes a list of slivers, each understanding how to lay itself out and paint within a shared scroll position: SliverAppBar (collapsing/pinned headers), SliverList, SliverGrid, SliverToBoxAdapter (wrapping a normal widget as a sliver).
This is the mechanism behind patterns like a large hero image that shrinks into a compact app bar as you scroll — SliverAppBar's flexibleSpace handles exactly that, something awkward or impossible to build cleanly with plain widgets and a single scroll controller.
Code Example
CustomScrollView(
slivers: [
SliverAppBar(
expandedHeight: 200,
flexibleSpace: FlexibleSpaceBar(title: Text('Profile')),
pinned: true,
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => ListTile(title: Text('Item \$index')),
childCount: 20,
),
),
],
)Common Mistakes
- ×Trying to nest a ListView inside a CustomScrollView without wrapping it appropriately, causing 'unbounded height' errors.
- ×Reaching for CustomScrollView when a single ListView with a header widget would do — it adds complexity only worth it for genuinely mixed scroll behavior.