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:

Staggered grid layout from 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).