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.
- Tiles can fit the content in the main axis.
Getting started #
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:
- You want a fixed number of cells => use
- You want a fixed extent => use
- You want a variable extent, defined by the content of the tile itself => use
Please see the Changelog page to know what's recently changed.
Feel free to contribute to this project.
- Upgrade to AndroidX and fixes the BoxHitTestResult exception (https://github.com/letsar/flutter_staggered_grid_view/issues/49)
- Better fix for the bug where items are built only once.
- Fix a bug where items are built only once.
- Use the new SliverWithKeepAliveWidget.
- Dart 2.1 mixin support.
- Fix the rtl support (https://github.com/letsar/flutter_staggered_grid_view/issues/17).
- Add Dart 2 support.
- Fix #10
StatefulWidget.createState must return a subtype of State<AutomaticKeepAliveVariableSizeBox>.
- Add a way to let the tile's content to define the tile's extent in the main axis.
- Remove Flutter SDK constraint
- Remove update Flutter SDK constraint
- Fix images in readme
- Add dynamic resizing demo
- Initial Open Source release
Example project for StaggeredGridView
Getting Started #
For help getting started with Flutter, view our online documentation.
Use this package as a library
1. Depend on it
Add this to your package's pubspec.yaml file:
dependencies: flutter_staggered_grid_view: ^0.3.0
2. Install it
You can install packages from the command line:
$ flutter pub get
Alternatively, your editor might support
flutter pub get.
Check the docs for your editor to learn more.
3. Import it
Now in your Dart code, you can use:
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 Oct 21, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:
- Dart: 2.5.1
- pana: 0.12.21
- Flutter: 1.9.1+hotfix.4
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.