grid_staggered_lite 0.0.6

A Flutter staggered grid view (masonry tiles) which supports multiple columns with rows of varying sizes

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>

In your library add the following import:

import 'package:grid_staggered_lite/grid_staggered_lite.dart';

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),
];

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 "
           )
            ),
            )]
            ,
  )

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.