flutter_staggered_grid_view 0.3.2

Flutter Android iOS web

A Flutter staggered grid view (masonry tiles) which supports multiple columns with rows of varying sizes

flutter_staggered_grid_view #

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

Pub Donate

Screenshot

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.

Screenshot Screenshot

  • Tiles can fit the content in the main axis.

Screenshot

Getting started #

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

dependencies:
  ...
  flutter_staggered_grid_view: "^0.3.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.

Example #

Screenshot_Example

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.

Constructors #

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.

Tiles #

A StaggeredGridView needs to know how to display each tile, and what widget is associated with a tile.

A tile needs to have a fixed number of cell to occupy in the cross axis. For the extent in the main axis you have 3 options:

  • You want a fixed number of cells => use StaggeredTile.count.
  • You want a fixed extent => use StaggeredTile.extent.
  • You want a variable extent, defined by the content of the tile itself => use StaggeredTile.fit.

Changelog #

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

Contributions #

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.

438
likes
110
pub points
99%
popularity

Publisher

romainrastel.com

A Flutter staggered grid view (masonry tiles) which supports multiple columns with rows of varying sizes

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on flutter_staggered_grid_view