Using Slivers for Custom Scroll Effects in Flutter

Introduction

Flutter’s slivers provide granular control over scrollable areas, enabling custom scroll effects that go beyond standard ListView or GridView implementations. With slivers, you can build collapsing toolbars, parallax backgrounds, staggered headers, and more. This tutorial covers intermediate concepts of using slivers, SliverAppBar customizations, SliverList/SliverGrid, and advanced techniques like persistent headers and parallax effects.

Using CustomScrollView and Basic Sliver Widgets

At the core of any sliver-based layout is CustomScrollView. It composes multiple sliver widgets into a single scrollable area. Two fundamental slivers are SliverList and SliverGrid.

import 'package:flutter/material.dart';

class BasicSliverExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            title: Text('Basic Sliver Demo'),
            expandedHeight: 200,
            flexibleSpace: FlexibleSpaceBar(
              background: Image.asset('assets/header.jpg', fit: BoxFit.cover),
            ),
            pinned: true,
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => ListTile(title: Text('Item #$index')),
              childCount: 20,
            ),
          ),
        ],
      ),
    );
  }
}

Key points:

• CustomScrollView takes a list of slivers.

• SliverAppBar provides collapsible app bar behavior.

• SliverList builds list items lazily.

Implementing a Dynamic SliverAppBar

Custom scroll effects often start with an animated SliverAppBar. You can stretch, float, and snap the app bar for a smooth user experience.

SliverAppBar(
  title: Text('Dynamic AppBar'),
  floating: true,          // Appears when user scrolls up
  snap: true,              // Snaps into view
  stretch: true,           // Enables stretch behavior
  expandedHeight: 250,
  flexibleSpace: FlexibleSpaceBar(
    background: Image.network(
      'https://placekitten.com/800/400',
      fit: BoxFit.cover,
    ),
    stretchModes: [
      StretchMode.zoomBackground,
      StretchMode.fadeTitle,
    ],
  ),
),

Properties to explore:

• floating: toggles the app bar’s emergence when scrolling up.

• snap: combines with floating to snap into place.

• stretch & stretchModes: allow zoom, blur, or fade effects on over-scroll.

• pinned: keeps the app bar visible when collapsed.

Advanced Slivers: Grids, Persistent Headers, and Parallax

Beyond lists, slivers support grids and persistent headers. Combine sliver widgets for complex layouts:

• SliverGrid: create masonry or fixed-count grids.

• SliverPersistentHeader: define pinned or floating headers with custom min/max heights.

• Parallax effect: implement with a custom SliverPersistentHeaderDelegate.

Example of a SliverGrid and a pinned header delegate:

SliverPersistentHeader(
  pinned: true,
  delegate: MyHeaderDelegate(minExtent: 60, maxExtent: 120),
),
SliverGrid(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    mainAxisSpacing: 8,
    crossAxisSpacing: 8,
    childAspectRatio: 4/3,
  ),
  delegate: SliverChildBuilderDelegate(
    (context, index) => Card(child: Center(child: Text('Grid #$index'))),
    childCount: 10,
  ),
),

And a simplified delegate for parallax/fade:

class MyHeaderDelegate extends SliverPersistentHeaderDelegate {
  final double minExtent, maxExtent;
  MyHeaderDelegate({required this.minExtent, required this.maxExtent});

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlaps) {
    final double progress = shrinkOffset / (maxExtent - minExtent);
    return Stack(
      fit: StackFit.expand,
      children: [
        Opacity(
          opacity: 1 - progress,
          child: Image.asset('assets/parallax.jpg', fit: BoxFit.cover),
        ),
        Center(child: Text('Parallax Header', style: TextStyle(fontSize: 20))),
      ],
    );
  }

  @override
  bool shouldRebuild(covariant MyHeaderDelegate old) =>
      old.maxExtent != maxExtent || old.minExtent != minExtent;
}

Combine these slivers in CustomScrollView to achieve:

• Pinned headers that shrink

• Grids with custom spacing

• Parallax backgrounds that fade out on scroll

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

Slivers unlock Flutter’s most flexible scrolling and layout patterns. Starting with CustomScrollView, you can layer SliverAppBar, SliverList, SliverGrid, and SliverPersistentHeader to craft unique scroll effects. Experiment with floating, snapping, stretching, and custom delegates for parallax or fade transitions. Mastering slivers elevates your UI from standard lists to highly interactive, blazing-fast scroll experiences.