We will see learn about one CustomScrollView and Slivers which are one of the most important part Flutter scroll effect.
What is CustomScrollView?
You use CustomScrollView to create special effects and custom, elastic effects, which means you can controller the height dyanmically in the run time. But CustomScrollView alone is not enough. You need to stuff many things inside CustomScrollView. These things are slivers. CustomScrollView does not take widgets. It takes slivers as children.
What are Slivers?
Slivers are scrollable area to create custom effect. Well, we said CustomScrollView creates special or custom effects. But CustomScrollView needs slivers. Without that, CustomScrollView wont' work. Slivers are not widgets.
If you use CustomScrollView and don't use Slivers, you will get error. CustomScrollView it-self takes slivers list. Let's see the code
CustomScrollView(
slivers:[
]
)When to use CustomScrollView and Slivers?
Different kinds of Slivers
There are many different kinds of slivers, they all have different work to do. See them as below
Here we will see some of the examples how slivers work.
SliverAppbar
SliverAppBar is used for dynamic height of your app bar. Classic app bars are AppBar (not widget). That AppBar has fixed size. With SliverAppBar as you scroll up and down the page, your app bar height becomes smaller or larger. Here see the example of a SliverAppBar
SliverList
As you can understand from the name it, takes a list of slivers. SliverList is used along with SliverChildBuilderDeletgae(). SliverChildBuilderDelegate() takes a callback builder which creates a lot of children for SliverList. These children are ordinary widgets.
SliverList(
delegate: SliverChildBuilderDelegate(
(content, index) {
var item = controller.state.msgcontentList[index];
if(controller.token==item.token){
return ChatRightItem(item);
}
return ChatLeftItem(item);
},
childCount: controller.state.msgcontentList.length,
)
)Inside SliverChildBuilderDeletgae(), we also need to use chidCount property to say how many children or slivers we will have.
Here SliverChildBuilderDeletgae() delegates children(slivers) for the SliverList. It's like creating methods for building widgets.
SliverToBoxAdapter
Inside CustomScrollView in two places you may use widgets. One is SliverChildBuilderDelete() and other one is SliverToBoxAdapter. This SliverToBoxAdaptor force widgets to follow RenderSliver protocol rather than RenderLimitedBox protocol.
If you use widegts inside CustomScrollView without wrapping inside SliverToBoxAdapter, you will get error.
SliverPadding
As the name suggest, you use SliverPadding to apply padding to other slivers. Not to other widgets.
SliverPadding(
padding: EdgeInsets.symmetric(vertical: 0.w, horizontal: 0.w),
sliver:SliverToBoxAdapter(
child:controller.state.isloading.value?Align(
alignment: Alignment.center,child: new Text('loading...'),):Container(),
)
)Here you see that, inside SliverPadding, there's not child property. It's a sliver property which means you have to use Sliver for it.
Inside SliverPadding, we used another sliver called SliverToBoxAdapter().
CustomScrollView & ScrollController
You may use this scroll view with ScrollController together in your UI. In that case you need to create ScrollController instance in your controller and call the scroll controller instance from UI inside CustomScrollView.
Reverse
CustomScrollView reverse property plays an important role for list display order. If reverse is false(which is defualt proterty), list item would be shown from the lowest index at the top of the screen.
If reverse is set to true, then list item would be shown from the highest index from the list.
