Flutter SliverList – Tutorial and Example (2021)

Last updated on April 2, 2021 A Goodman Loading... Post a comment

In this article, we will have a look at the SliverList widget and go over a complete example of using it in a Flutter application.

What are Slivers in Flutter?

According to the Cambridge dictionary, a sliver is a very small, thin piece of something, usually broken off something larger.

In Flutter, slivers (not silver) are nothing but parts of a scrollable area. Using sliver stuff helps us create many fancy scrolling effects and can make the scrolling process through a large number of children more efficient due to the ability to lazily build each item when it scrolls into view.

SliverList Overview

SliverList need 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

SliverChildListDelegate constructors:

SliverChildListDelegate(
  List<Widget> children, 
  {
    bool addAutomaticKeepAlives: true, 
    bool addRepaintBoundaries: true, 
    bool addSemanticIndexes: true, 
    SemanticIndexCallback semanticIndexCallback: _kDefaultSemanticIndexCallback, 
    int semanticIndexOffset: 0
  }
)

SliverChildBuilderDelegate constructor:

SliverChildBuilderDelegate(
  IndexedWidgetBuilder builder, 
  {
    ChildIndexGetter findChildIndexCallback, 
    int childCount, 
    bool addAutomaticKeepAlives: true, 
    bool addRepaintBoundaries: true, 
    bool addSemanticIndexes: true, 
    SemanticIndexCallback semanticIndexCallback: _kDefaultSemanticIndexCallback, 
    int semanticIndexOffset: 0
  }
)

You can also check the official docs for more information. If you get bored with the tedious words and just want to dive into the code then move to the next section.

The Complete Example

Preview

This example contains a sliver list and 2 sliver app bars. These bars will disappear when you scroll the screen down. The second bar will reappear right as you scroll up but the first one will only show up when you scroll to the top.

The Code

Here’s the full code in main.dart:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: CustomScrollView(
      slivers: [
        SliverAppBar(
          backgroundColor: Colors.amber,
          title: Text('Kindacode.com'),
          expandedHeight: 30,
          collapsedHeight: 150,
        ),
        SliverAppBar(
          backgroundColor: Colors.green,
          title: Text('Have a nice day'),
          floating: true,
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              return Card(
                margin: EdgeInsets.all(15),
                child: Container(
                  color: Colors.blue[100 * (index % 9 + 1)],
                  height: 80,
                  alignment: Alignment.center,
                  child: Text(
                    "Item $index",
                    style: TextStyle(fontSize: 30),
                  ),
                ),
              );
            },
            childCount: 1000, // 1000 list items
          ),
        ),
      ],
    ));
  }
}

Wrap Up

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: Example of CupertinoSliverNavigationBar in FlutterGuide to InteractiveViewer in FlutterHow to implement Pull-to-Refresh in FlutterExamples of using Future, async, await in FlutterHow to implement FutureBuilder in Flutter.

To find the latest stuff, check out our Flutter category page and Dart category page. Enjoy.

Related Articles

guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x