How to Use Slivers in Flutter: Syntax and Examples

In Flutter, slivers are special scrollable areas that let you create custom scrolling effects and layouts by combining widgets like SliverAppBar and SliverList. You use them inside a CustomScrollView to build flexible, performant scrollable interfaces.

Syntax

Slivers are widgets that can be combined inside a CustomScrollView. Common slivers include:

• SliverAppBar: A scrollable app bar that can expand or collapse.
• SliverList: A scrollable list of items.
• SliverGrid: A scrollable grid layout.

Each sliver defines a part of the scrollable area. You place them as children of CustomScrollView.

dart

CustomScrollView(
  slivers: [
    SliverAppBar(
      expandedHeight: 200.0,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('Sliver Example'),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text('Item $index')),
        childCount: 10,
      ),
    ),
  ],
)

Output

A scrollable screen with an expanding app bar and a list of 10 items below it.

Example

This example shows a CustomScrollView with a SliverAppBar that expands and collapses, and a SliverList displaying 20 list items. It demonstrates how slivers create flexible scroll effects.

dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          slivers: [
            SliverAppBar(
              expandedHeight: 150.0,
              floating: true,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('Slivers in Flutter'),
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) => ListTile(title: Text('List Item $index')),
                childCount: 20,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Output

A screen with a top app bar that expands when pulled down and a scrollable list of 20 items below it.

Common Pitfalls

Common mistakes when using slivers include:

• Not using CustomScrollView as the parent widget, which is required to host slivers.
• Using regular widgets like ListView inside slivers instead of sliver widgets like SliverList.
• Forgetting to provide a delegate to SliverList or SliverGrid.

Always ensure slivers are children of CustomScrollView and use sliver-specific widgets for scrollable content.

dart

/* Wrong: Using ListView inside CustomScrollView slivers */
CustomScrollView(
  slivers: [
    ListView(), // This will cause an error
  ],
)

/* Right: Use SliverList instead */
CustomScrollView(
  slivers: [
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => Text('Item $index'),
        childCount: 5,
      ),
    ),
  ],
)

Quick Reference

Here is a quick summary of common sliver widgets:

Sliver Widget	Purpose
SliverAppBar	Expandable and collapsible app bar
SliverList	Scrollable list of widgets
SliverGrid	Scrollable grid layout
SliverFillRemaining	Fills remaining space in viewport
SliverPadding	Adds padding around slivers

Key Takeaways

Use slivers inside a CustomScrollView to create flexible scrollable layouts.

SliverAppBar and SliverList are common slivers for app bars and lists.

Always use sliver-specific widgets; regular scrollable widgets won't work inside slivers.

Provide delegates like SliverChildBuilderDelegate to SliverList for dynamic content.

Slivers enable smooth, performant scrolling with custom effects.