A Flutter staggered grid view which supports multiple columns with rows of varying sizes.
In the pubspec.yaml
of your flutter project, add the following dependency:
dependencies: ... flutter_staggered_grid_view: "^0.2.7"
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.
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:
StaggeredTile.count
.StaggeredTile.extent
.StaggeredTile.fit
.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.