CODEWITHSUNDEEP
flutterflutter-sliverstaggered-gridviewcustomscrollview
Arinton Akos
Arinton Akos

Reputation: 165

How to implement staggered grid view with SLIVERS in Flutter?

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

Upvotes: 2

Views: 7541

Answers (4)

AmirahmadAdibi
AmirahmadAdibi

Reputation: 586

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

Upvotes: 5

Yunus Kocatas
Yunus Kocatas

Reputation: 316

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

Upvotes: 1

Yunus Kocatas
Yunus Kocatas

Reputation: 316

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

Upvotes: 1

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63604

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

Upvotes: 3

Related Questions