We’re currently writing a few articles on flutter sliver series. As a result, we’ve already seen how flutter SliverAppBar works in a CustomScrollView. In addition we’ve also learned how to create a collapsing toolbar with the help of a NestedScrollView widget.
Considering the beginner’s point of view let’s us start with the concept of Sliver in flutter first.
Why?
Because the word sliver is always important, because it defines a scrollable area, either in the outer or in the inner space of a flutter app.
In case of SliverGrid a sliver places multiple box children in a two dimensional arrangement, which means horizontally in a column and vertically in a row.
The SliverGrid has been controlled by one parameter gridDelegate.
How does this property of SliverGrid work?
It places its children in arbitrary positions. However, each child has a specific size, which is determined by the gridDelegate.
How do you use Slivergrid Flutter?
Enough talking. Let’s see the code first. After that, we’ll discuss a few specific part of the code.
import 'package:flutter/material.dart';
class SliverGridExample extends StatelessWidget {
const SliverGridExample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Sliver and Nested Scroll',
home: SliverGridHome(),
);
}
}
class SliverGridHome extends StatelessWidget {
const SliverGridHome({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
expandedHeight: 200.0,
floating: false,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Container(
color: Colors.blue,
child: const Text(
"The Toolbar Collapses",
style: TextStyle(
color: Colors.white,
fontSize: 25.0,
),
),
),
background: Image.network(
'https://cdn.pixabay.com/photo/2016/09/10/17/18/book-1659717_960_720.jpg',
fit: BoxFit.cover,
),
),
),
];
},
body: CustomScrollView(
slivers: <Widget>[
SliverGrid(
delegate: SliverChildBuilderDelegate(
(context, index) {
return Container(
alignment: Alignment.center,
color: Colors.orange[100 * (index % 9)],
child: Text('grid item $index'),
);
},
childCount: 30,
),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 15,
crossAxisSpacing: 15,
childAspectRatio: 2.0,
),
),
],
),
),
);
}
}In the above code, there are two distinct parts.
The ancestor is obviously the MaterialApp. Then, we’ve used NestedScrollView widget as the body parameter of the Scaffold widget.
But, we didn’t mention AppBar, which naturally comes to mind when we define any Scaffold. Because we wanted that our AppBar should work as a collapsing toolbar, we’ve used SliverAppBar.
SliverAppBar(
expandedHeight: 200.0,
floating: false,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Container(
color: Colors.blue,
child: const Text(
"The Toolbar Collapses",
style: TextStyle(
color: Colors.white,
fontSize: 25.0,
),
),
),
background: Image.network(
'https://cdn.pixabay.com/photo/2016/09/10/17/18/book-1659717_960_720.jpg',
fit: BoxFit.cover,
),
),
),That defines the look of the flutter app like the following screnshot.
In the outer space resides the SliverAppBar, however, in the inner space resides the SliverGrid with two parameters. One is delegate and the other is gridDelegate.
SliverGrid(
delegate: SliverChildBuilderDelegate(
(context, index) {
return Container(
alignment: Alignment.center,
color: Colors.orange[100 * (index % 9)],
child: Text('grid item $index'),
);
},
childCount: 30,
),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 15,
crossAxisSpacing: 15,
childAspectRatio: 2.0,
),
),The delegate parameter defines the number of children by the childCount parameter. In the above code, we’ve mentioned it as 30.
Therefore, as we scroll down, two events take place.
Firstly, the SliverAppBar starts acting as a collapsing toolbar.
Secondly, the child count increases.
The toolbar image shrinks and gets shorter. And down below, the grid item shows the number 20.
If we move further down, the toolbar will collapse fully, however, it’ll not disappear. And the grid child count shows the last number 29.
What is gridDelegate Flutter?
As we’ve told before, the gridDelegate parameter of SliverGrid plays a crucial role. We can always always create our own delegate class, however, using the gridDelegate directly we can control the layout of the children within SliverGrid.
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 15,
crossAxisSpacing: 15,
childAspectRatio: 2.0,
),The gridDelegate has other functions in the GridView. However, in SliverGrid it acts as a delegate that controls the size and position of the children.
Leave a Reply