flutter_staggered_grid_view

To use this package, add it to your pubspec.yaml dependencies:

dependencies:
  ...
  flutter_staggered_grid_view: <latest_version>

Then, import it in your Dart files:

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

To change the launch screen image for the iOS version of the example app, you can either:

1. Replace the image files directly in the examples/ios/Runner/Assets.xcassets/LaunchImage.imageset/ directory.
2. Open the iOS project in Xcode using open ios/Runner.xcworkspace, navigate to Runner/Assets.xcassets in the Project Navigator, and drag and drop your new images into the asset catalog.

The MasonryGridView widget provides a scrollable, 2D array of widgets arranged in a masonry layout. It is a high-level widget that wraps a SliverMasonryGrid inside a CustomScrollView.

Common usage patterns include:

• Fixed number of columns: Use MasonryGridView.count with a crossAxisCount.
• Maximum column width: Use MasonryGridView.extent with a maxCrossAxisExtent.
• Large/Infinite lists: Use MasonryGridView.builder to create items on demand.
• Custom layouts: Use MasonryGridView with a custom gridDelegate or MasonryGridView.custom for full control over both the grid delegate and the children delegate.

The AlignedGridView widget provides a scrollable, 2D array of widgets arranged in an aligned layout. It is a high-level widget that wraps a CustomScrollView containing a SliverAlignedGrid.

There are three primary ways to instantiate it:

1. AlignedGridView.count: Creates a grid with a fixed number of tiles in the cross axis.
2. AlignedGridView.extent: Creates a grid where tiles have a maximum cross-axis extent (useful for responsive layouts).
3. AlignedGridView.custom: Allows you to provide a custom SliverSimpleGridDelegate for arbitrary 2D arrangements.

Common properties include mainAxisSpacing, crossAxisSpacing, itemCount, and itemBuilder.

If you need to combine the grid with other slivers (like SliverAppBar or SliverList), you can port your AlignedGridView to a CustomScrollView.

An AlignedGridView is essentially a CustomScrollView with a single SliverAlignedGrid in its slivers property.

Mapping guide:

• AlignedGridView.count $\rightarrow$ SliverAlignedGrid.count
• AlignedGridView.extent $\rightarrow$ SliverAlignedGrid.extent
• padding $\rightarrow$ Wrap the SliverAlignedGrid in a SliverPadding within the CustomScrollView.

If you need to combine a masonry grid with other slivers (like a SliverAppBar or SliverList), you can port MasonryGridView to a CustomScrollView.

Mapping Guide:

• MasonryGridView $\rightarrow$ CustomScrollView with a single SliverMasonryGrid in the slivers list.
• gridDelegate $\rightarrow$ SliverMasonryGrid.gridDelegate.
• childrenDelegate $\rightarrow$ SliverMasonryGrid.delegate.
• padding $\rightarrow$ Wrap the SliverMasonryGrid in a SliverPadding.
• itemBuilder/itemCount $\rightarrow$ Use SliverChildBuilderDelegate inside the SliverMasonryGrid delegate.

The SliverQuiltedGridDelegate is a specific delegate for the built-in GridView (or SliverGrid) widget. It creates hierarchy using varied container sizes and ratios.

Grid Properties:

• Evenly divided into n columns.
• The height of each row is equal to the width of each column.
• A pattern defines tile sizes and repetition modes.

Tile Properties:

• Tiles can occupy 1 to n columns.
• Tiles must occupy 1 or more entire rows.

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

The AlignedGridView (often called CSS Grid) ensures that each item within a track has the maximum cross-axis extent of its siblings.

Grid Properties:

• Evenly divided into n columns.
• Rows can have different heights.

Tile Properties:

• Tiles must occupy exactly 1 column.
• Each tile has the same height as the tallest one in its row.

AlignedGridView.count(
  crossAxisCount: 4,
  mainAxisSpacing: 4,
  crossAxisSpacing: 4,
  itemBuilder: (context, index) {
    return Tile(
      index: index,
      extent: (index % 7 + 1) * 30,
    );
  },
);

The MasonryGridView is designed for browsing content where container heights are determined by the widget size. It is a separate grid (not a SliverGridDelegate) for performance reasons.

Grid Properties:

• Evenly divided into n columns.
• Tiles must occupy exactly 1 column.
• Placement follows a top-most, then left-most algorithm.

MasonryGridView.count(
  crossAxisCount: 4,
  mainAxisSpacing: 4,
  crossAxisSpacing: 4,
  itemBuilder: (context, index) {
    return Tile(
      index: index,
      extent: (index % 5 + 1) * 100,
    );
  },
);