Read on…

Or wait… if you hate reading, check out these two videos that quickly summarizes the ideas in this article:

What? You’re still here? Well in that case:

What’s a Sliver and Why do I want it?

Around the web I see a lot of FOS. That’s Fear Of Slivers for those not In The Know. But a sliver is just a portion of a scrollable area. That’s it! Under the covers, 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.

You might want this additional control in scrolling behavior if you:

Want an app bar with nonstandard behavior (disappearing as you scroll, changing size or color as you scroll, etc).

Need to scroll a list of items and a grid of items all together as one unit. (Yes, you can do this with a table in a ListView but that is much less efficient, particularly if you have a large table.)

Do something weird like a collapsing list with headers (see gif on the right at the top of this page).

Scenario where you might want to use slivers: scrolling a list of items and a grid of items all together as one unit.

How do I use it?

All of these sliver components go inside a CustomScrollView. The rest is up to you for how to combine your list of slivers to make your custom scrollable area. You can reinvent a ListView by putting a SliverList inside a CustomScrollView and set nothing else.

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.

// Explicit list of children. No efficiency savings here since the

// children are already constructed. SliverList(

delegate: SliverChildListDelegate(

[

Container(color: Colors.red, height: 150.0),

Container(color: Colors.purple, height: 150.0),

Container(color: Colors.green, height: 150.0),

],

),

); // This builds an infinite scrollable list of differently colored

// Containers. SliverList(

delegate: SliverChildBuilderDelegate((BuildContext context, int index) {

// To convert this infinite list to a list with three items,

// uncomment the following line:

// if (index > 3) return null;

return Container(color: getRandomColor(), height: 150.0);

},

// Or, uncomment the following line:

// childCount: 3,

),

);

SliverGrid

SliverGrids also can specify children with a delegate, or an explicit list, just like SliverList. But there’s some additional formatting for the cross-axis dimension on a grid. There are three ways to specify how you want your grid layout:

Count constructor to count how many items are, in this case, in the horizontal axis: SliverGrid.count(children: scrollItems, crossAxisCount: 4) Extent constructor to specify the maximum width of items to determine how many should fit across a grid. This is most useful if the items in your grid vary in size, you can limit how large a space they should take up (in this case, horizontally). SliverGrid.extent(children: scrollItems, maxCrossAxisExtent: 90.0) // 90 logical pixels Default constructor, passing in an explicit gridDelegate parameter: