~~The data I'm paginating can occasionally change on the server. If I detect this has happened while paginating, I must invalidate the data and clear everything.~~

~~Basically, I'm doing this (simplified with state management removed):~~

Future<void> load() async {
  final newPage = await loadData()
  if (oldPage.isInvalid(newPage) {
    _pagingController.value = PagingState(
      nextPageKey: 0,
      itemList: null,
      error: null,
    );
  } else {
    _pagingController.value = PagingState(
      nextPageKey: newData.length,
      itemList: newData.items,
    );
  }
}

~~This load function is called by a listener added with addPageRequestListener.~~

~~The above code, however, doesn't usually work. Instead, the widget will just stop updating, showing the loading indicator at the bottom of the old page indefinitely.~~

When you call controller.refresh() you have to wait till the previous addPageRequestListenerhas finished and append. How do you cancel the previous future and just refresh again?

This happened to me when the user wants to switch filters quickly. So every time a filter setting is applied, controller.refresh() is called with the new setting. But when the refresh is called too quickly before the previous one can complete it doesn't register and addPageRequestListener isn't called.

Some of the grids in my app can be opened into a PageView. When the end of the pageview is reached, new data should be loaded and the grid should be also updated with that data. Using the pagingcontroller with the grid should be easy enough, and triggering an update from somewhere else should also work.

Could we get support for pageviews? I assume the PagedSliverBuilder is a vertical scroll view, and not suitable for this task.

I see that we can handle scroll DOWN to load more, but is it possible to handle scroll UP as well to load more? For example, initial page is 2. So when I scroll to top I need to fetch page 1 etc.

I'm trying to build a chat messages list. You know: filling it with the latest messages as soon as the user opens the screen, letting the user see older messages with a lazy load (that is the focus of this package), but also update the list with new messages and scroll to them in case the user was in the bottom of it. You know, the regular Telegram and WhatsApp list of messages behavior.

I've checked the example and I've seen how to add more elements to the end of the page. But is there a way to also handle new items, and scroll to them automatically in case the user was already at the bottom of the list?

Congrats on this great package, by the way :·)

Assume we have 1000 items and loaded first page (10 item per page), If user delete one of items, and we load next page with offset 10, we lose an item! is it safe to ignore pageKey and use _pagingController.itemList.length?

As soon app opens addPageRequestListener is called 4x times and 4x times data is shown without reaching at the end of the first page or either scrolling, as I scroll forward, more data loads automatically without reaching at the end of the page.

import 'dart:convert';
import 'package:balaloka/constants/api_links.dart';
import 'package:balaloka/modals/video_details.dart';
import 'package:balaloka/widgets/video_card.dart';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:http/http.dart' as http;
import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart';

class CommonVideoListing extends StatefulWidget {
  final int favouriteVideos;
  final int userId;
  CommonVideoListing({required this.userId, required this.favouriteVideos});
  @override
  _CommonVideoListingState createState() => _CommonVideoListingState();
}

class _CommonVideoListingState extends State<CommonVideoListing> {
  late Video video;
  final PagingController<int, Video> _pagingController = PagingController(
    firstPageKey: 0,
  );
  static const _pageSize = 10;
  int pageNumber = 1;

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

  @override
  void initState() {
    super.initState();
    _pagingController.addPageRequestListener((pageKey) {
     
      listingDataAPI(pageKey);
    });
   
  }

  Future<void> listingDataAPI(int pageKey) async {
    if (widget.userId == -100) {
      final SharedPreferences sharedPreferences =
          await SharedPreferences.getInstance();
      var parentId = sharedPreferences.getString('parentId');

      try {
        http.Response response = await http.get(Uri.parse(API.videoListingsAPI +
            'UserId=$parentId&queryText=&onlyfavouritevideos=${widget.favouriteVideos}&pagenumber=$pageNumber&pagesize=10'));
        var parsed = jsonDecode(response.body);
        video = Video.fromJson(parsed);

        final newItems = [video];
        final isLastPage = newItems[0].videoDetails.length < _pageSize;
        if (isLastPage) {
          _pagingController.appendLastPage(newItems);
        } else {
          final nextPageKey = pageKey + newItems[0].videoDetails.length;
          _pagingController.appendPage(newItems, nextPageKey);
        }
        setState(() {
          pageNumber += 1;
        });
      } catch (error) {
        _pagingController.error = error;
      }
    }

  }


  @override
  Widget build(BuildContext context) {
    final MediaQueryData queryData = MediaQuery.of(context);
    final width = queryData.size.width;
    return Padding(
        padding: EdgeInsets.only(
          left: 0.05 * width,
          right: 0.05 * width,
        ),
        child: CustomScrollView(
          slivers: [
            PagedSliverList<int, Video>(
              pagingController: _pagingController,
              builderDelegate: PagedChildBuilderDelegate<Video>(
                itemBuilder: (context, item, i) {
                  return ListView.builder(
                    controller: ScrollController(),
                    shrinkWrap: true,
                    itemCount: item.videoDetails.length,
                    itemBuilder: (BuildContext context, int index) {
                      return VideoCard(
                        video: item,
                        context: context,
                        index: index,
                        userId: widget.userId,
                        videoId: -100,
                      );
                    },
                  );
                },
                noItemsFoundIndicatorBuilder: (context) {
                  return Text('No More Videos Found');
                },
                noMoreItemsIndicatorBuilder: (context) {
                  return Text('No More Videos Found');
                },
                newPageProgressIndicatorBuilder: (context) {
                  return Center(
                    child: CircularProgressIndicator(),
                  );
                },
                firstPageProgressIndicatorBuilder: (context) {
                  return Center(
                    child: CircularProgressIndicator(),
                  );
                },
              ),
            ),
          ],
        )
  }
}

Hey @EdsonBueno , Thank you for this awesome library.

I tried your simple example and the fetch is called again once the data is loaded causes to load the second page.

I'm also wondering how to disable the loading indicator when calling the refresh() method?

Hi ,

I'm using TabBarView when change tab Item i call _con.pagingFoodsController.refresh();

but what i got dubled items cuz the

pagingFoodsController.addPageRequestListener((pageKey) { fetchFoodsPage(pageKey); });

called twice

Here my code : Container( child: FutureBuilder<List>( future: _con.getRestaurantFoodsCategories(), builder: (c, s) { if (s.hasData) { List tabs = new List();

                                  for (int i = 0; i < s.data.length; i++) {
                                    tabs.add(Tab(
                                      child: Text(
                                        s.data[i].name,
                                        style:
                                            TextStyle(color: Colors.black),
                                      ),
                                    ));
                                  }
                                  TabController tabController =
                                      new TabController(
                                          vsync: this, length: tabs.length);
                                  tabController.addListener(() {
                                    if (tabController.indexIsChanging) {
                                      _con.idOfCategory =
                                          s.data[tabController.index].id;
                                      _con.pagingFoodsController.refresh();
                                      print(s.data[tabController.index].id);

                                      print(
                                          "tab is animating. from active (getting the index) to inactive(getting the index) ");
                                    } else {
                                      //tab is finished animating you get the current index
                                      //here you can get your index or run some method once.
                                      //  print(tabController.index);
                                    }
                                  });
                                  return Container(
                                    height: 500,
                                    child: new MaterialApp(
                                      debugShowCheckedModeBanner: false,
                                      home: new Scaffold(
                                          appBar: new AppBar(
                                            backgroundColor: Theme.of(
                                                    context)
                                                .scaffoldBackgroundColor,
                                            title: Padding(
                                              padding: const EdgeInsets
                                                      .symmetric(
                                                  horizontal: 20),
                                              child: ListTile(
                                                dense: true,
                                                contentPadding:
                                                    EdgeInsets.symmetric(
                                                        vertical: 0),
                                                leading: Icon(
                                                  Icons.restaurant,
                                                  color: Theme.of(context)
                                                      .hintColor,
                                                ),
                                                title: Text(
                                                  S
                                                      .of(context)
                                                      .food_categories,
                                                  style: Theme.of(context)
                                                      .textTheme
                                                      .display1,
                                                ),
                                              ),
                                            ),
                                            bottom: new TabBar(
                                              controller: tabController,
                                              labelColor: Colors.black,
                                              isScrollable: true,
                                              tabs: List<Widget>.generate(
                                                  s.data.length,
                                                  (int index) {
                                                return Tab(
                                                    text:
                                                        s.data[index].name);
                                              }),
                                            ),
                                          ),
                                          body: new TabBarView(
                                            controller: tabController,
                                            children: List<Widget>.generate(
                                                s.data.length, (int index) {
                                              return PagedListView<int,
                                                  Food>.separated(
                                                scrollDirection:
                                                    Axis.vertical,
                                                primary: false,
                                                shrinkWrap: false,
                                                pagingController: _con
                                                    .pagingFoodsController,
                                                builderDelegate:
                                                    PagedChildBuilderDelegate<
                                                        Food>(
                                                  itemBuilder: (context,
                                                      item, index) {
                                                    return FoodItemWidget(
                                                      food: item,
                                                      heroTag:
                                                          "menu_food_list",
                                                    );
                                                  },
                                                  noMoreItemsIndicatorBuilder:
                                                      (_) => Padding(
                                                    padding:
                                                        const EdgeInsets
                                                            .all(8.0),
                                                    child: ClipRRect(
                                                      borderRadius:
                                                          BorderRadius
                                                              .circular(80),
                                                      child: RaisedButton(
                                                        disabledColor:
                                                            Colors.white,
                                                        onPressed: null,
                                                        child: Text(
                                                            "لا يوجد وجبات اخرى"),
                                                      ),
                                                    ),
                                                  ),
                                                ),
                                                separatorBuilder: (context,
                                                        index) =>
                                                    SizedBox(height: 10),
                                              );
                                            }),
                                          )),
                                    ),
                                  );
                                }
                                if (s.hasError) print(s.error.toString());
                                return Center(
                                    child: Text(s.hasError
                                        ? s.error.toString()
                                        : "Loading..."));
                              },
                            ),
                          ),

MVC controller class :

        pagingFoodsController.addPageRequestListener((pageKey) {
  //    _con.listenForOrders(pageKey);
  //  orderRepo.fetchPosts(orderRepo.nextUrl);
  fetchFoodsPage(pageKey);
});

Future fetchFoodsPage(pageKey) async { print("test"); // here is called twice !!! if (newFoodsItems.isNotEmpty) { if (newFoodsItems.first.category.id != idOfCategory) { newFoodsItems.clear(); if (pageKey == 0) newFoodsItems = await foodRepo.getFoodsOfRestaurant( idRestaurant, null, idOfCategory); else newFoodsItems = await foodRepo.getFoodsOfRestaurant( idRestaurant, foodRepo.nextUrlTFoodsOfRestaurant, idOfCategory); } } else { if (pageKey == 0) newFoodsItems = await foodRepo.getFoodsOfRestaurant( idRestaurant, null, idOfCategory); else newFoodsItems = await foodRepo.getFoodsOfRestaurant( idRestaurant, foodRepo.nextUrlTFoodsOfRestaurant, idOfCategory); } try { final isLastPage = newFoodsItems.length < _pageFoodsSize; if (isLastPage) { pagingFoodsController.appendLastPage(newFoodsItems); } else { final nextPageKey = pageKey + newFoodsItems.length; pagingFoodsController.appendPage(newFoodsItems, nextPageKey); } } catch (error) { pagingFoodsController.error = error; } }

I've had a great time learning to use this plugin! After following your tutorial and documentation, I can't see what if anything I'm doing differently, but I'm having some issues. Within _fetchPage, right after _pagingController.appendPage() is called, I get the following exception:

════════ Exception caught by foundation library ════════════════════════════════
The following assertion was thrown while dispatching notifications for PagingController<int, CardItem>:
setState() or markNeedsBuild() called during build.

This ValueListenableBuilder<PagingState<int, CardItem>> widget cannot be marked as needing to build because the framework is already in the process of building widgets.  A widget can be marked as needing to be built during the build phase only if one of its ancestors is currently building. This exception is allowed because the framework builds parent widgets before children, which means a dirty descendant will always be built. Otherwise, the framework might not visit this widget during this build phase.
The widget on which setState() or markNeedsBuild() was called was: ValueListenableBuilder<PagingState<int, CardItem>>
    state: _ValueListenableBuilderState<PagingState<int, CardItem>>#c3dcd
The widget which was currently being built when the offending call was made was: SliverList
    delegate: AppendedSliverChildBuilderDelegate#d62ee(estimated child count: 6)

The second page of items is indeed shown, but past the second page, the loading spinner is rendered despite _nextPage not even being called a third time. No more items are added or displayed beyond these first two pages, even though more exist.

Is there something I'm getting wrong, or is this a bug? I'd appreciate help with this :)

Relevant widget: (replaced the itemBuilder with a simple text widget to simplify debugging)

class ContentListView extends StatefulWidget {
  @override
  _ContentListViewState createState() => _ContentListViewState();
}

class _ContentListViewState extends State<ContentListView> {
  static const _pageSize = 5;

  final PagingController<int, CardItem> _pagingController =
      PagingController(firstPageKey: 0, invisibleItemsThreshold: 2);

  @override
  void initState() {
    _pagingController.addPageRequestListener((pageKey) {
      _fetchPage(pageKey);
    });
    super.initState();
  }

  @override
  void didUpdateWidget(ContentListView oldWidget) {
    _pagingController.refresh();
    super.didUpdateWidget(oldWidget);
  }

  Future<void> _fetchPage(int pageKey) async {
    try {
      final newItems = List<CardItem>();
      for (var i = 0; i < _pageSize; i++) {
        newItems
            .add(CardItem.fromProcess(Globals.oldProcessFeed.getNextProcess()));
      }
      final isLastPage = !Globals.oldProcessFeed.hasNextItem;
      if (isLastPage) {
        _pagingController.appendLastPage(newItems);
      } else {
        final nextPageKey = pageKey + 1;
        _pagingController.appendPage(newItems, nextPageKey);
      }
    } catch (error) {
      _pagingController.error = error;
      log(error);
    }
  }

  @override
  Widget build(BuildContext context) => PagedListView<int, CardItem>(
        pagingController: _pagingController,
        builderDelegate: PagedChildBuilderDelegate<CardItem>(
          itemBuilder: (context, item, index) =>
              Text(item.process.processId).withTopPadding(300),
          newPageProgressIndicatorBuilder: (context) => Padding(
              padding: const EdgeInsets.only(
                top: 16,
                bottom: 16,
              ),
              child: Center(child: SpinnerCircular())),
        ),
      );

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

Hello, I was unable to get PagedListView.separated to keep scroll offsets for each list after switching between tabs/pages. Might be related to #97. Here is a minimal example to reproduce:

import 'package:flutter/material.dart';
import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final controller = DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Test'),
          bottom: TabBar(
            isScrollable: true,
            tabs: [
              Tab(text: 'A'),
              Tab(text: 'B'),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            PagedTopicListView(id: 0),
            PagedTopicListView(id: 1),
          ],
        ),
      ),
    );
    return controller;
  }
}

class PagedTopicListView extends StatefulWidget {
  PagedTopicListView({required this.id, Key? key}) : super(key: key);

  final int id;

  @override
  _PagedTopicListViewState createState() => _PagedTopicListViewState();
}

class _PagedTopicListViewState extends State<PagedTopicListView> {
  final _pagingController = PagingController<int, String>(firstPageKey: 0);

  @override
  void initState() {
    _pagingController.addPageRequestListener((pageKey) {
      _fetchPage(pageKey);
    });
    super.initState();
  }

  Future<void> _fetchPage(int pageKey) async {
    if (pageKey < 100) {
      _pagingController.appendPage(
          new List<int>.generate(10, (index) => index + pageKey)
              .map((e) => e.toString())
              .toList(),
          pageKey + 10);
    } else {
      _pagingController.appendLastPage([]);
    }
  }

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

  @override
  Widget build(BuildContext context) => RefreshIndicator(
        child: PagedListView.separated(
          key: PageStorageKey(widget.id),
          pagingController: _pagingController,
          builderDelegate: PagedChildBuilderDelegate<String>(
            itemBuilder: (context, item, index) => Text(item),
          ),
          separatorBuilder: (context, index) => const Divider(),
        ),
        onRefresh: () => Future.sync(
          () => _pagingController.refresh(),
        ),
      );
}

Desired behavior: Scroll down in Tab A, switch to Tab B, then switch back, The app should return to Tab A's previous scroll offset.

Actual: After switching back to Tab A, the app returns to the top of the list.

hello. Thanks for making such a nice plugin.

Due to the nature of the infinity scroll, it would be better to make it work in a different way, so I suggest it. Instead of the page number system, it would be better to use 'key(post number) and next (or previous) quantity'. It seems that there is no need to fill in the missing part in the middle. In this way, if you search up to page 2 in the conventional way, write a new article and then search page 3, you can also solve the problem of one article being viewed repeatedly.

_afterKey, _prevKey

_fetchAfter(key?) {
  append - If key is null, _pageSize from the beginning
}
_fetchPrev(key) {
  prepend
}

If you do this, these problems will naturally be solved. https://github.com/EdsonBueno/infinite_scroll_pagination/issues/230 https://github.com/EdsonBueno/infinite_scroll_pagination/issues/231

thank you.

Hello,

I'm trying to implement filtering but i'm having issue refresh the API call with the new filter key

class HistoryStateNotifier extends PagedNotifier<int, Transaction> {
  Ref ref;
  String selectedFilter;

  HistoryStateNotifier({required this.ref, this.selectedFilter = 'all'})
      : super(
          load: (page, limit) => ref
              .watch(apiProvider)
              .getTransactions(page, limit, selectedFilter)
              .then((value) => value.transactions),
          nextPageKeyBuilder: NextPageKeyBuilderDefault.mysqlPagination,
        );

  void setFilter(String filter) {
    selectedFilter = filter;

    // what i'm trying to reach is when the setFilter is called, 
    //the api call should be made again with the new filter
  }
}

final historyProvider =
    StateNotifierProvider<HistoryStateNotifier, PagedState<int, Transaction>>(
  (ref) => HistoryStateNotifier(
    ref: ref,
  ),
);

I applied this package but unable to scroll this listview. its showing first page only. Please help me to solve this issue. following are my code excample

Expanded(
                        child: FutureBuilder<UserPost>(
                          future: getUserPost(),
                          builder: (context, snapshot) {
                            if (snapshot.hasData) {
                              return ListView.builder(
itemCount: snapshot.data!.data!.length,
                                  itemBuilder: (context, i) {
return Padding(
                                        padding: EdgeInsets.only(left: 5, right: 5),
                                        child: PagedListView<int,dynamic>(
                                          shrinkWrap: true,
                                          pagingController: _pagingController,
                                          builderDelegate: PagedChildBuilderDelegate<dynamic>(
                                            itemBuilder: (context,item,index) =>
                                          Card()
)
}
)

Hi,

Thank you for creating awesome library. I'm having a problem, how can i update item in specific page when using infinite_scroll_pagination

Ex: Page 0[Rambutan, Tomato, Pear] Page 1[Apple, Orange, Cherry] Page 2[Pipeapple, Mango, Melon]

Update Page 1[Apple, Banana, Cherry]

Thank you,

Hello, in my usecase i have a onSearch-method which refreshs the PagingController after a new searchterm was entered by the user. In the same method i use a dio-canceltoken to cancel the preceeding requests and start a new request by refreshing the controller. So if the preceeding request was canceled, i got a CancelationException which i catch and return from the RequestListener without doing anything, the refreshPage-Method is not called.

After the catch and return the RequestListener doesn't get called anymore and i only see the CircularProgressIndicator spinning. I have no idea how to handle something like that. Do i have to do something with the PagingController after catching and return?

Thanks in advance.

Example:

@override
void initState() {
    _pagingController.addPageRequestListener(_listen);
    super.initState();
  }

 void _listen(pageKey) async {
    try {
      var watchlistResult = await _fetchWatchlist(pageKey, _filter);
      refreshPage(pageKey, watchlistResult);
    }
    on CancelationException catch(e){
      _pagingController.error = null;
      return;    
    } catch (error) {
      _pagingController.error = error;
    }
  }

 void refreshPage(
      int pageNumber, WatchlistCollectionListPagedResponse result) {
    final items = result.data;
    if (items == null) {
      return;
    }

final isLastPage = result.totalPages == pageNumber + 1;
    if (isLastPage) {
      _pagingController.appendLastPage(items);
    } else {
      final nextPageKey = pageNumber + 1;
      _pagingController.appendPage(items, nextPageKey);
    }
  }

void _onSearch(String searchString) async {
    _filter.filterString = searchString;
    _cancelToken.cancel("Abgebrochen");
    _cancelToken = CancelToken();
    _pagingController.refresh();
  }