CustomScrollView & Slivers In Flutter
Introduction :
Appbar is basically a pre built widget inside Scaffold class which is placed as a fixed-height widget at the top of the screen. For scrollable appbar we use a SliverAppBar which embeds an appbar in a sliver for use in a CustomScrollView
Table of Contents:
:: SliverAppBar (scrollable appbar)
SliverAppBar Class
It is an appbar that can be integrated with a CustomScrollView. SliverAppBar is mostly used as a first child of CustomScrollView, which allows the appbar to integrate with a scrolling effect so that it can vary its height up to a certain expandable limit.
CustomScrollView:
Let’s, not bit get confused about CustomScrollView. It is basically a scroll view that creates custom scroll effects using slivers. It provides you with slivers to create various scrolling effects, such as lists and a grid with SliverList and SliverGrid.
Let’s Start: :
How to implement -:
In the body, we have defined the CustomScrollView widget which has slivers as its property which provides various scrolling effects. SliverAppBar widget is used for scrolling appbar up to a certain expandedHeight.
Here we have given an expanded height of 200 which is a given height up to which appbar will scroll down, floating effect is set as false as you do not need to set it as false as its a default value but when you want your appbar to appear while scrolling even you have not reached to the top of the list then set it as true, set pinned property as true if you do not want appbar to disappear while scrolling or set it as according to your need but remember you do not compulsory need to set is as false as is it’s the default value.
FlexibleSpaceBar class is a part of appbar that expands, collapses, and stretches. It is used to set an inner functionality of an appbar which includes title, background, and many more.
=For more Info :
FlexibleSpaceBar class
The part of a material design AppBar that expands, collapses, and stretches. Most commonly used in in the…api.flutter.dev
Till now our appbar is shown to us, but wait we are still not able to scroll down our appbar as it does not show any movement to us. But why?
Because till now, we have not provided other slivers(or any scrollable part ) to our rest filling area, so it is not able to scroll down anything.
Scrollable Part: Other slivers may include such as SliverList, SliverGrid, and SliverFillRemaining, etc.
ANow we going to fill our rest sliver zone area so that our appbar scrolls.
Lets Code: :
How to implement -:
We have filled our other sliver part with SliverFillRemaining class so that our scrolling starts performing.
SliverFillRemaining class
SliverFillRemaining class is a widget inside slivers that contain a single box child that fills the remaining space in the viewport.
Here we have used SliverFillRemaining class so that it becomes a scrollable child. We have provided some text data in column form in this class just to fill up our area so that our appbar starts scrolling.
Now our app looks like this as shown below :
Try it out, now you are able to scroll your appbar accordingly 👍
Let’s understand more :
Description :
The picture looks quite simple and its implementation is as easy as it looks…😊
The above picture contains an appbar that is scrollable and it’s a normal appbar that does not expand its size but float while scrolling.
Above we have seen that only SliverAppBar does not scroll if it is not provided with other scrollable slivers such as SliverFillRemaining, SliverList, and SliverGrid, and many more.
You have already seen how to implement SliverFillRemaining. Here you can see a list type structure in our body area, so I think you must have already guessed that we will be implementing SliverList here.
Lets Code :
Lets again start with building an appbar:-
You have already seen its explanation above, but only the basic difference is here we have not provided expandedHeight to our appbar as we do not want our appbar to expand more..!
Appbar is created till now and it will not scroll and I think we must have understood why?
As I have already explained above for scrolling it also requires scrollable slivers for something to scroll.
Lets code for it :
SliverList
SliverList is a sliver that places multiple box children in a linear array along the main axis. It is just similar to the list view.
For more info :
SliverList class
A sliver that places multiple box children in a linear array along the main axis. Each child is forced to have the…api.flutter.dev
It has one delegate property which is its required property. A delegate that supplies children for slivers. Rather than receiving their children as an explicit List, they receive their children using a SliverChildDelegate.
For more info :
SliverChildDelegate class
A delegate that supplies children for slivers. Many slivers lazily construct their box children to avoid creating more…api.flutter.dev
Inside a SliverChildListDelegate, we have created a list in which loop executes from 1 to 100, and each time its execution takes place it just creates a new widget in list form. Here we have used the ListTile widget which has child property of leading and title. It will create a 100 ListTile widget in a list form that works as a scrollable child or slivers.
So now you can see your appbar starts floating accordingly you scroll down your list and it looks the same as shown in our starting picture….👏
Hope you have enjoyed learning with us…
Refer to the below blog to build a highly custom appBar in Flutter.
Custom AppBar in Flutter
Building a beautiful AppBar using Fluttermedium.com
Thanks for reading this article ❤
Clap 👏 If this article helps you.
Feel free to post any queries or corrections you think is required…✔
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.
