How to implement infinite scroll pagination the right way

Question

I am making a search request but the data returned comes with a pagination type. I have in my onchanged function in my TextField so that whenever I type something, it makes a get request. The first letter I type works fine but when I type again, nothing happens.

This is what I have in my onChanged function

onChanged: (value) {
      _pagingController.addPageRequestListener(
      (pageKey) {
      _fetchPage(pageKey, val.trim());
    },
   );
 },

Below is my _fetchPageFunction

Future<void> _fetchPage(int pageKey, String searchParam) async {
    final results = await searchRepo.getCareers(
          isSearching: true,
          searchParam: searchParam,
          token: token,
          page: pageKey,
        );
      hasNextPage = results['hasNextPage'];
      newItems.clear();
      newItems = results['schools'];
      print(newItems.length);
      if (!hasNextPage) {
        _pagingController.appendLastPage(newItems);
      } else {
        final nextPageKey = pageKey + 1;
        _pagingController.appendPage(newItems, nextPageKey);
      }
    } catch (error) {
      _pagingController.error = error.toString();
    }
  }

Below is my UI

PagedListView<int, dynamic>(
                  shrinkWrap: true,
                  pagingController: _pagingController,
                  builderDelegate: PagedChildBuilderDelegate<dynamic(
                    itemBuilder: (context, item, index) {
                      return ListTile(
                        leading: InitialsAvatar(name: item.name),
                        title: Text(
                          item.name ?? 'n/a',
                          style: theme.textTheme.bodyText1,
                        ),
                        subtitle: Text(
                          item.category,
                          style: theme.textTheme.labelMedium,
                        ),
                      );
                    },
                  ),
                ),

I tried removing the pageRequestLister after the _fetchPage funtion but it did not work. Is there any way I can do this? If this is not possible, is there any other package that can work for me?

most likely you need to add some kind of "debounce" mechanism that prevents sending the requests on each key stroke, something like https://gist.github.com/pskink/c4d3615d93ba77ef16016aaca21e0f77#file-foo_search-dart-L72 — pskink, Jan 08 '23 at 14:01
please include a complete example, as others will be able to help you more accurately. The snippet should be runnable — bakboem, Jan 08 '23 at 14:04
This is what helped me with what I needed https://stackoverflow.com/a/69606863/17730070 — Samuel, Jan 08 '23 at 16:01

score 1 · Answer 1 · answered Jan 08 '23 at 14:25

1

Try adding _pagingController.refresh(); inside your onChanged().

onChanged: (value) {
      _pagingController.refresh();
      _pagingController.addPageRequestListener(
      (pageKey) {
      _fetchPage(pageKey, val.trim());
    },
   );
 },

answered Jan 08 '23 at 14:25

rrttrr

1,393
1
6
10

This kind of works but it is fetching a lot of data...for example one item is appearing like 5 times..and also the previous data I got are not clearing, they are adding up to the recent data I am fetching. If only I can add some kind of mechanism which checks if the user is done typing, then i will make the request – Samuel Jan 08 '23 at 14:39
Can you post full code of this screen? – rrttrr Jan 08 '23 at 15:06
@Samuel "If only I can add some kind of mechanism which checks if the user is done typing," so have you tried the code I gave you? – pskink Jan 08 '23 at 15:13
@pskink yes it does but it is displaying one item like 6 times – Samuel Jan 08 '23 at 15:31

How to implement infinite scroll pagination the right way

1 Answers1