A Flutter staggered grid view which supports multiple columns
flutter_staggered_grid_view
A Flutter staggered grid view which supports multiple columns with rows of varying sizes.
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.
- Tiles can fit the content in the main axis.
Getting started
In the pubspec.yaml of your flutter project, add the following dependency:
dependencies:
...
flutter_staggered_grid_view: "^0.2.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
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.