Flutter GridView footer (for indicating load with infinite scrolling)

Question

I have a GridView which works pretty smooth. I use the grid in the context of infinite scrolling where more items are loaded via a REST API whenever scrolling is close to the bottom. No problems here.

However I want to be able to display a loading indicator at the bottom of the grid. This Widget should span all columns in the grid, but should still be a part of the scrollable content.

I am new to Flutter and lost as how to achieve this.

My (working) GridView is instantiated like so:

return new GridView.builder(
  gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: _COLUMN_COUNT),
  controller: widget.scrollController,
  itemCount: widget.items.length,
  itemBuilder: (BuildContext context, int index) {
    return new _ItemView(item: widget.items[index]);
  },
);

Answer 1

Wrap SliverGrid by CustomScrollView:

return new CustomScrollView(slivers: <Widget>[
  new SliverGrid(
    gridDelegate: yourGridDelegate,
    delegate: yourBuilderDelegate,
  ),
  new SliverToBoxAdapter(
    child: yourFooter,
  ),
]);

Answer 2

I am not sure in which manner you are building your layout, regardless, I know it is a little different than what you were thinking of, but this sounds to me like a good use case for CircularProgressIndicator.

Note in my case it keeps loading because my snapshot.hasData is always false. Whenever your data is loaded it will replace the ProgressIndicator with whatever data you originally intend to inject inside your widgets.

@override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(title: new Text("GridView Test"),
        ),
        body: new FutureBuilder(future: _getAsyncStuff(),
            builder: (BuildContext context,
                AsyncSnapshot<DataSnapshot> snapshot) {
              return new GridView.builder(
                  gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 3),
                  itemBuilder: (BuildContext context, int index) {
                    return new Card(child:
                    !snapshot.hasData ? new CircularProgressIndicator(
                      strokeWidth: 0.8,) : new Text("Snapshot data#$index")
                    );
                  });
            })

    );
  }
}