flutter_staggered_grid_view

[![Pub][pub_badge]][pub] [![BuyMeACoffee][buy_me_a_coffee_badge]][buy_me_a_coffee]


# flutter_staggered_grid_view
Provides a collection of Flutter grids layouts.

## Getting started

In the `pubspec.yaml` of your flutter project, add the following dependency:

```yaml
dependencies:
  ...
  flutter_staggered_grid_view: <latest_version>
```

In your library add the following import:

```dart
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
```

For help getting started with Flutter, view the online [documentation][flutter_documentation].

## Layouts

This package contains various grid layouts. In the following section, you'll discover each one of them.
The explanation of the layout will always considered a top-to-bottom and left-to-right directions to simplify the description. However it is possible to change these directions in the code. 

In the examples below, `Tile` is not part of the package: it's a simple widget of the [example app](example/lib/common.dart), which you can replace with your own widgets. The example app shows each layout in action.

### **Staggered**
![Staggered Grid Layout][staggered_preview]

This layout is intended for a small number of items. 
I didn't find, for the moment, a performant algorithm which would work in a `Sliver` context, that's why this is not a GridView and therefore there are no `SliverStaggeredGrid`.

#### **Grid properties**
- Evenly divided in *n* columns
- Small number of items
- Not scrollable

#### **Tile properties**
- Must occupy 1 to *n* columns
- Its main axis extent can be:
  - a number of cells, which can be fractional, with `StaggeredGridTile.count`;
  - a fixed extent, with `StaggeredGridTile.extent`;
  - the extent of its content, with `StaggeredGridTile.fit`.

#### **Placement algorithm**
- Top-most and then left-most (`StaggeredGridPlacement.dense`, the default): a tile can fill a hole left before a previous tile, so the tiles may not appear in their order.
- With `placement: StaggeredGridPlacement.sparse`, each tile is placed after the previous one, in the reading order: the tiles appear in their order, and the holes are left empty.

#### **Example**
Below you'll find the code to create this grid layout:

![Staggered example][staggered_example]

```dart
StaggeredGrid.count(
  crossAxisCount: 4,
  mainAxisSpacing: 4,
  crossAxisSpacing: 4,
  children: const [
    StaggeredGridTile.count(
      crossAxisCellCount: 2,
      mainAxisCellCount: 2,
      child: Tile(index: 0),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 2,
      mainAxisCellCount: 1,
      child: Tile(index: 1),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 1,
      mainAxisCellCount: 1,
      child: Tile(index: 2),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 1,
      mainAxisCellCount: 1,
      child: Tile(index: 3),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 4,
      mainAxisCellCount: 2,
      child: Tile(index: 4),
    ),