How to customize addPageRequestListener for API call

[rohitchaurasiya151]

Hi, I want to control unwanted extra API calls for the second page. I used PagedGridView widgets. the API calls two times without any scroll.

also, I tried changing the invisibleItemsThreshold value but this is not working for the grid, please let me know where is my mistake. OR, how can I customize the addPageRequestListener for API calls?

here I am getting two times API calls without page scroll. https://www.awesomescreenshot.com/video/11174472?key=1133065044af13ce56fcf6f2205aeb91

below is my code:

 class _SearchProductsScreenState extends State<SearchProductsScreen> {
 List<ProductModel> products;
 final _numberOfPostsPerRequest = 10;
 final _pagingController =
 PagingController<int, NewProductModel>(firstPageKey: 1, invisibleItemsThreshold: 1);
 ScrollController scrollController = ScrollController();

 @override
 void initState() {
Provider.of<SearchProductProvider>(context, listen: false).searchedProductList = [];
_pagingController.addPageRequestListener((pageKey) {
  getSearchProductList(pageKey);
});
super.initState();
 }

 getSearchProductList(int pageKey) async {
if (AppInstance().isConnected) {
  var p = Provider.of<SearchProductProvider>(context, listen: false);
  var rProductList = await p.searchProductAPI(searchString: widget.searchText, page: pageKey);
  errorMessage = p.noResultFoundErrorMessage;
  final isLastPage = rProductList.length < _numberOfPostsPerRequest;
  if (isLastPage) {
    _pagingController.appendLastPage(rProductList);
  } else {
    final nextPageKey = pageKey + 1;
    _pagingController.appendPage(rProductList, nextPageKey);
  }
} else {
  Scaffold.of(context).showSaladBar(
    SnackBar(
      content: Text(StringConst.SHOW_INTERNET_ERROR),
      duration: Duration(seconds: 3),
    ),
  );
}
 }

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

 @override
 Widget build(BuildContext context) {
return Scaffold(
  body: GestureDetector(
    onTap: () {
      FocusScope.of(context).unfocus();
    },
    child: Center(
      child: Container(
        width: kIsWeb
            ? isWebMobile
                ? displayWidth(context)
                : 800
            : displayWidth(context),
        height: displayHeight(context),
        child:  RefreshIndicator(
                      onRefresh: () => Future.sync(() => _pagingController.refresh()),
                      child: PagedGridView<int, NewProductModel>(
                        shrinkWrap: true,
                        scrollController: scrollController,
                        physics: ClampingScrollPhysics(),
                        key: ObjectKey(
                            displayWidth(context) < 500 ? 2 : displayWidth(context) ~/ 200),
                        pagingController: _pagingController,
                        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: displayWidth(context) > 800
                              ? 4
                              : displayWidth(context) > 500
                                  ? 3
                                  : 2,
                          mainAxisExtent: sizeValue(value: 295, type: SizeType.h),
                          mainAxisSpacing: sizeValue(value: 13, type: SizeType.h),
                          crossAxisSpacing: sizeValue(value: 13, type: SizeType.h),
                        ),
                        builderDelegate: PagedChildBuilderDelegate<NewProductModel>(
                            itemBuilder: (context, item, index) => ProductGridWidget(
                                  newProductModel: item,
                                ),
                            noItemsFoundIndicatorBuilder: (context) {
                              return Container(
                                constraints: BoxConstraints(maxHeight: 200),
                                child: Center(
                                    child: Text(
                                  errorMessage,
                                  textAlign: TextAlign.center,
                                  style: CommonStyles.textStyle(
                                      fontWeight: FontWeight.w600, fontSize: textSize16),
                                )),
                              );
                            },
                            firstPageProgressIndicatorBuilder: (context) => Container(
                                height: 200,
                                child: Center(
                                  child: CircularProgressIndicator(),
                                ))),
                        showNewPageProgressIndicatorAsGridChild: false,
                      )
              ),
          ),
        ),
      ),
    ),
  ),
 );
 }
}  

[clragon]

your pagination is not working correctly because of shrinkWrap: true,, which instructs it to build all items immediately. you should avoid shrinkwrapping your scrollviews.

[tologonkudaiberdiuulu]

@clragon what about, say, we have Listview and in childrens:

1. SizedBox(height: 200)(think this is static banner)
2. CustomWidget(Say, Category widget with the height of 200). And I want to scroll all page, so that Banner and Category will hide on scroll. At this situation we must use shrinkWrap: true and with physics NeverScrollableScrollPhysics. @rohitchaurasiya151 notice that infinite_scroll_pagination not calling two twice, it's calling as many pages as you have. What should use? Help me, please!

[clragon]

@tologonkudaiberdiuulu github issues are not for helping with usage of the framework, they are for bugs and improvements of the package. the things you want can be achieved with slivers, but I will not go into detail here. please seek out help on stackoverflow or the flutterdev discord server.