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

Md. Yeasin Sheikh · Accepted Answer · 2022-01-01T14:35:27.050

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(...

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." — Arinton Akos, Jan 01 '22 at 13:33
Did you try `SliverStaggeredGrid.countBuilder` to archive your UI? — Md. Yeasin Sheikh, Jan 01 '22 at 13:35
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. — Arinton Akos, Jan 01 '22 at 13:41
Seems it has been removed on `v0.5.1` you can switch to `0.4.1`, I will try different approach with current version. — Md. Yeasin Sheikh, Jan 01 '22 at 13:59

score 3 · Answer 2 · answered Aug 02 '22 at 15:35

Big Mistake never use shrinkWrap(when you have alot of items) in your list(performance issues).

2022 Update version flutter staggered has updated itself and removed SliverStaggeredGrid in the new version, you can use QuiltedGridDelegate. like this:

      CustomScrollView(
      slivers: [
        SliverGrid(
            delegate: SliverChildBuilderDelegate(
              (context, index) => Container(
                color: Colors.cyanAccent,
                child: Text("$index"),
              ),
              childCount: 44,
            ),
            gridDelegate: SliverQuiltedGridDelegate(
              crossAxisCount: 3,
              mainAxisSpacing: 4,
              crossAxisSpacing: 4,
              repeatPattern: QuiltedGridRepeatPattern.inverted,
              pattern: const [
                QuiltedGridTile(2, 1),
                QuiltedGridTile(2, 2),
                QuiltedGridTile(1, 1),
                QuiltedGridTile(1, 1),
                QuiltedGridTile(1, 1),
              ],
            ))
      ],
    ),

score 0 · Answer 3 · answered Jan 01 '22 at 14:51

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Dene());
  }
}

class Dene extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            Expanded(
              child: StaggeredGridView.countBuilder(
                mainAxisSpacing: 16,
                crossAxisSpacing: 16,
                crossAxisCount: 2,
                itemCount: 22,
                itemBuilder: (context, index) {
                  return Container(
                    width: 200,
                    height: 100,
                    color: Colors.red,
                  );
                },
                staggeredTileBuilder: (index) {
                  return StaggeredTile.fit(1);
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

score 0 · Answer 4 · answered Jan 01 '22 at 14:55

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

void main() => runApp(Dene());

class Dene extends StatelessWidget {
  const Dene({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyApp(),
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            Expanded(
              child: StaggeredGridView.countBuilder(
                crossAxisCount: 4,
                itemCount: 22,
                itemBuilder: (BuildContext context, int index) => new Container(
                    color: Colors.green,
                    child: new Center(
                      child: new CircleAvatar(
                        backgroundColor: Colors.white,
                        child: new Text('$index'),
                      ),
                    )),
                staggeredTileBuilder: (int index) =>
                    new StaggeredTile.count(2, index.isEven ? 2 : 1),
                mainAxisSpacing: 4.0,
                crossAxisSpacing: 4.0,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

How to implement staggered grid view with SLIVERS in Flutter?

4 Answers4

Linked