Flutter Development. Why would you benefit from Slivers?

Greetings, readers, and fans of Flutter. Today we are going to talk about a highly specialized topic, more precisely about Slivers. Naturally, to achieve a scroll effect on our display, most developers can easily take advantage of SingleChildScrollView, which will do the job just fine. But if you’re looking for more in-depth knowledge and want to improve your scrolling abilities, in that case, Slivers is the way to go!

So. What is Slivers?

Sliver is a part of a scrolling area. Using Slivers, we can easily create a lot of fantastic results for our scrolling effects. All scrolling widgets like ListView or GridView are implemented with Slivers.
Slivers are very useful if you need to place different kinds of widgets inside a scrolling area. For example, a ListView followed by a GridView. If we want them to scroll as a whole, they must be defined with a particular Sliver widget to be placed inside a CustomScrollView. Flutter provides many kinds of Slivers to implement our ideas. In this and the following articles, we’ll see what types are available to us and how to use them in different cases. We’ll also learn about some common mistakes you might encounter.
We will start with one of the main types of slivers, the SliverAppBar. Just like the other slivers, the SliversAppBar scrolls with the rest of the content, but it remains tethered to the top of the screen. Like a regular AppBar, you can use it to display widgets like title, action, and leading.

Also, this Sliver type has some exciting parameters, such as flexibleSpace and expandedHeight. Using them together, you can create a larger header in the background of the widget of interest that shrinks when you scroll down like a standard AppBar.

If you want the SliverAppBar to be pinned at the top when you scroll, then the pinned option is just what you need!

Float is a more flexible property. We use it when we want the appBar to become visible as soon as we scroll up.

By the way, a common mistake some developers make is to put the AppBar in CustomScrollView instead of SliverAppBar. The error message will tell us that we can’t use standard widgets to Slivers analog.

Next, we will look at the SliverPersistentHeader. This sliver is used under the SliverAppBar hood to implement your compression and growth effect. You are executing your SliverPersistentHeader works by declaring it, which in turn has fixed and floating effects similar to SliverAppBar.

First, you need to implement SliverPersistentHeaderDelegate, which is a regulated class. After declaring it, you need to redefine several properties, including minExtent and maxExtent. Additionally, you need a particular build method that gives you additional arguments to control your UI, depending on what part of Slivers was reduced. For example, in my case, I use the stack to place two different widgets.

The first widget is the background image, the second is the text that sits at the bottom of the SliverPersistentHeader.

I can control the transparency of the text based on the titlleOpacity function. When I scroll down, my text slowly disappears, and here I calculate the header transparency based on shrinkOffset and maxExtent ribbon. Still, you can use shrinkOffset in other entertaining ways.

Simultaneously, when you implement SliverPersisentHeaderDelegate, you also need to override the shouldRebuild and snapConfiguration variables. By the way, this is one of the not uncommon mistakes developers make!

So I recommend you to read the documentation for SliverPersisentHeaderDelegate to learn about all the properties and how to use them. So you can use SliverAppBar as an alternative to the standard AppBar when working with Slivers, and if you need advanced control, you can use SliverPersisentHeaderDelegate. So, in the following articles, I’ll talk about other Slivers.

Source code: bitbucket.org/…​Timoshenko/my_slivers.git