How to achieve scrollable grid view exactly like in this photo using flutter

Question

Staggered Grid View can achieve sizing and everything, but it always starts placing items from the top, just under app bar. How to achieve to add that text (Found 10 items for example) and then start displaying items in grid view?

Answer 1

If you look at the GridView of the image, you will find a pattern.

On itemCount: pass itemLength+1. This extra 1 will be help to insert Text.

TO build this GridView use StaggeredGridView.countBuilder

 StaggeredGridView.countBuilder(
        crossAxisCount: 2,
        shrinkWrap: true,
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
        itemCount: 10,
        itemBuilder: (context, index) {
          return index == 0
              ? Center(child: Text("Item s "))
              : Container(
                  color: index.isEven ? Colors.amber : Colors.deepPurple,
                  alignment: Alignment.center,
                  child: Text("$index s"),
                );
        },
        staggeredTileBuilder: (index) {
          return index == 0
              ? StaggeredTile.count(1, .3) //For Text
              : StaggeredTile.count(1, 1); // others item
        },
      ),

TO learn more about flutter_staggered_grid_view.

Pattern draw sorry for the bad drawing, hope you got the concept now.