Flutter displays GridView Item in a grid pattern

https://www.youtube.com/watch?v=dfks5PTlWIk

I will write how to display items of grid in a grid like this.

Introducing the plug-in

flutter_staggered_grid_viewI will introduce the plugin called .

https://pub.dartlang.org/packages/flutter_staggered_grid_view

pubspec.yml Edit as usual.

flutter_staggered_grid_view: ^0.2.2

Implementation

Although there are multiple mounting methods, we will not introduce everything, but basically it will be an implementation method like adding one time to using GridView.

Paste the reproduction code of youtube movie that you put first on the first .

Widget _imageGrid () {
    return StreamBuilder(
      stream: Firestore.instance.collection("group")
          .document(widget.groupId)
          .collection("group_item")
          .orderBy("updated_at", descending: true)
          .snapshots(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) return Container();
        return CustomScrollView(
          slivers: <Widget>[
            SliverStaggeredGrid.countBuilder(
              crossAxisCount: 2,
              itemBuilder: (context, index) {
                DocumentSnapshot documentSnapshot =
                    snapshot.data.documents[index];
                return _gridItem(documentSnapshot);
              },
              staggeredTileBuilder: (int index) => const StaggeredTile.fit(1),
              itemCount: snapshot.data.documents.length,
            ),
          ],
        );
      },
    );
  }

I will explain it one after another. In this project we are StreamBuilder using because it is retrieving data from Firebase’s Cloud Firestore and displaying it on the screen.

return CustomScrollView(

CustomScrollView I think that it is because you are using the method of Sliver ~~~ inside, probably wrapping in this part . Let’s specify this as the route as it will crash without this.

SliverStaggeredGrid.countBuilder

I am using this source code, SliverStaggeredGrid.countBuilder but this is GridView the same as how to use here, let’s use properly depending on the situation. It delegate is the same implementation as in GridView .

staggeredTileBuilder: (int index) => const StaggeredTile.fit(1), Attributes are used, but various methods are prepared here as well.

This is written properly in ReadMe.

A StaggeredGridView needs to know how to display each tile, and what widget is associated with a tile.

A tile needs to have a fixed number of cell to occupy in the cross axis. For the extent in the main axis you have 3 options:

・You want a fixed number of cells => use StaggeredTile.count.
・You want a fixed extent => use StaggeredTile.extent.
・You want a variable extent, defined by the content of the tile itself => use StaggeredTile.fit.

Let’s use properly depending on the situation.