Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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]);
  },
);
like image 846
Jakob Kristensen Avatar asked Oct 29 '17 14:10

Jakob Kristensen


1 Answers

Wrap SliverGrid by CustomScrollView:

return new CustomScrollView(slivers: <Widget>[
  new SliverGrid(
    gridDelegate: yourGridDelegate,
    delegate: yourBuilderDelegate,
  ),
  new SliverToBoxAdapter(
    child: yourFooter,
  ),
]);
like image 54
najeira Avatar answered Nov 10 '22 09:11

najeira