flutter_staggered_grid_view 0.1.2

  • README.md
  • Example
  • Installing
  • Versions
  • new90


A Flutter staggered grid view which supports multiple columns with rows of varying sizes.




  • 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.

Screenshot Screenshot

Getting started

In the pubspec.yaml of your flutter project, add the following dependency:

  flutter_staggered_grid_view: "^0.1.2"

In your library add the following import:

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

For help getting started with Flutter, view the online documentation.



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,

You can find more examples in the Example project.


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.


Please see the Changelog page to know what's recently changed.


Feel free to contribute to this project.

If you find a bug or want a feature, but don't know how to fix/implement it, please fill an issue.
If you fixed a bug or implemented a new feature, please send a pull request.


  • Fix images in readme
  • Add dynamic resizing demo


  • Initial Open Source release


import 'package:flutter/material.dart';

import 'routes.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'StaggeredGridView Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      routes: routes,

1. Depend on it

Add this to your package's pubspec.yaml file:

  flutter_staggered_grid_view: "^0.1.2"

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter packages get

Alternatively, your editor might support packages get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
Version Uploaded Documentation Archive
0.1.2 Mar 12, 2018 Go to the documentation of flutter_staggered_grid_view 0.1.2 Download flutter_staggered_grid_view 0.1.2 archive
0.1.1 Feb 21, 2018 Go to the documentation of flutter_staggered_grid_view 0.1.1 Download flutter_staggered_grid_view 0.1.1 archive
0.1.0 Feb 19, 2018 Go to the documentation of flutter_staggered_grid_view 0.1.0 Download flutter_staggered_grid_view 0.1.0 archive


We analyzed this package on Mar 12, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0-dev.31.0
  • pana: 0.10.3
  • Flutter: 0.1.7


Describes how popular the package is relative to other packages. [more]
80 / 100
Code health derived from static analysis. [more]
100 / 100
Reflects how tidy and up-to-date the package is. [more]
100 / 100
Overall score:
Weighted score of the above. [more]
Learn more about scoring.


Detected platforms: Flutter

References Flutter, and has no conflicting libraries.


  • The description is too short.

    Add more detail about the package, what it does and what is its target use case. Try to write at least 60 characters.

  • Package is pre-v1 release.

    While there is nothing inherently wrong with versions of 0.*.*, it usually means that the author is still experimenting with the general direction API.

  • Fix issues reported by dartanalyzer or dartfmt.

    dartanalyzer or dartfmt reported 3 hints.

    Run dartfmt to format lib/src/sliver.dart.

    Run dartfmt to format lib/src/sliver_staggered_grid.dart.

    Similar analysis of the following files failed:

    • lib/src/staggered_grid_view.dart (hint)


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.19.0 <2.0.0
flutter 0.0.0
Transitive dependencies
async 2.0.6
charcode 1.1.1
collection 1.14.5 1.14.6
http 0.11.3+16
http_parser 3.1.1
meta 1.1.2
path 1.5.1
sky_engine 0.0.99
source_span 1.4.0
string_scanner 1.0.2
typed_data 1.1.5
vector_math 2.0.5
Dev dependencies
test ^0.12.0