A customization of gridview is the StaggeredGridView, a version that renders staggered grid. This type of widget seems more suitable to some type of apps, especially those that list movies or products, as usually the images or even the descriptions of such items tend to be of different lengths.

Thus this tutorial shows you how to implement staggeredGridView in a step by step manner using third party packages.

Here is a demo of staggered Gridview:

StaggeredGridView using flutter_staggered_grid_view

flutter_staggered_grid_view is a Flutter staggered grid view which supports multiple columns with rows of varying sizes.

Here are it's features:

  • Configurable cross-axis count or max cross-axis extent like the GridView.
  • Tiles can have a fixed main-axis extent, or a multiple of the cell's length.
  • Configurable main-axis and cross-axis margins between tiles.
  • SliverStaggeredGrid for using in a CustomScrollView.
  • Staggered and Spannable grid layouts.

Step 1: Create Flutter Project

Start by creating a flutter project in your favorite IDE or Editor.

Step 2: Add dependency

Because this is a third party dependency, it has to be installed. Do that by declaring this package as a dependency under the dependences in your pubspec.yaml, as follows:

dependencies:
  flutter_staggered_grid_view: 0.4.0

Sync or execute flutter pub get to fetch it.

Step 3: Import the package

Import the package:

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

Step 4: Create StaggeredGridView

The StaggeredGridView follow the same constructors convention than the GridView.
There are two more constructors: countBuilder and extentBuilder. These constructors allow you to define a builder for the layout and a builder for the children.

So to create a StaggeredGridView, instantiate it, then invoke the countBuilder passing in the crossAxisCount, itemCount and itemBuilder as follows:

new StaggeredGridView.countBuilder(
  crossAxisCount: 4,
  itemCount: 8,
  itemBuilder: (BuildContext context, int index) => new Container(
      color: Colors.green,
      child: new Center(
        child: new CircleAvatar(
          backgroundColor: Colors.white,
          child: new Text('$index'),
        ),
      )),
  staggeredTileBuilder: (int index) =>
      new StaggeredTile.count(2, index.isEven ? 2 : 1),
  mainAxisSpacing: 4.0,
  crossAxisSpacing: 4.0,
)

Here is what you will get:

Full StaggeredGridView Examples

Example 1 - StaggeredGridView with Colorized Grids containing Icons

This is a simple example containing icons. The Grids are colorized.

Here is the full code:

example1.dart

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

const List<StaggeredTile> _staggeredTiles = <StaggeredTile>[
  StaggeredTile.count(2, 2),
  StaggeredTile.count(2, 1),
  StaggeredTile.count(1, 2),
  StaggeredTile.count(1, 1),
  StaggeredTile.count(2, 2),
  StaggeredTile.count(1, 2),
  StaggeredTile.count(1, 1),
  StaggeredTile.count(3, 1),
  StaggeredTile.count(1, 1),
  StaggeredTile.count(4, 1),
];

const List<Widget> _tiles = <Widget>[
  _Example01Tile(Colors.green, Icons.widgets),
  _Example01Tile(Colors.lightBlue, Icons.wifi),
  _Example01Tile(Colors.amber, Icons.panorama_wide_angle),
  _Example01Tile(Colors.brown, Icons.map),
  _Example01Tile(Colors.deepOrange, Icons.send),
  _Example01Tile(Colors.indigo, Icons.airline_seat_flat),
  _Example01Tile(Colors.red, Icons.bluetooth),
  _Example01Tile(Colors.pink, Icons.battery_alert),
  _Example01Tile(Colors.purple, Icons.desktop_windows),
  _Example01Tile(Colors.blue, Icons.radio),
];

class Example01 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('example 01'),
        ),
        body: Padding(
            padding: const EdgeInsets.only(top: 12),
            child: StaggeredGridView.count(
              crossAxisCount: 4,
              staggeredTiles: _staggeredTiles,
              mainAxisSpacing: 4,
              crossAxisSpacing: 4,
              padding: const EdgeInsets.all(4),
              children: _tiles,
            )));
  }
}

class _Example01Tile extends StatelessWidget {
  const _Example01Tile(this.backgroundColor, this.iconData);

  final Color backgroundColor;
  final IconData iconData;

  @override
  Widget build(BuildContext context) {
    return Card(
      color: backgroundColor,
      child: InkWell(
        onTap: () {},
        child: Center(
          child: Padding(
            padding: const EdgeInsets.all(4),
            child: Icon(
              iconData,
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}

Run it and you will get the following:

Example 2 - StaggeredGridView with Numbers

Here is the second StaggeredGridView Example. The Grids will contain numbers.

example2.dart

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

class Example02 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('example 02'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(4),
        child: StaggeredGridView.countBuilder(
          crossAxisCount: 4,
          itemCount: 8,
          itemBuilder: (BuildContext context, int index) => Container(
              color: Colors.green,
              child: Center(
                child: CircleAvatar(
                  backgroundColor: Colors.white,
                  child: Text('$index'),
                ),
              )),
          staggeredTileBuilder: (int index) =>
              StaggeredTile.count(2, index.isEven ? 2 : 1),
          mainAxisSpacing: 4,
          crossAxisSpacing: 4,
        ),
      ),
    );
  }
}

Run it and you will get the following:

Reference

Download the full code below. It contains lots of examples.

Number Link
1. Download Examples
2. Read more
3. Follow package author