Flutorial: Create a Staggered GridView

Bring the StaggeredGridView to Flutter

4 min readFeb 19, 2018

What is it?

It’s a grid layout where the cross axis is divided in multiple equally sized parts, and places elements in optimal position based on available main axis space.

You’ve probably came across some app or website design with staggered grid layout like Pinterest:

In the above image, all tiles have the same width, but it’s not mandatory.
We can have a layout that looks like a Metro Grid style:

Windows 10 Mobile grid layout (https://www.microsoft.com/en-us/windows/phones)

I looked for the different kind of grid layout in Flutter but I did not find this one. Maybe I’ve searched badly, but it led me to wonder what it would take to create a Staggered Grid Layout with Flutter?

I read the source code of the GridView and I coded my own StaggeredGridView! I even made it a package: flutter_staggered_grid_view.
I based my solution on the principles of the GridView so if you played with it, you should not be lost.

In order to use this package, you must add it to your dependencies in the pubspec.yaml of your Flutter project:

dependencies:
  ...
  flutter_staggered_grid_view:

What type of grid layouts can I build with this package?

Like the GridView, the StaggeredGridView has a count constructor and an extent constructor. The goal is the same:
- With the count constructor, you can define the number of tiles in the cross-axis.
- With the extent constructor, you can define the maximum cross-axis extent of each tile.

For each layout below, you will have at the left, a grid created with the count constructor and at the right, a grid view created with the extent constructor.
You can see that the number of tiles in the cross-axis is different when we rotate the screen and used the extent constructor.

Staggered grid layout

In a staggered grid layout, each tile as the same width (like Pinterest).

**Left**: always two columns. **Right**: the number of columns changes.

Spannable grid layout

Tiles can have different widths (like Metro Grid).

**Left**: always four columns. **Right**: the number of columns changes.

Some code please?

Now that you know what you can do with the StaggeredGridView, I will show you the code to create a grid like this one:

To help you to understand the code, you can see that this grid of 10 tiles is divided into 4 columns:

**Left**: The cells behind the tiles. **Right**: The index of each tile along with its size.

The code used to create the above layout

In this code we separate the actual children and the layout of each tile into different lists:
The _tiles list contains the children, and the _staggeredTiles contains objets indicating to each child the number of columns and rows it will take.

The StaggeredTile.count(c,r) constructor indicates to create a tile of c columns and r rows.

The StaggeredGridView.count creates this grid layout. We specified here the number of columns (4), the children and their layout disposition, and the spacing in main axis and cross axis.

If you want more information, feel free to read the GitHub page.

Conclusion

It was very pleasant to implement this layout with Flutter. The SDK is very well documented and organized 👍, don’t be afraid to read the code.

Now it’s up to you to create beautiful apps, I hope this package will be helpful.

Feedbacks are welcome 😃. If you find bugs please issue them in the GitHub issues page.