Flutter Slivers

Creating advanced scrollable effects

📜 What are Slivers?

Slivers are scrollable areas in Flutter that can change appearance while scrolling. They enable advanced effects like collapsing headers, floating app bars, and custom scroll behaviors for beautiful, dynamic user interfaces. 


// Simple Sliver example
CustomScrollView(
  slivers: [
    SliverAppBar(title: Text('Header')),
    SliverList(delegate: SliverChildListDelegate([])),
  ],
)

Output:

Header
Scrollable content area

Key Sliver Concepts

📱

SliverAppBar

Collapsing app bar header 

SliverAppBar(
  expandedHeight: 200,
  floating: true,
)
📋

SliverList

Scrollable list of items 

SliverList(
  delegate: SliverChildBuilderDelegate(
    (context, index) => ListTile(),
  ),
)
🎨

SliverGrid

Scrollable grid layout 

SliverGrid(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
)
🔄

CustomScrollView

Container for slivers 

CustomScrollView(
  slivers: [
    // Add slivers here
  ],
)

🔹 Basic SliverAppBar

Create a collapsing app bar with SliverAppBar: 

import 'package:flutter/material.dart';

class SliverExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            expandedHeight: 200.0,
            floating: false,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('Sliver AppBar'),
              background: Image.network(
                'https://picsum.photos/400/200',
                fit: BoxFit.cover,
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => ListTile(
                title: Text('Item $index'),
              ),
              childCount: 20,
            ),
          ),
        ],
      ),
    );
  }
}

Output:

Sliver AppBar
Item 0
Item 1
Item 2
Item 3
Item 4

🔹 SliverList Example

Create a scrollable list using SliverList: 

CustomScrollView(
  slivers: [
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            height: 60,
            color: index.isOdd ? Colors.white : Colors.grey[200],
            child: Center(
              child: Text('Item $index'),
            ),
          );
        },
        childCount: 10,
      ),
    ),
  ],
)

Output:

Item 0
Item 1
Item 2
Item 3
Item 4

🔹 SliverGrid Example

Create a scrollable grid using SliverGrid: 

CustomScrollView(
  slivers: [
    SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
        childAspectRatio: 1.0,
      ),
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            color: Colors.primaries[index % Colors.primaries.length],
            child: Center(
              child: Text(
                'Grid $index',
                style: TextStyle(color: Colors.white),
              ),
            ),
          );
        },
        childCount: 12,
      ),
    ),
  ],
)

Output:

Grid 0
Grid 1
Grid 2
Grid 3
Grid 4
Grid 5

🔹 Floating SliverAppBar

Create a floating app bar that appears when scrolling up: 

CustomScrollView(
  slivers: [
    SliverAppBar(
      floating: true,
      snap: true,
      title: Text('Floating AppBar'),
      backgroundColor: Colors.teal,
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(
          leading: Icon(Icons.star),
          title: Text('Item $index'),
        ),
        childCount: 30,
      ),
    ),
  ],
)

Output:

Floating AppBar
⭐ Item 0
⭐ Item 1
⭐ Item 2
⭐ Item 3

🔹 Multiple Slivers Combined

Combine different sliver types in one scroll view: 

CustomScrollView(
  slivers: [
    SliverAppBar(
      title: Text('My App'),
      pinned: true,
    ),
    SliverToBoxAdapter(
      child: Container(
        height: 100,
        color: Colors.amber,
        child: Center(child: Text('Fixed Header')),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text('List Item $index')),
        childCount: 5,
      ),
    ),
  ],
)

Output:

My App
Fixed Header
List Item 0
List Item 1
List Item 2
List Item 3
List Item 4

🧠 Test Your Knowledge

What is the container widget for slivers?