Infinite Scrolling in GridView.builder

Question

I am Building a flutter e-commerce application. And in the Categories section. There are so much data so I want to implement pagination through infinite scrolling.

This is what I am trying to do, CatHome object is the category either men or women etc.

the code is resulting in pagination, but everytime it is building another page, not infinite scroll. so i cannot access previosly loaded data

class CategoryDetail extends StatefulWidget {
  CatHome catHome;
  CategoryDetail(this.catHome);
  @override
  _CategoryDetailstate createState() => _CategoryDetailstate(catHome);
}

class _CategoryDetailstate extends State<CategoryDetail> {
  List<FutureOr> _items = [];
  CatHome catHome;
  _CategoryDetailstate(this.catHome);
  var _currentPage = 1;
  ScrollController scroll = ScrollController();

  var _hasMore = true;
  @override
  void initState() {
    super.initState();
    scroll.addListener(() {
      if (scroll.position.pixels == scroll.position.maxScrollExtent) {
        _fetchMore();
      }
    });
  }

  @override
  void dispose() {
    scroll.dispose();
    super.dispose();
  }

  void _fetchMore() async {
    if (_hasMore) {
      setState(() {
        _currentPage++;
      });
      var newItems =
          await new catitems_api().fetchdeails(catHome, _currentPage);
      if (newItems.isEmpty) {
        setState(() {
          _hasMore = false;
        });
      } else {
        setState(() {
          this._items.addAll(newItems);
        });
      }
    }
  }

  /// Component widget in flashSale layout
  Widget build(BuildContext context) {
    var data = EasyLocalizationProvider.of(context).data;

    return EasyLocalizationProvider(
      data: data,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          title: Text(
            AppLocalizations.of(context).tr('Category'),
            style: TextStyle(
                fontWeight: FontWeight.w700,
                fontSize: 17.0,
                color: Colors.black54,
                fontFamily: "Gotik"),
          ),
          centerTitle: true,
          iconTheme: IconThemeData(color: Color(0xFF6991C7)),
          elevation: 0.0,
        ),
        body: SingleChildScrollView(
          child: Container(
            child: Column(
              children: <Widget>[
                Container(
                  key: Key(UniqueKey().toString()),
                  height: MediaQuery.of(context).size.height * 0.8,
                  child: FutureBuilder<List<dynamic>>(
                    future: catitems_api().fetchdeails(catHome, _currentPage),
                    builder: (context, snapshot) {
                      if (!snapshot.hasData) {
                        return Center(
                          child: CircularProgressIndicator(),
                        );
                      }

                      return GridView.builder(
                        controller: scroll,
                        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 2,
                          childAspectRatio: 0.7,
                          mainAxisSpacing: 8.0,
                          crossAxisSpacing: 8.0,
                        ),
                        itemCount: snapshot.data.length,
                        itemBuilder: (BuildContext context, int index) {
                          CategoryItems items = snapshot.data[index];
                          return InkWell(
                            onTap: () {
                              new productDet_api()
                                  .fetchdeails(items.id)
                                  .then((itemList) {
                                Navigator.of(context).push(PageRouteBuilder(
                                    pageBuilder: (_, __, ___) =>
                                        new detailProduk(itemList.first),
                                    transitionDuration:
                                        Duration(milliseconds: 950),
                                    transitionsBuilder: (_flashSaleState,
                                        Animation<double> animation,
                                        __,
                                        Widget child) {
                                      return Opacity(
                                        opacity: animation.value,
                                        child: child,
                                      );
                                    }));
                              });
                            },
                            child: Container(
                              decoration: BoxDecoration(
                                  color: Colors.white,
                                  boxShadow: [
                                    BoxShadow(
                                        color: Colors.black12.withOpacity(0.1),
                                        spreadRadius: 0.2,
                                        blurRadius: 5.0,
                                        offset: Offset(0.0, 2.0))
                                  ]),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: <Widget>[
                                  Image.network(
                                    items.image,
                                    width: 150.0,
                                    height: 150.0,
                                    fit: BoxFit.cover,
                                  ),
                                  SizedBox(
                                    height: 10.0,
                                  ),
                                  Text(
                                    items.name,
                                    style: TextStyle(
                                        fontWeight: FontWeight.w600,
                                        fontSize: 14.0,
                                        color: Colors.black),
                                  ),
                                  SizedBox(
                                    height: 5.0,
                                  ),
                                  Text(
                                    "\$" + items.price.toString(),
                                    style: TextStyle(
                                        fontWeight: FontWeight.w600,
                                        fontSize: 14.0,
                                        color: Colors.black),
                                  ),
                                ],
                              ),
                            ),
                          );
                        },
                      );
                    },
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}