How to implement staggered grid view with SLIVERS in Flutter?

Question

I want to implement a Staggered GridView, because my SliverGrid delegate requires an aspect ratio, and I want the grid items to be dynamically sized which is only possible with staggered gridview as far as I know.

My question is how can I implement a staggered gridview and use it in my CustomScrollView as a sliver?

---

Edit:

My pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  flutter_staggered_grid_view: ^0.5.1
  ...other packages

Solution

For Update version wrap GridView with SliverToBoxAdapter and set gridView physics to NeverScrollableScrollPhysics because CustomScrollView will handle scroll event.

SliverToBoxAdapter(
  child: GridView.custom(
    shrinkWrap: true,
    physics: const NeverScrollableScrollPhysics(),

Test Widget

Scaffold(
          body: CustomScrollView(
        slivers: [
          const SliverAppBar(
            title: Text("title"),
          ),
          SliverToBoxAdapter(
            child: GridView.custom(
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              gridDelegate: SliverQuiltedGridDelegate(
                crossAxisCount: 4,
                mainAxisSpacing: 4,
                crossAxisSpacing: 4,
                repeatPattern: QuiltedGridRepeatPattern.inverted,
                pattern: const [
                  QuiltedGridTile(2, 2),
                  QuiltedGridTile(1, 1),
                  QuiltedGridTile(1, 1),
                  QuiltedGridTile(1, 2),
                ],
              ),
              childrenDelegate: SliverChildBuilderDelegate(
                (context, index) => Container(
                  color: Colors.cyanAccent,
                  child: Text("$index"),
                ),
                childCount: 44,
              ),
            ),
          )
        ],
      )),

flutter_staggered_grid_view: ^0.4.1 provides SliverStaggeredGrid to use as sliver's child.

 CustomScrollView(
   slivers: [
     SliverStaggeredGrid.countBuilder(...

Comments

[Arinton Akos]

The documentatin specifies that: "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."

[Yeasin Sheikh]

Did you try SliverStaggeredGrid.countBuilder to archive your UI?

[Arinton Akos]

Yes I did try and I had no SliverStaggeredGrid class, however I added flutter_staggered_grid_view to my pubspec.yaml file, ran pub get, and imported the package.

[Yeasin Sheikh]

Seems it has been removed on v0.5.1 you can switch to 0.4.1, I will try different approach with current version.