Flutter Slivers
A sliver is a section of a scrollable zone that you can mark as acting differently. Slivers can be used to create bespoke scrolling over effects, such as flexible scrolling over. Making scrollable content in Flutter is a breeze, whether you’re trying to pin widgets or create parallax effects. Slivers are a fantastic way to keep track of how various widgets in a format behave as the user scrolls up and down.
Flutter provides several kinds of slivers, some of them are given below:
- SliverAppBar
- SliverList
- SliverGrid
SliverAppBar
SliverAppBar is a material design app bar in Flutter that integrates with a CustomScrollView. Generally, we used it as the first child of CustomScrollView. It can vary in height and float above the other widgets in the scroll view. It allows us to create an app bar with various scrolling effects.
Example:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
actions: <Widget>[
Icon(
Icons.person,
size: 40,
)
],
title: Text("Learn Code Zone"),
leading: Icon(Icons.menu),
backgroundColor: Colors.blue,
expandedHeight: 100.0,
floating: true,
pinned: true)
// Place sliver widgets here
],
),
),
);
}
}
SliverList
SliverList is a sliver that places the children in a linear array or one-dimensional array. It takes a delegate parameter to provide the items in the list in a way they will scroll into view. We can specify the children’s list using a SliverChildListDelegate or build them with a SliverChildBuilderDelegate.
Example
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
actions: <Widget>[
Icon(Icons.person, size: 40,)
],
title: Text("SliverList Example"),
leading: Icon(Icons.menu),
backgroundColor: Colors.green,
expandedHeight: 100.0,
floating: true,
pinned: true
),
SliverList(
delegate: new SliverChildListDelegate(_buildList(20)),
),// Place sliver widgets here
],
),
),
);
}
}
List _buildList(int count) {
List<Widget> listItems = List();
for (int i = 0; i < count; i++) {
listItems.add(new Padding(padding: new EdgeInsets.all(16.0),
child: new Text(
'Sliver Item ${i.toString()}',
style: new TextStyle(fontSize: 22.0)
)
));
}
return listItems;
}
SliverGrid
SliverGrids places the children in a two-dimensional arrangement. It also uses a delegate to specify the children or an explicit list similar to the SliverList. But it has additional formatting to the cross-axis dimension on a grid. It allows the three ways to specify the grid layout:
Example
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
actions: <Widget>[
Icon(Icons.person, size: 40,)
],
title: Text("SliverList Example"),
leading: Icon(Icons.menu),
backgroundColor: Colors.green,
expandedHeight: 100.0,
floating: true,
pinned: true
),
SliverList(
delegate: new SliverChildListDelegate(_buildList(20)),
),// Place sliver widgets here
],
),
),
);
}
}
List _buildList(int count) {
List<Widget> listItems = List();
for (int i = 0; i < count; i++) {
listItems.add(new Padding(padding: new EdgeInsets.all(16.0),
child: new Text(
'Sliver Item ${i.toString()}',
style: new TextStyle(fontSize: 22.0)
)
));
}
return listItems;
}
//Example
In the below example, we will see how to use the SliverGrid with CustomScrollView.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
actions: <Widget>[
Icon(Icons.camera_front, size: 40,)
],
title: Text("SliverGrid Example"),
leading: Icon(Icons.menu),
backgroundColor: Colors.green,
expandedHeight: 100.0,
floating: true,
pinned: true
),
SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
) ,
delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
return new Container(
color: _randomPaint(index),
height: 150.0
);
}),
),
],
),
),
);
}
}
Color _randomPaint(int index) {
if (index % 3 == 0) {
return Colors.orange;
} else if (index % 3 == 1) {
return Colors.blue;
}
return Colors.red;
}