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

flutter_staggered_grid_view: ^0.3.3
transparent_image: ^1.0.0
 
 

Flutter Staggered Grid View

import ‘package:flutter/material.dart’;
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);
}),
),
);
}
}

 
 
flutter staggered grid view
 
 

One thought on “Flutter Staggered Grid View Example

Leave a Reply