Mastering Scrolling in Flutter: Part-2

In the last part, you all learned about the basics of widgets, elements and render objects. Along with that, we also went deep into how constraints work and how scrolling is handled in Flutter with its theory. And at last, we saw an intro to Slivers.

Master Scrolling in Flutter: Part:1

In this part, we’re gonna dig deep into slivers and understand it along with some cool examples. So let’s get started!

Slivers

As you saw in the last part, ListView , GridView and other Scrollable widgets implement Slivers under the hood. But what is a Sliver?

In basic terms, Slivers means a slice of something. If you look at the documentation on the official website of Flutter, you’ll see this:

A sliver is a portion of a scrollable area that you can define to behave in a special way. You can use slivers to achieve custom scrolling effects, such as elastic scrolling.

But when should you use Slivers explicitly?🤔 Because if you want to use lazy loading in your app, you can directly use ListView.builder() or GridView.builder() , then what is the need of using Slivers explicitly?

Scenarios when you’ve to use Slivers explicitly

• You want your AppBar to behave differently when you scroll (i.e disappearing effect as you scroll, changing the size or color as you scroll, etc)
• You want to implement ListView and GridView in the same screen. (Note: You can do these without explicitly using Slivers but it won’t have the lazy loading functionality because it’ll render everything even if it’s not visible on screen)
• You want to implement Custom Scrolling effects like an elastic scroll or Jelly Scroll, etc.

Now that you know when to use Slivers, let’s see different types of Slivers in action!

CustomScrollView

Before you deep dive into Slivers, there’s a small but important thing that you should always keep in mind. You can only use Slivers inside a CustomScrollView widget. Because CustomScrollView accepts the slivers property.

Therefore you can’t use Slivers inside your normal ListView and you can’t directly use your BoxWidgets inside CustomScrollView

1. SliverList

You can think of SliverList as an equivalent to the ListView . SliverList accepts a property called delegate. Let’s go through them one by one:

SliverChildListDelegate:

If you want to specify the actual list of children and If the order of the children can change in the Future, then you can use this delegate inside SliverList . Let’s see an example of it:

SliverChildListDelegate.fixed():

This delegate has the same parameters as the above one, but this creates a constant version of this delegate, thus improving some performance.

• You can use this delegate when you’ve to specify the list of children and the order of the list never changes.

SliverChildBuilderDelegate

This delegate is similar to ListView.builder() because it builds its children lazily when they are visible through the ViewPort(In simple terms your screen).

SliverList also has some flavors such as:

• SliverFixedExtentList: It’s more efficient for children with the same extent(height) in the main axis.
• SliverPrototypeExtentList: It’s similar to SliverFixedExtentList except that it uses a prototype list item instead of a pixel value to define the main axis extent of each item.
• SliverAnimatedList: which animates items added to or removed from a list.

If you want to learn more about these types then you can check it out from this link.

2. SliverGrid

SliverGrid places its children in arbitrary positions which is determined by gridDelegate. Each child is forced to have the size specified by the gridDelegate.

Like SliverList , it also requires the delegate property. There are 3 ways you can specify how you want your grid layout:

1. SliverGrid.count

• If you want to specify the whole list of children along with the crossAxisCount then you can use SliverGrid.count() for it.

• It also has other parameters like mainAxisSpacing, crossAxisSpacing and childAspectRatio

2. SliverGrid.extent

• You can use this when you want to specify the maximum width of items to determine how many items should fit across a grid.

3. Using the default constructor

If you want to use your own delegate or the existing gridDelegate then you can use this. Let’s an example of creating SliverGrid.count using the default constructor:

• There’s also another gridDelegate named SliverGridDelegateWithMaxCrossAxisExtent in which you can specify the maximum cross-axis count. This sets the widget’s max extent in the cross-axis direction.

3. SliverToBoxAdapter

This is one of the simplest sliver that you can use. It converts the normal box widgets into Slivers. So you can use any widget like Text or Container and then put it inside SliverToBoxAdaptor to convert it into a sliver.

But be aware of overusing it for multiple widgets, because they are instantiated even if it’s not seen on the viewport. Instead, you can use SliverList for it.

4. SliverAppBar

You can think of this widget as AppBar on steroids. It has so many parameters to play with that you’ll almost never need to create a custom AppBar🤯 You can make an AppBar contract when you scroll and make show up on the opposite scroll again.

Here’s an example of the AppBar we will make:

Looks amazing, isn’t it? To understand how I made this, let’s first look at the code and then understand it:

• stretch: When this property is set to true, Whenever you scroll the topmost or bottommost of your screen, it will show a stretching effect instead of a glow or bouncing effect.
• expandedHeight: The size of the AppBar when it is fully expanded.
• flexibleSpace: Here you can define the FlexibleSpaceBar to put any image as the background of your AppBar. You can also give other properties such as stretchModes which are the effects when you over-scroll the screen.

There are so many properties other than this that can take an entire blog so we won’t be discussing all the properties of it. But you can try other properties on your own and you can reach out to me if you’ve any doubts regarding it.

In the newer version of Flutter, they’ve included SliverAppBar.large() and SliverAppBar.medium() constructor to quickly make large-sized or medium-sized AppBars without tweaking so many parameters.

At last, let’s see the result of all the slivers combined in this blog:

If you want to check out the source code of these examples, you can check out my GitHub Repo for it. It contains all the examples which we discussed in this blog.

GitHub - Cavin6080/Slivers_Demo_Flutter at part-1/sliver-types

In the next part, we’ll look at how we can create our own Slivers using SliverPersistantHeader along with some other cool slivers💙

References

• Flutter docs: Link
• Explore Slivers in Flutter by Shaiq khan: Link
• Slivers Demystified by Emiliy: Link

Keep clapping 👏 (you can appreciate it by clapping 50 times)

You can connect with me on LinkedIn, Twitter and don’t forget to follow me here for more updates.

Note: We are building a community for developers where anyone can share their ideas or content, ask doubts about Flutter/other tech and collaborate with each other. If you are interested in being part of this then you can join our discord server by this link: https://7span.in/club