Quilted

Quilted Layout

The Quilted layout is one of the four types of Image lists, showcased in Material Design.

It is implemented as a specific GridDelegate and can be used with the Flutter built-in widgets called SliverGrid and GridView.

GridView.custom(
  gridDelegate: SliverQuiltedGridDelegate(
    crossAxisCount: 4,
    mainAxisSpacing: 4,
    crossAxisSpacing: 4,
    repeatPattern: QuiltedGridRepeatPattern.inverted,
    pattern: [
      QuiltedGridTile(2, 2),
      QuiltedGridTile(1, 1),
      QuiltedGridTile(1, 1),
      QuiltedGridTile(1, 2),
    ],
  ),
  childrenDelegate: SliverChildBuilderDelegate(
    (context, index) => Tile(index: index),
  ),
);

Cross axis count

This is the number of divisions in the cross axis. For example a crossAxisCount of 4, in a vertical direction, means that the grid is divided in 4 columns. By defining this, a grid can be divided into multiple squared cells:

Pattern

The pattern is a list of QuiltedGridTile. Each tile indicates how many cells the tile should take in the main axis and in the cross axis.

For example in a vertical direction, a QuiltedGridTile(1, 2) represents a tile which is one cell high and two cells wide.

Examples

GridView.custom(
  gridDelegate: SliverQuiltedGridDelegate(
    crossAxisCount: 3,
    mainAxisSpacing: 4,
    crossAxisSpacing: 4,
    repeatPattern: QuiltedGridRepeatPattern.inverted,
    pattern: [
      QuiltedGridTile(1, 1),
      QuiltedGridTile(1, 1),
      QuiltedGridTile(1, 1),
      QuiltedGridTile(1, 1),
      QuiltedGridTile(2, 2),
      QuiltedGridTile(1, 1),
      QuiltedGridTile(1, 1),
      QuiltedGridTile(1, 1),
      QuiltedGridTile(1, 1),
    ],
  ),
  childrenDelegate: SliverChildBuilderDelegate(
    (context, index) => Tile(index: index),
  ),
);

GridView.custom(
  gridDelegate: SliverQuiltedGridDelegate(
    crossAxisCount: 3,
    mainAxisSpacing: 4,
    crossAxisSpacing: 4,
    repeatPattern: QuiltedGridRepeatPattern.inverted,
    pattern: [
      QuiltedGridTile(1, 2),
      QuiltedGridTile(2, 1),
      QuiltedGridTile(2, 1),
      QuiltedGridTile(1, 1),
      QuiltedGridTile(1, 1),
      QuiltedGridTile(2, 1),
      QuiltedGridTile(1, 2),
    ],
  ),
  childrenDelegate: SliverChildBuilderDelegate(
    (context, index) => Tile(index: index),
  ),
);

Repeat pattern

The repeat pattern define how the pattern is repeating. There are 3 built-in repeating modes and you can found them in the QuiltedGridRepeatPattern class.

The pattern same

This is the default value. The pattern is repeating in the same order:

The pattern inverted

Indicates to use an inversion symmetry between one run and the next one:

The pattern mirrored

Indicates to use an axial symmetry between one run and the next one:

TextDirection

This layout uses the ambient TextDirection to know if it should create the grid from left-to-right or right-to-left.

Just add a Directionality widget above the GridView (or CustomScrollView) to set the order in which the tiles are rendered.

Directionality(
  textDirection: TextDirection.rtl,
  child: GridView.custom(
    gridDelegate: SliverQuiltedGridDelegate(
      crossAxisCount: 4,
      mainAxisSpacing: 4,
      crossAxisSpacing: 4,
      repeatPattern: QuiltedGridRepeatPattern.inverted,
      pattern: [
        QuiltedGridTile(2, 2),
        QuiltedGridTile(1, 1),
        QuiltedGridTile(1, 1),
        QuiltedGridTile(1, 2),
      ],
    ),
    childrenDelegate: SliverChildBuilderDelegate(
      (context, index) => Tile(index: index),
    ),
  ),
),