gridviewscrolldartinfinite-scrollflutter

Flutter GridView footer (for indicating load with infinite scrolling)


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

Solution

  • Wrap SliverGrid by CustomScrollView:

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