SliverList and SliverGrid in Flutter

A sliver is a section of a scrollable zone that you can mark as acting differently. Slivers can be used to create bespoke scrolling over effects, such as flexible scrolling over. Making scrollable content in Flutter is simple, whether you’re trying to pin widgets or create parallax effects.Slivers are a fantastic way to keep track of how various widgets in a format behave as the user scrolls up and down.Slivers cannot be directly used in Scaffold. We will have to add a CustomScrollView which can hold an array of slivers.

Check out more about our Flutter app development services

Following are the famous kinds of slivers that are in use:

1.SliverList

2.SliverGrid

1.SliverList

When we have to render a list of items in CustomScrollView which can be scrolled vertically, a SliverList is used. It has a property named delegate which accepts SliverChildBuilderDelegate. SliverList is especially used when the number of items in the list is not known – such as in cases where you need to render the list containing responses from the server API.

SliverChildBuilderDelegate has a property childCount of type integer which takes in the length of an array. This works similarly to Listview.builder.

For e.g.

2.SliverGrid

When we have to render a list of items in CustomScrollView which can be scrolled horizontally, a SliverGrid is used. It has a property named delegate which accepts SliverChildBuilderDelegate. Like SliverList, SliverGrid is also used when the number of items on the list is not known such as in cases when there is a need to render a list containing responses from a server API.

SliverChildBuilderDelegate has a property childCount of type integer, which takes the length of an array. It is equivalent to Gridview.builder.

We have two more Grid properties in Slivers:-

SliverGrid.extent

In CustomScrollView, when the number of items in the list is already known and can be scrolled horizontally, SliverGrid.extent is used. It has a property – children – which takes in a list of widgets. SliverGrid.extent is especially used when the number of items is fixed.

SliverGrid.count

Like SliverGrid.extent, SliverGrid.count also renders a list horizontally, but it differs from the former in one way: it allows us to set the number of widgets to be rendered in SliverGrid.count. Like SliverGrid.extent, it too has the same property – children – which takes in a list of widgets. SliverGrid.count is used when the number of items is fixed.

For e.g.

I hope this blog will help in achieving fancy scrolling using slivers.

Reference Links:

https://api.flutter.dev/flutter/widgets/SliverList-class.html

https://api.flutter.dev/flutter/widgets/SliverGrid-class.html