Slivers in Flutter (CustomScrollView)

How to do fancy scrolling techniques in your mobile app with Flutter?

Hello, fearless Flutter fans! Today we’re going to talk about CustomScrollView.

All of the scrollable views you use, like ListView and GridView, are actually implemented using Slivers. You can kind of think of Slivers as a lower-level interface, providing finer-grained control on implementing scrollable area. Because slivers can lazily build each item just as it scrolls into view, slivers are particularly useful for efficiently scrolling through large numbers of children.

In Flutter, CustomScrollView is a powerful widget that allows you to create complex scrolling effects by combining various slivers. Slivers are scrollable areas that can change their behavior based on the scroll position.

Here’s a basic example of how to implement CustomScrollView in Flutter:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('CustomScrollView Example'),
        ),
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              expandedHeight: 200.0,
              floating: false,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('CustomScrollView Example'),
                background: Image.network(
                  'https://example.com/your_image.jpg',
                  fit: BoxFit.cover,
                ),
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return ListTile(
                    title: Text('Item $index'),
                  );
                },
                childCount: 50,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

In this example:

1. The SliverAppBar is used to create an app bar with an image that expands and shrinks as you scroll. The pinned property makes the app bar stick to the top when you scroll down.
2. The SliverList is used to create a scrollable list of items.

This is a simple example, and CustomScrollView can be customized in various ways by combining different types of slivers such as SliverGrid, SliverToBoxAdapter, etc.

SliverList

SliverList takes a delegate parameter which provides the items in the list as they scroll into view. You can specify the actual list of children with a SliverChildListDelegate Or build them lazily with a SliverChildBuilderDelegate.

SliverList needs to be implemented inside a silver group and a CustomScrollView, like this:

CustomScrollView(
      slivers: [
        SliverList(
         /** */
        ), 

        // other sliver widgets  
      ],
)

Here’s the SliverList constructor:

SliverList({
  Key key, 
  @required SliverChildDelegate delegate
})

We won’t care about the key parameter and only focus on the delegate parameter. This one provides the items into the list when they scroll into view. You can construct it with one of the following that are subclasses of SliverChildDelegate:

• SliverChildListDelegate: Supplies children for slivers using a widget list.
• SliverChildBuilderDelegate: Build the list lazily, suitable for a list with a tremendous number of items.

Conclusion:

At this point, you should have a better understanding of the SliverList widget and feel a little bit more comfortable when working with it. You can continue learning about Flutter by reading the following articles:

Clap 👏 If this article helps you.

See you all again soon!