Slivers (SliverList, SliverGrid, SliverAppBar) in Flutter

Introduction

Slivers help you create smooth scrolling effects with flexible layouts in Flutter. They let you build lists, grids, and app bars that can change size or behavior as you scroll.

When you want a list that scrolls with a header that shrinks or expands.

When you want to show items in a grid that scrolls smoothly.

When you want a custom app bar that changes size or sticks at the top while scrolling.

When you want to combine different scrolling effects in one screen.

When you want better performance for large scrollable areas by loading items lazily.

Syntax

Flutter

class MySliverWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverAppBar(
          title: Text('Title'),
          expandedHeight: 200,
          flexibleSpace: FlexibleSpaceBar(
            background: Image.asset('path/to/image.jpg', fit: BoxFit.cover),
          ),
          pinned: true,
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, index) => ListTile(title: Text('Item $index')),
            childCount: 10,
          ),
        ),
        SliverGrid(
          delegate: SliverChildBuilderDelegate(
            (context, index) => Container(color: Colors.blue, child: Center(child: Text('Grid $index'))),
            childCount: 6,
          ),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
        ),
      ],
    );
  }
}

SliverAppBar creates a flexible app bar that can expand and collapse.

SliverList builds a scrollable list of widgets lazily.

SliverGrid builds a scrollable grid of widgets lazily.

Examples

This creates an app bar that stays visible (pinned) and expands with an image background.

Flutter

SliverAppBar(
  title: Text('My AppBar'),
  pinned: true,
  expandedHeight: 150,
  flexibleSpace: FlexibleSpaceBar(
    background: Image.network('https://example.com/image.jpg', fit: BoxFit.cover),
  ),
)

This shows an empty list because childCount is zero (edge case: empty list).

Flutter

SliverList(
  delegate: SliverChildBuilderDelegate(
    (context, index) => ListTile(title: Text('Item $index')),
    childCount: 0,
  ),
)

This shows a grid with only one item (edge case: single element grid).

Flutter

SliverGrid(
  delegate: SliverChildBuilderDelegate(
    (context, index) => Container(color: Colors.red, child: Text('Grid $index')),
    childCount: 1,
  ),
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 1),
)

This shows a list with only one item at the start (edge case: single element list).

Flutter

SliverList(
  delegate: SliverChildBuilderDelegate(
    (context, index) => ListTile(title: Text('First Item')), 
    childCount: 1,
  ),
)

Sample App

This app shows a scrollable screen with a flexible app bar at the top. The app bar has a Flutter logo that expands and shrinks as you scroll. Below it is a list of 5 items, followed by a grid of 4 colored items arranged in 2 columns.

Flutter

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          slivers: [
            SliverAppBar(
              title: const Text('Sliver Demo'),
              expandedHeight: 150,
              flexibleSpace: const FlexibleSpaceBar(
                background: FlutterLogo(size: 200),
              ),
              pinned: true,
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) => ListTile(title: Text('List Item $index')),
                childCount: 5,
              ),
            ),
            SliverGrid(
              delegate: SliverChildBuilderDelegate(
                (context, index) => Container(
                  color: index.isEven ? Colors.blue : Colors.green,
                  child: Center(child: Text('Grid Item $index', style: const TextStyle(color: Colors.white))),
                ),
                childCount: 4,
              ),
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
            ),
          ],
        ),
      ),
    );
  }
}

Important Notes

Time complexity: Slivers load items lazily, so scrolling is efficient even with many items.

Space complexity: Only visible items are kept in memory, saving space.

Common mistake: Forgetting to use CustomScrollView to hold slivers causes errors.

Use SliverList for vertical lists and SliverGrid for grids inside scroll views.

SliverAppBar is great for flexible headers that react to scrolling.

Summary

Slivers let you build scrollable areas with flexible headers, lists, and grids.

Use SliverAppBar for a header that expands and pins on scroll.

Use SliverList and SliverGrid to build lazy-loading lists and grids inside CustomScrollView.