Flutter Staggered Grid View Example
In this article, we are going to create flutter staggered grid view in mobile app. You can also check out flutter listview related articles.
Normally we display items in gridview in two dimensional array (rows and columns). In this flutter example, we are using flutter_staggered_grid_view package to implement custom staggered gridview in flutter application. In staggered gridview, we can display images in custom size like pinterest.
StaggeredGridView widget has many properties like crossAxisCount, crossAxisSpacing, mainAxisSpacing, itemCount, itemBuilder etc. We can set horizontal and vertical spacing between images using crossAxisSpacing and mainAxisSpacing properties of StaggeredGridView widget.
We can customize UI of this staggered grid view using itembuilder property. We have to specify count of items which are displayed in grid view to itemCount property. In this flutter example, we are displaying images from network. For placeholder of image, we are using custom package kTransparentImage.
We can set custom size for image using StaggeredTile.count() property. Here we can set custom ratio of width and height using crossAxisCellCount and mainAxisCellCount for image in Staggered Grid View widget. First we need to add required libraries for staggered grid view and image placeholder in our pubspec files.
Add required dependency in your pubspec.yaml file
transparent_image: ^1.0.0
Flutter Staggered Grid View
import ‘package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart’;
import ‘package:transparent_image/transparent_image.dart’;
class MyStaggeredGridViewScreen extends StatefulWidget {
@override
_MyStaggeredGridViewScreenState createState() => _MyStaggeredGridViewScreenState();
}
class _MyStaggeredGridViewScreenState extends State<MyStaggeredGridViewScreen> {
List<String> listImages = [
“https://images.unsplash.com/photo-1572537165377-627a37043464?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8cGl4ZWx8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60”,
“https://images.unsplash.com/photo-1572204292164-b35ba943fca7?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8cGl4ZWx8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60”,
“https://images.unsplash.com/photo-1590254553792-7e91903c5357?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fHBpeGVsfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60”,
“https://images.unsplash.com/photo-1548586196-aa5803b77379?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTd8fHBpeGVsfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60”,
“https://images.unsplash.com/photo-1572447454458-e68d82f828b3?ixid=MnwxMjA3fDB8MHxzZWFyY2h8ODd8fHBpeGVsfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60”,
“https://images.unsplash.com/photo-1572204304559-b5f5380482c5?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTA4fHxwaXhlbHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60”,
“https://images.unsplash.com/photo-1554516829-a3fce6ddbc6e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTQzfHxwaXhlbHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60”,
“https://images.unsplash.com/photo-1563642421748-5047b6585a4a?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTY2fHxwaXhlbHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60”,
“https://images.unsplash.com/photo-1593439147804-c6c7656530ae?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzUzfHxwaXhlbHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60”,
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Flutter Staggered GridView Sample’)),
body: Container(
margin: EdgeInsets.all(10),
child: StaggeredGridView.countBuilder(
mainAxisSpacing: 10,
crossAxisSpacing: 8,
crossAxisCount: 2,
itemCount: listImages.length,
itemBuilder: (context, index) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(12)),
color: Colors.transparent,
),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(12)),
child: FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: listImages[index],
fit: BoxFit.cover),
),
);
},
staggeredTileBuilder: (index) {
return StaggeredTile.count(1, index.isEven ? 1.4 : 1.9);
}),
),
);
}
}
Pingback: GridView Flutter With Example - CodingWithDhrumil