A Flutter staggered grid view which supports multiple columns with rows of varying sizes.
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:
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.
StaggeredGridView follow the same constructors convention than the GridView.
There are two more constructors:
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:
Please see the Changelog page to know what's recently changed.
Feel free to contribute to this project.
StatefulWidget.createState must return a subtype of State<AutomaticKeepAliveVariableSizeBox>.
Example project for StaggeredGridView
For help getting started with Flutter, view our online documentation.
Add this to your package's pubspec.yaml file:
dependencies: flutter_staggered_grid_view: ^0.2.7
You can install packages from the command line:
$ flutter packages get
Alternatively, your editor might support
flutter packages get.
Check the docs for your editor to learn more.
Now in your Dart code, you can use:
|0.2.7||Jan 10, 2019|
|0.2.6||Jan 8, 2019|
|0.2.5||Dec 19, 2018|
|0.2.4||Nov 15, 2018|
|0.2.3||Oct 21, 2018|
|0.2.2||Jul 21, 2018|
|0.2.1||Jun 10, 2018|
|0.2.0||Jun 9, 2018|
|0.1.4||May 10, 2018|
|0.1.3||Apr 20, 2018|
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
We analyzed this package on Apr 22, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:
Detected platforms: Flutter
References Flutter, and has no conflicting libraries.
The package description is too short. (-20 points)
Add more detail to the
description field of
pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.