Fancy Scrolling with Slivers
by Muhammad Jumadi and Rafi Kurnia Pangestu
Hello! Now, we are going to discuss Fancy Scrolling with Slivers.
What is a Sliver?
A sliver is a portion of the scrollable space. We can implement as many Widgets as we want in one scrollable area, such as ListView, GridView using slivers. It is a lower-level interface that gives glorious management over implementing a scrollable space.
Contents:
1. SliverAppBar
2. SliverList
3. SliverGrid
4. SliverToBoxAdapter
A CustomScrollView lets you supply slivers directly to create various scrolling effects, such as lists, grids, and expanding headers. For example, to create a scroll view that contains an expanding app bar followed by a list and a grid, use a list of three slivers: SliverAppBar, SliverList, SliverGrid, and SliverToBoxAdapter
In this chance, we are going to show you the case using these contents below in implementing slivers by giving you an example of Fancy Scrolling App that includes Register, Login, and Homepage UIs.
- Fancy Scrolling UIs
- Fancy Scrolling Project’s Folders and Files
Don’t forget to attach
http: ^0.13.3 inside of dependencies in pubspec.yaml because we will use a REST API service for a case in our example project.
Download the source code here.
Now, let’s explore our intended topic!
1. SliverAppBar
Just like other slivers, SliverAppBar scrolls along with the rest of the content. However, it will get stuck on the top of the screen when we try to over scroll.
We can use some various properties like we use in conventional app bar: leading, title, actions, and many more. But, SliverAppBar has its own properties such as pinned, floating, etc (see more properties here)
Here is SliverAppBar code section (lib\Register\app_bar.dart):
- And here is the output of the code:
Used properties:
- automaticallyImplyLeading
A simple way to remove the back button in the AppBar Widget is to set automaticallyImplyLeading to false.
automaticallyImplyLeading: This checks whether we want to apply the back widget leading widget over the app bar or not.
If the automaticallyImplyLeading is false then automatically space is given to the title and If the leading widget is true, then this parameter has no effect.
- expandedHeight
expandedHeight is to set the app bar height size area.
We can set both automaticallyImplyLeading and expandedHeigh for a different height and appearance of your app bar when it’s expanded to its full size.
- elevation
This property controls the size of the shadow below the app bar.
- floating
floating is used for either making the app bar visible as soon as possible when we scroll up (floating: true) or making the app bar visible only when we reach the top of the screen (floating: false).
- pinned
We set pinned: true if we want to pin the SliverAppBar (the app bar will remain and be seen) when we scroll down the screen. Otherwise, the app bar will disappear.
- flexibleSpace
flexibleSpace is a space where you can put title, background, and other properties inside of it.
expandedHeight and flexibleSpace could be combined for giving an effect of the app bar text from bigger to small when the screen is scrolled down.
lib\Register\app_bar.dart full code:
2. SliverList
Both SliverList and SliverGrid require delegate property to build our items. Inside of delegate, there are two types of children:
a. SliverChildListDelegate = to build explicit list of widgets
b. SliverChildBuilderDelegate =build widgets on-demand which is for large number of items
a) SliverChildListDelegate Implementation
- This block of codes below here is the implementation of SliverChildDelegate which has a use of building lists of widgets one by one.
- But we can also build list of widgets using SliverFixedExtentList that wraps SliverChildListDelegate. SliverFixedExtentList is used for setting a fixed height for our items and itemExtent property is set to force all the items to be of the same height. This block of codes below here is the implementation of it.
- And here is the output of the code:
> The large size of list of cards starting from pink to yellow are the examples of building list of widgets using SliverChildListDelegate.
> The smaller size of list of cards starting from pink to yellow are the examples of building list of widgets using SliverFixedExtentList that wraps the SliverChildListDelegate.
- lib\Home\sliver_list_1.dart full code:
b) SliverChildBuilderDelegate Implementation
We use index inside of delegate to return Padding with a given color and addition to that we also specify a childCount to decide how many items we want in our list.
- This block of codes below here is the implementation of SliverChildBuilderDelegate which has a use of building lists of widgets on-demand (in a large number of items)
Same like SliverChildListDelegate, we can also build list of widgets using SliverFixedExtentList to set a fixed height and itemExtent property to force all the items to be of the same height.
- This block of codes below here is the implementation of it.
- And here is the output of the code:
> The large size of list of cyan-color cards are the examples of building list of widgets using SliverChildBuilderDelegate.
> The smaller size of list of cyan-color cards are the examples of building list of widgets using SliverFixedExtentList that wraps the SliverChildBuilderDelegate.
- lib\Home\sliver_list_2.dart full code:
3. SliverGrid
SliverGrid has a similarity to SliverList because it also requires a delagate that we can build our items but in addition to that, it has a gridDelegate which is a different argument that we can use to specify how the items are laid out.
We can use SliverGrid.count as a way to declare the actual items directly rather than on-demand with a builder pattern.
- This block of codes below here is the implementation of it.
- Here’s the output of the code:
- lib\Home\sliver_grid_1.dart full code:
- Also, we can use SliverGridDelegateWithMaxCrossAxisExtent to decide the maxCrossAxisExtent for each items. Alternatively, we can use SliverGridDelegateWithFixedCrossAxisCount to choose the maximum number of items in the crossAxisCount and either way we can choose the spacing between items in the mainAxisSpacing and crossAxisSpacing
Look at this block of codes below.
- Here’s the output of the code:
- lib\Home\sliver_grid_2.dart full code:
4. SliverToBoxAdapter
SliverToBoxAdapter is used for creating a single widget to a scrollable area among other slivers around. This is particularly used when we want to add headers or footers to lists or grids.
- This block of codes below here is the implementation of it.
- Here’s the output of the code:
- lib\Register\register.dart full code:
If we take a look at the code, we can’t see the form because it actually recalls the Body() function which directs to lib\Register\body.dart.
lib\Register\body.dart full code:
For the Login Page, it has the same form as Register Page. So, you can check out the source code by yourself.
After reading about some Slivers and their implementation, now we are headed to an implementation of fetching data from JSON to be placed in SliverFixedExtentList that will have SliverChildBuilderDelegate to make on-demand items (on our case, they are lists).
The interface will show that it will load some data with CircularProgressIndicator child and it will show the fetched data from JSON. It is JSON Placeholder API which is an online REST (Representational State Transfer) service that you can use whenever you need some fake data.
Let’s see how it works.
- lib\Home\services\fetch.dart
- This block of codes is to make the circular load effect before it puts data into the boxes.
- While, this block of codes below is to make the empty boxes before getting filled by the data. We set the box to be printed as what the data available in JSON Placeholder API website, so it adjusts the length. Additionally, what we fetch from the data is only the user’s name in order not to place so many output.
Move to the question of how could the data is fetched. So, actually we also have to make one more dart file for fetching data from JSON Placeholder API. In this case, we fetch user data which includes several information like id, name, address, etch (see more).
- We firstly make three classes: User, Address, and Geo in lib\Home\services\services. Then, get the data from JSON Placeholder API for each class. So, here how it goes.
- Next. we make a service class to fetch the data from JSON Placeholder API.
- So, here’s the output of the code:
While this is our main file:
lib\main.dart
Conclusion
Sliver is an amazing portion of scrollable area. We can use slivers to contain many items and to set custom scrolling effects. Flutter has many types of Slivers and each of sliver has its own particular amazing function that is not expected not to implement if you are a programmer using Flutter.
Thank you for surfing with us discussing about Slivers. We hope you can try it yourself and stay edgy with Flutter!
Download the source code on Github.
