skills/flutter/references/features-slivers.md

name	description
features-slivers	Flutter Sliver widgets - CustomScrollView, SliverList, SliverGrid, and advanced scrolling effects

Sliver Widgets

Sliver widgets provide advanced scrolling effects and custom scroll behaviors.

CustomScrollView

Create custom scroll effects with slivers.

CustomScrollView(
  slivers: [
    SliverAppBar(
      expandedHeight: 200,
      floating: false,
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('Title'),
        background: Image.network('url'),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return ListTile(title: Text('Item $index'));
        },
        childCount: 100,
      ),
    ),
  ],
)

SliverAppBar

App bar that responds to scrolling.

SliverAppBar(
  expandedHeight: 200,
  floating: true, // Appears when scrolling up
  pinned: true, // Stays at top when scrolling
  snap: true, // Snaps when floating
  flexibleSpace: FlexibleSpaceBar(
    title: Text('Title'),
    background: Image.network('url'),
  ),
)

SliverList

List of widgets in a sliver.

SliverList(
  delegate: SliverChildBuilderDelegate(
    (context, index) {
      return ListTile(title: Text('Item $index'));
    },
    childCount: 100,
  ),
)

// With separator
SliverList(
  delegate: SliverChildBuilderDelegate(
    (context, index) {
      return ListTile(title: Text('Item $index'));
    },
    childCount: 100,
  ),
)

SliverGrid

Grid of widgets in a sliver.

SliverGrid(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    crossAxisSpacing: 10,
    mainAxisSpacing: 10,
  ),
  delegate: SliverChildBuilderDelegate(
    (context, index) {
      return Container(color: Colors.blue);
    },
    childCount: 20,
  ),
)

SliverPadding

Add padding to slivers.

SliverPadding(
  padding: const EdgeInsets.all(16),
  sliver: SliverList(...),
)

SliverToBoxAdapter

Convert regular widget to sliver.

SliverToBoxAdapter(
  child: Container(
    height: 100,
    color: Colors.blue,
    child: Center(child: Text('Header')),
  ),
)

SliverPersistentHeader

Persistent header that changes size.

SliverPersistentHeader(
  pinned: true,
  delegate: _SliverHeaderDelegate(
    minHeight: 60,
    maxHeight: 200,
  ),
)

Complete Example

CustomScrollView(
  slivers: [
    SliverAppBar(
      expandedHeight: 200,
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('Title'),
        background: Image.network('url'),
      ),
    ),
    SliverToBoxAdapter(
      child: Container(
        padding: EdgeInsets.all(16),
        child: Text('Header content'),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return ListTile(title: Text('Item $index'));
        },
        childCount: 100,
      ),
    ),
  ],
)

Key Points

• Use CustomScrollView for custom scroll effects
• Use SliverAppBar for app bars that respond to scrolling
• Use SliverList for lists in slivers
• Use SliverGrid for grids in slivers
• Use SliverPadding to add padding
• Use SliverToBoxAdapter to convert widgets to slivers
• Slivers provide advanced scrolling effects
• Combine multiple slivers for complex layouts