What are Slivers?

Overview

Slivers are special scrollable components in Flutter that can be combined inside a

CustomScrollView

The word "sliver" literally means "a thin piece" — each sliver is a piece of the scrollable area.

Why Slivers?

Normal scrolling with

ListView

• Combine multiple scrollable sections
• Create collapsible app bars
• Create sticky headers
• Mix grids and lists in one scroll view

CustomScrollView + Slivers

dartCopy
CustomScrollView(
  slivers: [
    // Collapsing app bar
    SliverAppBar(
      title: Text('My App'),
      expandedHeight: 200,
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(
        background: Image.network(url, fit: BoxFit.cover),
      ),
    ),

    // Grid section
    SliverGrid(
      delegate: SliverChildBuilderDelegate(
        (context, index) => Card(child: Center(child: Text('Grid $index'))),
        childCount: 6,
      ),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
    ),

    // List section
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text('List Item $index')),
        childCount: 20,
      ),
    ),
  ],
)

Common Sliver Widgets

SliverAppBar

SliverList

SliverGrid

SliverPersistentHeader

SliverToBoxAdapter

SliverFillRemaining

SliverPadding

SliverFixedExtentList

SliverAnimatedList

SliverToBoxAdapter (Wrap Any Widget)

dartCopy
CustomScrollView(
  slivers: [
    SliverAppBar(title: Text('App')),
    SliverToBoxAdapter(
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Text('Featured Section', style: TextStyle(fontSize: 20)),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text('Item $index')),
        childCount: 10,
      ),
    ),
    SliverFillRemaining(
      child: Center(child: Text('End of list')),
    ),
  ],
)

Normal Widgets vs Sliver Equivalents

ListView

SliverList

GridView

SliverGrid

AppBar

SliverAppBar

SliverToBoxAdapter

Key Rule: Slivers only work inside

textCopy

CustomScrollView

. Outside of it, use normal widgets. Slivers are powerful but have more complexity — use them only when you need coordinated scrolling effects.