Slivers Deep Dive Series: Introduction to Slivers and SliverAppBar
One of the common scenarios in app development is, to show a set of data as a scrollable view. With Flutter, to achieve this, you can simply use a ListView if you would like to have your data represented as a linear array along the main axis. If you would like to have multiple children in a two-dimensional arrangement, then your go-to widget is GridView.
These two widgets will be enough in most scenarios that you will be needing a scrollable list of items. But, when you would like to have an advanced layout with ListView and GridView acting as a single scrollable widget, collapsing list with headers or simply collapsable toolbars. For these purposes, you are going to be using and advanced approach called Slivers.
Slivers can be explained as a portion of a scrollable area. You can think of it as the basis for all the scrollable elements with multiple children such as ListView and GridView. Both of these widgets use Slivers under the hood.
Slivers render the child widgets lazily. They are particularly useful for efficiently scrolling through large numbers of children. They only render what is on the screen and some extra from the top and bottom for accessibility and caching reasons. Slivers can either have sliver children, or children from another coordinate system, typically box children.
Like all the other scrollable areas, they follow Sliver protocol. When Flutter creates widgets, parent widgets send constraint information to their child/children to give them boundaries. While passing this constraint information, they follow two protocols. Either Box protocol or Sliver protocol. When they are using Box protocol, the parent passes a BoxConstraint. This constraint decides on the maximum and minimum width and height that each child is allowed to be. But as you can understand from this, specified height and width variables does not work well with scrollables. That’s why they use Sliver protocol. With Sliver protocol, you have multiple axis to be able to move your children and the parent passes constraint as SliverConstraint. SilverConstraint holds information about, scroll, axis and growth direction, scrollOffset, paintExtent and many more. According to these values provided Slivers computes a corresponding SliverGeometry that describes where it fits in the viewport. Slivers also can change dimensions in a non-linear way to be able to provide various scroll effects.
How to use Slivers?
For using Slivers and their special scrolling effects, you need to wrap them with CustomScrollView. CustomScrollView is a special ScrollView directly helps you to create various scrolling effects, such as lists, grids, and expanding headers. CustomScrollView slivers should be part of RenderSliver. This means they should have elements which are following Sliver protocol.
Enough intro about Slivers. Let’s see how you can use them. You are going to be implementing SliverAppBar for creating a collapsible toolbar behavior in this tutorial and in the next step you will learn how to implement SliverList and lastly you will be implementing a SliverGrid to show the list of the movie theater.
For implementing this check out the project from this link and use the project from the master branch as your starter project.
SliverAppBar
SliverAppBar is a special app bar includes a toolbar and other possible widgets. It can have a TabBar for tab behavior or a FlexibleSpaceBar a widget that can expand and collapse. Meanwhile, FlexibleSpaceBar is ready to expand and collapse, behind the scenes SliverAppBar is using a SliverPersistentHeader widget to change the size of the sliver as you scroll to the leading edge.
While implementing SliverAppBar you will be making some changes in the movie detail page. Instead of using an app bar, you will be using SliverAppBar and you will be adding an image to the background of the expanded version of the app bar. When it collapses, it will turn in to the regular app bar look.
For using Slivers, we need to make a bit of refactoring. But don’t worry, we will go over it step by step. Let’s start off by opening the popular_movies_detail_page.dart. Navigate yourself to _PopularMoviesDetailPageState. After that find build(BuildContext context) and go to return statement inside the build method.
You will restructure your return statement from this point. For this purpose let’s delete all previous return statement code. Do not worry, you will be seeing the code implemented before in the next steps when you need them.
After commenting out, add the code below as return statement
Let’s go over the code that you wrote:
1. SliverAppBar, SliverList and SliverGrid comes from the material.dart file. Therefore, when you try to use them without a `MaterialApp` parent, it will give an error to you. For fixing the error, you assign parent widget as MaterialApp. It is also wrapped with Scaffold to fill the rest of the screen to have a proper design.
2. CustomScrollView is added for using the Slivers. You have only implemented the `sliver` for it, but there are other variables that you can use to change the behavior as well. E.g. You can change the scroll direction by changing scrollDirection.
3. SliverAppBar is implemented first to be at top of the screen. You can customize it with some variables. You are adding expandedHeight to decide on what is its initial height without scrolling. You are also assigning the same background color that you had before to show when the toolbar is collapsed.
4. flexibleSpace variable is a widget that is stacked behind the toolbar and the tab bar. Its height will be the same as the app bar’s overall height. For expanding and collapsing behaviour you are going to be implementing FlexibleSpaceBar widget. You are assigning the title widget with the name of the movie. This is going to be moving to the title position as you scroll up. And the background widget is the widget that is going to fill out the expandedHeight area. For that widget, you will be using an Image widget with a backdrop image provided.
If you start your application now, you can see that you have a toolbar that is blending itself to a toolbar as it collapses. Your app should look like the gif below.
SliverAppBar comes with a lot of handy flags and variables that can be used to modify the behavior of it. For example; there are three different flags that can change the behavior and movement of the app bar. floating, pinned and snap. All three flags are false as default. Let’s explain what happens in each scenario.
- floating = false — pinned = false — snap = false
With these variables (also this is the default), the SliverAppBar will be collapsing and moving outside as you scroll down in the list. When you scroll back to the initial state, then it would be first showing the collapsed version of the app bar and make it expanded as you scroll.
- floating = true — pinned = false — snap = false
With these variables, the SliverAppBar will be collapsing and moving outside as you scroll down in the list. When you start to scroll back, then it would be first showing the collapsed version of the app bar and make it expanded as you scroll.
- floating = true — pinned = false — snap = true
One important thing to keep in mind about these variables is `snap` can be true only when `floating` is true alongside it. As a behavior, the SliverAppBar will be collapsing and moving outside as you scroll down in the list. When you start to scroll back, it will start showing the app bar and it will animate itself automatically to the expanded version of it without needing to keep scrolling.
- floating = true — pinned = true — snap = false
With these variables, the SliverAppBar will be collapsing and staying in the screen as collapsed toolbar even though you scroll down in the list. When you start to scroll back, it will directly start expanding from the collapsed version of the app bar.
- floating = false — pinned = true — snap = false
With these variables, the SliverAppBar will be collapsing and staying in the screen as collapsed toolbar even though you scroll down in the list. When you start to scroll back, it will wait until you reach to initial state for expanding from the collapsed version of the app bar.
We will stop here for a break now. In the meantime, if you have any further questions, just reach out to me via comments here or over Twitter.
