grid_staggered_lite

Description:

grid staggered lite

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



Getting started #
In the pubspec.yaml of your flutter project, add the following dependency:
dependencies:
...
grid_staggered_lite: <latest_version>
copied to clipboard
In your library add the following import:
import 'package:grid_staggered_lite/grid_staggered_lite.dart';
copied to clipboard
For help getting started with Flutter, view the online documentation.
//make a StaggeredTile list
const List<StaggeredTile> _staggeredTiles = <StaggeredTile>[
StaggeredTile.count(1, 1),
StaggeredTile.count(1, 1),
StaggeredTile.count(2, 1),
StaggeredTile.count(1, 1),
StaggeredTile.count(1, 1),
StaggeredTile.count(2, 1),
];

copied to clipboard




new StaggeredGridView.count(
crossAxisCount: 2,
staggeredTiles: _staggeredTiles,
mainAxisSpacing: 4,
crossAxisSpacing: 4,
padding: const EdgeInsets.all(4),
children: [
Card(
color: Colors.yellow,
child: Center(child: Text("AB")),
),
Card(
color: Colors.green,
child: Center(child: Text("CD ")),
),
Card(
color: Colors.blue,
child: Center(child: Text("EF ")),
),
Card(
color: Colors.blue,
child: Center(child: Text("GH ")),
),
Card(
color: Colors.blue,
child: Center(child: Text("IJ ")),
),
Card(
color: Colors.blue,
child: Center(child: Text("KL "
)
),
)]
,
)
copied to clipboard
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.