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
.
Comments are closed.