If you’re a fan of Flutter and like to explore Mediums’ article collection, then you’ve probably seen Romain Rastel’s Flutorial on creating a Staggered Gridview. He begins the article with a nod to Pinterest’s layout, but the code sample provided demonstrates icon grids with colored backgrounds. I made some changes to his code in order to recreate the Pinterest effect.

You can clone this project from the Github repo that I created here. The full main.dart file is also available at the bottom of this article, for easy reference.

Step 1: Create a new flutter project. Open the pubspec.yaml file at the top level of your directory and add flutter_staggered_grid_view to the dependencies. Run flutter packages get to install the package:

dependencies:

flutter:

sdk: flutter

flutter_staggered_grid_view:

Step 2: Open your main.dart file and import the flutter_staggered_grid_view package. Romain’s tutorial provided a code snippet, but not a full file. To speed up the learning process, I will provide the full main.dart code here for his original example.

import 'package:flutter/material.dart';

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget {

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return new MaterialApp(

title: 'Flutter Demo',

theme: new ThemeData(

primarySwatch: Colors.blue,

),

home: new Example01(),

);

}

} List<StaggeredTile> _staggeredTiles = const <StaggeredTile>[

const StaggeredTile.count(2, 2),

const StaggeredTile.count(2, 1),

const StaggeredTile.count(1, 2),

const StaggeredTile.count(1, 1),

const StaggeredTile.count(2, 2),

const StaggeredTile.count(1, 2),

const StaggeredTile.count(1, 1),

const StaggeredTile.count(3, 1),

const StaggeredTile.count(1, 1),

const StaggeredTile.count(4, 1),

]; List<Widget> _tiles = const <Widget>[

const _Example01Tile(Colors.green, Icons.widgets),

const _Example01Tile(Colors.lightBlue, Icons.wifi),

const _Example01Tile(Colors.amber, Icons.panorama_wide_angle),

const _Example01Tile(Colors.brown, Icons.map),

const _Example01Tile(Colors.deepOrange, Icons.send),

const _Example01Tile(Colors.indigo, Icons.airline_seat_flat),

const _Example01Tile(Colors.red, Icons.bluetooth),

const _Example01Tile(Colors.pink, Icons.battery_alert),

const _Example01Tile(Colors.purple, Icons.desktop_windows),

const _Example01Tile(Colors.blue, Icons.radio),

]; class Example01 extends StatelessWidget {

@override

Widget build(BuildContext context) {

return new Scaffold(

appBar: new AppBar(

title: new Text('Example 01'),

),

body: new Padding(

padding: const EdgeInsets.only(top: 12.0),

child: new StaggeredGridView.count(

crossAxisCount: 4,

staggeredTiles: _staggeredTiles,

children: _tiles,

mainAxisSpacing: 4.0,

crossAxisSpacing: 4.0,

padding: const EdgeInsets.all(4.0),

)));

}

} class _Example01Tile extends StatelessWidget {

const _Example01Tile(this.backgroundColor, this.iconData); final Color backgroundColor;

final IconData iconData; @override

Widget build(BuildContext context) {

return new Card(

color: backgroundColor,

child: new InkWell(

onTap: () {},

child: new Center(

child: new Padding(

padding: const EdgeInsets.all(4.0),

child: new Icon(

iconData,

color: Colors.white,

),

),

),

),

);

}

}

Screenshot of Romain Rastel’s staggered grid demo on iOS.

Above is Romain’s original code verbatim, incorporated into a working main.dart context. Next we will refactor the code to demonstrate how you can customize his plugin to emulate the Pinterest effect.

STEP 3: The first refactor I want to demonstrate is for developers who want to pull in an image asset. For example, you may have .png transparencies that you want to use as an alternative to icons. I will use the flutter logo as an example of how to incorporate image assets.

Begin by creating an images folder and dropping your transparency into it.

Flutter Logo Transparency (img1.png)

# PUBSPEC.YAML flutter:

uses-material-design: true

assets:

- images/img1.png

Add the image asset to your pubspec.yaml file as shown above.

Next, in the main.dart file shown below, we create a const (e.g. imageOne) set to the image path. As you can see, each _Example01Tile receives the imageOne logo as its second argument.

Within the _Example01Tile StatelessWidget, imageOne takes on the name gridImage. At the bottom, the new Image.asset takes gridImage as an argument. The result is that our flutter icon gets passed through all of the grid tiles.