Explore Slivers In Flutter
A sliver is a part of a scrollable region that you can characterize to act exceptionally. You can utilize slivers to accomplish custom scrolling over impacts, for example, versatile scrolling over. Making scrollable substance in Flutter is exceptionally basic whether you’re attempting to pin widgets or make parallax impacts. Slivers give an incredible method to oversee how various widgets inside a format act as the user scrolls up and down.
In this article, we will Explore Slivers In Flutter. We will also implement a demo program, describe properties and their types of slivers, and how to use them in your flutter applications.
Table Of Contents::
Slivers
Sliver is a part of the scrollable zone which is utilized to accomplish a custom scrolling over impact. As such, the sliver widget is a cut of the viewport. We can actualize the implementation of the scrollable perspectives, for example, ListView, GridView utilizing slivers.
It is a lower-level interface that gives superb control over executing a scrollable region. It is valuable while scrolling over enormous numbers of children’s widgets in a scrollable zone. As they depend on the viewport, it can change their shape, size, and extent dependent on a few events and offset
Flutter gives a few sorts of slivers, some of them are given underneath:
- > SliverAppBar
- > SliverPersistentHeader
- > SliverFixedExtentList
- > SliverList
- > SliverGrid
Demo Module ::
This video shows how to create Slivers in a flutter and show how to using slivers to making scrollable layouts in your flutter applications, and then they will be shown on your device.
How to use slivers?
It is to note that the sliver’s segments’ entirety should be put inside a CustomScrollView consistently. From that point forward, we can consolidate the list of slivers to make the custom scrollable region.
CustomScrollView in Flutter is a scroll see that permits us to make different scrolling over impacts, for example, grids, lists, and extending headers. It has a sliver property where we can pass a list of widgets that incorporate SliverAppBar, SliverFixedExtentList, SliverList, and SliverGrid, and so on.
SliverAppBar
SliverAppBar is a material design app bar in Flutter that incorporates with a CustomScrollView. By and large, we utilized it as the principal offspring of CustomScrollView. It can shift in height and buoy over the other widget of the scroll view. It permits us to make an application bar with different scrolling over impacts.
SliverAppBar(
title: Text('Flutter Slivers Demo',style:
TextStyle(fontSize: 25,
fontWeight: FontWeight.bold,
color: Colors.white),),
backgroundColor: Color(0xFFEDF2F8),
expandedHeight: 200,
flexibleSpace: FlexibleSpaceBar(
background: Image.network(
"https://images.unsplash.com/photo-1603785608232-44c43cdc0d70?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDY4fEo5eXJQYUhYUlFZfHxlbnwwfHx8&auto=format&fit=crop&w=500&q=60",
fit: BoxFit.cover),
),
),
In this SliverAppBar, we will add title, expandedHeight, and flexibleSpace. When we run the application, we ought to get the screen’s UI like the underneath screen capture.
Properties of SliverAppBar
The following are the basic properties of the SliverAppBar:
- > actions: This property is utilized to make widgets right of the appBar title. For the most part, it is an iconButton that speaks to regular operations.
- > title: This property is utilized to characterize the title to the SliverAppBar. It is like the AppBar title to give the name of the application.
- > leading: This property is utilized to characterize a widget left to the title. For the most part, it is utilized to put the Menu Drawer widget.
- > backgroundColor: This property is utilized to characterize a background color to the sliver app bar.
- > bottom: This property is utilized to make space for the lower part of the title, where we can characterize any widget as indicated by our necessities.
- > expandedHeight: This property is utilized to determine the most extreme height of the application bar that can be extended while scrolling. It must be characterized in a double value.
- > floating: This property decides if the application bar will be noticeable or not when the user scrolls towards the application bar.
- > flexibleSpace: This property is utilized to characterize a widget which is stacked behind the toolbar and the tab bar. Its height is equivalent to the application bar’s general height.
SliverPersistentHeader
A sliver whose size fluctuates when the sliver is scrolled to the edge of the viewport inverse the sliver’s GrowthDirection. In the typical instance of a CustomScrollView with no focused sliver, this sliver will shift its size when scrolled to the viewport’s leading edge.
Create a new dart file called sliver_header.dart inside the lib folder.
return SliverPersistentHeader(
pinned: true,
floating: false,
delegate: Delegate(backgroundColor, _title),
);
Create a Delegate class extend with SliverPersistentHeaderDelegate{}
class Delegate extends SliverPersistentHeaderDelegate {
final Color backgroundColor;
final String _title;
Delegate(this.backgroundColor, this._title);
@override
Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
return Container(
color: backgroundColor,
child: Center(
child: Text(
_title,
style: TextStyle(
color: Colors.white,
fontSize: 25,
),
),
),
);
}
@override
double get maxExtent => 80;
@override
double get minExtent => 50;
@override
bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
return true;
}
}
In this SliverPersistentHeader, we will add title and backgroundColor. When we run the application, we ought to get the screen’s UI like the underneath screen capture.
SliverFixedExtentList
A SliverFixedExtentList is a sliver that holds numerous children with a similar fundamental axis extent in a one-dimensional array or linear array. It is more productive than SliverList because there is no compelling reason to perform layouts on its children to acquire the main-axis extent. It doesn’t permit a gap between its children. It requires every child to have the SliverConstraints.crossAxisExtent in the cross axis and the itemExtent property on the main-axis.
SliverFixedExtentList(
itemExtent: 70,
delegate: SliverChildListDelegate([
_buildFixedList(Colors.cyan, "Cyan"),
_buildFixedList(Colors.green, "Green"),
_buildFixedList(Colors.orange, "Orange"),
_buildFixedList(Colors.amberAccent, "AmberAccent"),
_buildFixedList(Colors.blueGrey, "Blue Grey"),
]),
),
In this SliverFixedExtentList, we will use itemExtent and delegate. In delegate, we will call a SliverChildListDelegate() function. When we run the application, we ought to get the screen’s UI like the underneath screen capture.
SliverList
SliverList is a sliver that puts the children in a linear array or one-dimensional array. It takes a delegate parameter to give the things in the list so they will scroll into view. We can indicate the children’s list utilizing a SliverChildListDelegate or build them with a SliverChildBuilderDelegate.
SliverList(
delegate: SliverChildListDelegate([
Container(
margin: EdgeInsets.all(24),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Add Name', style: TextStyle(fontSize: 22)),
_buildName(),
SizedBox(height: 16),
RaisedButton(
child: Text('Submit'),
onPressed: _submit,
),
],
),
),
)
]),
),
In this SliverList, we will add TextFormField with validation and RaisedButton(). When we run the application, we ought to get the screen’s UI like the underneath screen capture.
SliverGrid
SliverGrids places the children in a two-dimensional course of action. It likewise utilizes a delegate to indicate the children or an express list like the SliverList. Yet, it has extra arranged to the cross-axis measurement on a grid.
SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childAspectRatio: 1.5
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
padding: EdgeInsets.all(8),
color: _randomColor(index),
child: Center(
child: Text(
_name[index],
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white,
fontSize: 20),
),
),
);
},
childCount: _name.length
),
)
In this SliverGrid, we will enter any name on TextFormField, then press the submit button, and the name is shown on below gridView with random colors. When we run the application, we ought to get the screen’s UI like the underneath screen capture.
Code File
https://gist.github.com/ShaiqAhmedkhan/29de62988180c81e28c04df0cf058301#file-slivers_demo-dart
Conclusion:
In the article, I have explained some properties and types of Slivers in a flutter; you can modify this code according to your choice. This was a small introduction to Slivers On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information in Trying up Slivers in your flutter projects. We will show the slivers, some properties using in slivers, and make a demo program for working slivers, and show how to using slivers to making scrollable layouts in your flutter applications, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
find the source code of the Flutter Slivers Demo:
flutter-devs/flutter_slivers_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
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.
