Flutter development. Why do I use Slivers? Part 2

Greetings readers and Flutter fans. In the previous article, we talked about a highly specialized topic, more specifically, Slivers.

We started with one of the main types of slivers, the SliverAppBar. And we figured out how we can get the results we need to implement our own scrolling effects. In this and the following articles, we’re going to break down the following types of slivers and use them in different cases. And we will start with SliverList and SliverGrid.

As we already know, we can use ListView and GridView to refer to scrolling list or grid elements. However, if we use them to scroll together, we need to use SliverList and SliverGrid, and place them inside the same CustomScrollView. By the way, SliverList and SliverGrid interact, thanks to the delegate defined, which can be of two types. The first type is SliverChildListDelegate, which we use to determine a list of widgets. The second type, which will improve our performance if we have many items, is the SliverChildBuilderDelegate. Probably, as you have already guessed, SliverChildListDelegate is the equivalent of ListView, and SliverChildBuilderDelegate is ListView.builder.

So, in our case, we define a list of widgets that we want to use as children, and in this case(just like with ListView.builder), I use an index within delegate to return a container with the color and text you specify. And in addition to that, we also set the number of items we want on our list. Or we can omit this parameter, which will result in an infinite list of items.

And by the way, when we create our SliverList, we can specify a predefined height for each item, or if we want, we can put a more complex widget here, and Flutter will take care of its vertical size. However, if all elements in our list should have a fixed height, we can use SliverFixedExtentList, which takes the extent property, and setting this value will make all elements have the same size. This way, we reproduce our SliverList.

SliverGrid is very similar as it also requires. We can use SliverGridDelegateWithMaxCrossExtent to create and place widgets. Alternatively, we can use SliverGrtidDelegateFixedCrossAxisCount. We choose the maximum number of elements, the spacing on mainAxis and crossAxis, and the child element ratio.

At the same time, we can use SliverGrid.count, and SliverList.extent to declare the essential elements directly rather than by query with the pattern, and these constructors take arguments that are similar to the builder. We’ll see all the different variations in one place so that you can choose the right one depending on your application.

We already know how to show a collection of widgets inside a ribbon, but sometimes we just want to add one widget to our scrollable area, and we can use another widget, the SliverToBoxAdapter, to do that, and this is especially effective when we want to add headers or footers to lists or grids. In this example, I added the SliverToBoxAdapter to define the title of the grid.

So now we know about the most common types of slivers. In the next article, we’ll talk about more complex elements and create a complete application, including all kinds of slivers!