Check Mobile App
Read now

SliverList and SliverGrid in Flutter

Save

 

Every UI element is widget in flutter.For designing UI, we have multiple widgets like Container,listview,gridview.There exists a special kind of widget known as slivers.

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.

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

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

css.php

Big thanks to Webkul and his team for helping get Opencart 3.0.3.7 release ready!

Deniel Kerr

Owner and Founder. Opencart

Talk to Sales
Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home