CustomScrollView in Flutter

Introduction

CustomScrollView lets you create a scrollable area with different types of scrollable widgets combined. It helps you build flexible scrolling screens.

When you want to mix different scrollable widgets like lists and grids in one scroll view.

When you want to add headers or footers that scroll with the content.

When you want to create a complex scrolling effect with multiple sections.

When you want to control the scroll behavior of multiple widgets together.

Syntax

Flutter

CustomScrollView(
  slivers: [
    // List of sliver widgets like SliverAppBar, SliverList, SliverGrid
  ],
)

The slivers property takes a list of sliver widgets that define the scrollable content.

Slivers are special widgets that work inside CustomScrollView to create scroll effects.

Examples

A simple CustomScrollView with a list of two text items.

Flutter

CustomScrollView(
  slivers: [
    SliverList(
      delegate: SliverChildListDelegate([
        Text('Item 1'),
        Text('Item 2'),
      ]),
    ),
  ],
)

CustomScrollView with a scrollable header and a list of 5 items.

Flutter

CustomScrollView(
  slivers: [
    SliverAppBar(
      expandedHeight: 150,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('Header'),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text('Item $index')),
        childCount: 5,
      ),
    ),
  ],
)

Sample App

This app shows a scrollable screen with a header that stays pinned at the top and a list of 10 items below it. You can scroll the list, and the header stays visible.

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(
              pinned: true,
              expandedHeight: 100,
              flexibleSpace: const FlexibleSpaceBar(
                title: Text('My Scroll View'),
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) => ListTile(
                  title: Text('List Item $index'),
                ),
                childCount: 10,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Important Notes

SliverAppBar can be pinned, floating, or snap to control how it behaves when scrolling.

Use SliverChildBuilderDelegate for large or infinite lists to build items on demand.

CustomScrollView requires all children to be slivers, so normal widgets must be wrapped in sliver adapters if needed.

Summary

CustomScrollView combines multiple scrollable widgets called slivers into one scrollable area.

It is useful for creating complex scrolling screens with headers, lists, and grids.

Slivers control how each part scrolls and appears on the screen.