GridView and Staggered GridView in Flutter
Getting started with the Grid layouts in Flutter with examples
In this article, we will take a look at the GridView widget in Flutter, why it is not suitable for all the use cases, and how we can use the Staggered GridView to layout complex items. So let’s get started!
GridView
From the docs, The GridView is a scrollable, 2D array of widgets. It is basically used to lay the items in a tabular grid fashion.
There are the following constructors of the GridView class:
GridView— Creates a GridView with customSliverGridDelegate.GridView.count— Creates a GridView with a fixed number of tiles in the cross axis. It is the most commonly used constructor.GridView.extent— Creates a GridView which allows us to specify the maximum cross-axis extent rather than the fixed size for each tile.GridView.builder— Creates a GridView that displays data dynamically or on-demand. Generally used for large number of children where the memory needs are huge. The builder is called only for those items that are actually visible.GridView.custom— Creates a custom GridView that allows us to specify a customSliverGridDelegateand a customSliverChildDelegate.
Enough theory, let’s get our hands dirty with the code. In this example, we will use the GridView.count constructor. Later, we will also recreate the same grid layout using the GridView.extent and GridView.builder constructors to get a better idea. We create a simple GridView which holds some images of portrait and landscape orientations.
There are various parameters available to the constructor, but these are the most used ones. There is a single required argument crossAxisCount which defines the number of tiles in the cross axis. Here we want 2 tiles per row, so we pass the value 2.
The mainAxisSpacing defines the amount of empty space between two tiles along with the direction in which it scrolls (vertical in this case) and the crossAxisSpacing defines the spacing between the tiles in the cross axis of the scrolling direction (horizontal in this case). It takes a list of widgets that are to be laid out in the Grid. Here we pass the list of custom ImageTile widgets for the children parameter. That’s it, here we have a simple working GridView!
This will produce the following output:
You can achieve the same result using the GridView.extent constructor as:
And the same with GridView.builder constructor can be done as:
This article only includes the necessary code for brevity, you can find the GitHub link to the full source code repository at the end of the article.
Staggered GridView
If you have been following the article closely, you must have noticed somewhere I mentioned that the images which we used are of both portrait as well as landscape orientations. You can look into assets/images folder to check out all the images that have been used in the example.
If you take a look at the output, we can see that the images are cropped to fit the dimensions we specified. What if we want to display the complete images, both portrait as well as the landscape ones in a staggered manner? Luckily we have a package for that!
So let’s start off by adding the flutter_staggered_grid_view package to our pubspec.yaml file:
dependencies:
flutter_staggered_grid_view: ^0.3.2Let’s run the following command in the terminal to install it:
$ flutter pub getThe next step is to import the package:
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';Similar to the GridView, the StaggeredGridView as various constructors. The one which we will be using here is the countBuilder constructor.
Most of the parameters are the same as that of the GridView.count and GridView.builder constructors. Here we have an extra staggeredTileBuilder parameter which is a function that takes and integer index as the parameter and returns a StaggeredTile . Here we use the fit constructor as we want a variable extent that is defined by the content of the tile itself.
Other constructors are:
StaggeredTile.count— for fixed number of cellsStaggeredTile.extent— for fixed extent
Notice that the Tile constructors are similar to that of the GridView’s constructors.
This will produce the following output:
Conclusion
In this article, we saw how to use GridView in Flutter and how we can create a Staggered GridView with the help of a simple package.
Although this is not an exhaustive tutorial but I hope it will definitely help you get started with using Grid layouts in Flutter.
The complete source code can be found on the link below:
