[Feature Request] Scroll to previous pages when setting firstPageKey

[vintage]

The PagingController can be built with firstPageKey to indicate initial page to load. Sounds great, but how to "scroll back" to previous pages then?

I'm implementing a players ranking list where the initial page is dynamically set based on position of current user in the leaderboard.

Example

User enters the screen and sees 5th page of the results. He can scroll down to see further pages (6,7,8), but I have to provide some mechanism to be able to scroll up (to pages 4,3,2,1). Is that ever possible?

Already tried to use addStatusListener/addListener, but nothing interesting is triggered there.

[EdsonBueno]

Hi @vintage .
This is currently not possible, but you're the third one asking for this feature.
If more demand comes in, I'll definitely give it a shot.

[vintage]

Well, so why closing all of the issues instead of keeping one of these open for discussion or even making it visible to the community that help is wanted?

[EdsonBueno]

I was going to use another issue for this @vintage , but let's use this one. I think you explained what you want in a better way.

[NamanShergill]

I would love this as well!

[NamanShergill]

Is this on the roadmap/planned for future? This will be a great feature to have to have a much better control over the pagination.

[EdsonBueno]

Yes, @NamanShergill, it definitely is! I just couldn't allocate the time for it yet, stuffed with work.

[NamanShergill]

Yes, @NamanShergill, it definitely is! I just couldn't allocate the time for it yet, stuffed with work.

That's awesome!

[sabetAI]

@EdsonBueno any estimate of when it can be available?

[IvanAleksandrov94]

At the moment, for lazy loading in both directions, you can try using the implementation with Viewport.

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

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

class _LoadMoreUpAndDownState extends State<LoadMoreUpAndDown> {
  final Key downListKey = UniqueKey();
  static const _pageSize = 20;

  final PagingController<int, Message> _pagingReplyUpController = PagingController(
    firstPageKey: 0,
  );
  final PagingController<int, Message> _pagingReplyDownController = PagingController(
    firstPageKey: 0,
  );

  Future<void> _fetchUpPage(int pageKey) async {
    try {
      final newItems = await RemoteApi.getMessagesList(pageKey, _pageSize);
      final isLastPage = newItems.length < _pageSize;
      if (isLastPage) {
        _pagingReplyUpController.appendLastPage(newItems);
      } else {
        final nextPageKey = pageKey + newItems.length;
        _pagingReplyUpController.appendPage(newItems, nextPageKey);
      }
    } catch (error) {
      _pagingReplyUpController.error = error;
    }
  }

  Future<void> _fetchDownPage(int pageKey) async {
    try {
      final newItems = await RemoteApi.getMessagesList(pageKey, _pageSize);
      final isLastPage = newItems.length < _pageSize;
      if (isLastPage) {
        _pagingReplyDownController.appendLastPage(newItems);
      } else {
        final nextPageKey = pageKey + newItems.length;
        _pagingReplyDownController.appendPage(newItems, nextPageKey);
      }
    } catch (error) {
      _pagingReplyDownController.error = error;
    }
  }

  @override
  void initState() {
    super.initState();
    _pagingReplyUpController.addPageRequestListener((pageKey) {
      _fetchUpPage(pageKey);
    });

    _pagingReplyDownController.addPageRequestListener((pageKey) {
      _fetchDownPage(pageKey);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scrollable(
      viewportBuilder: (BuildContext context, ViewportOffset position) {
        return Viewport(
          offset: position,
          center: downListKey,
          slivers: [
            PagedSliverList(
              pagingController: _pagingReplyUpController,
              builderDelegate: PagedChildBuilderDelegate<Message>(
                itemBuilder: (context, messageUp, index) => SizedBox(
                  height: 50,
                  width: double.infinity,
                  child: Text(
                    '${messageUp.text}',
                  ),
                ),
              ),
            ),
            PagedSliverList(
              key: downListKey,
              pagingController: _pagingReplyDownController,
              builderDelegate: PagedChildBuilderDelegate<Message>(
                itemBuilder: (context, messageDown, index) => SizedBox(
                  height: 50,
                  width: double.infinity,
                  child: Text(
                    '${messageDown.text}',
                  ),
                ),
              ),
            ),
          ],
        );
      },
    );
  }

  @override
  void dispose() {
    _pagingReplyUpController.dispose();
    _pagingReplyDownController.dispose();
    super.dispose();
  }
}

[PaulRudin]

I'm in a similar situation to the OP. I have potentially large number of items (possibly hundreds of thousands) representing the rankings of players in a game. I want the initial view to show the position of the logged in player, and to be able to scroll up and down from that position.

[EdsonBueno]

Can any of you confirm @IvanAleksandrov94's implementation is what you're looking for?
If yes, I can expand on it and make it into the package.
If not, what's missing?

[amanokerim]

Can any of you confirm @IvanAleksandrov94's implementation is what you're looking for? If yes, I can expand on it and make it into the package. If not, what's missing?

I think @IvanAleksandrov94 's solution on the package would be nice!

[mgudev7a]

Implementation from @IvanAleksandrov94 is working. Adopted it for navigation in calendar items via DateTime.

For the case of a completly empty list there will be two empty list indicators.
To prevent this I use a SizedBox(height:0) as noItemsFoundIndicatorBuilder for the PagedSliverLists and added an additional widget / exchanged the center key. My solution to identify the empty list is rather brutal (joining empty list bool states from the two different fetch functions) - Perhaps a packaged solution can address this in a more elegant way.

Anyway thanks @EdsonBueno for the package and Ivan for the Viewport usage!

[vergaraSC]

How Can I prevent scroll jump when i dro

At the moment, for lazy loading in both directions, you can try using the implementation with Viewport.

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

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

class _LoadMoreUpAndDownState extends State<LoadMoreUpAndDown> {
  final Key downListKey = UniqueKey();
  static const _pageSize = 20;

  final PagingController<int, Message> _pagingReplyUpController = PagingController(
    firstPageKey: 0,
  );
  final PagingController<int, Message> _pagingReplyDownController = PagingController(
    firstPageKey: 0,
  );

  Future<void> _fetchUpPage(int pageKey) async {
    try {
      final newItems = await RemoteApi.getMessagesList(pageKey, _pageSize);
      final isLastPage = newItems.length < _pageSize;
      if (isLastPage) {
        _pagingReplyUpController.appendLastPage(newItems);
      } else {
        final nextPageKey = pageKey + newItems.length;
        _pagingReplyUpController.appendPage(newItems, nextPageKey);
      }
    } catch (error) {
      _pagingReplyUpController.error = error;
    }
  }

  Future<void> _fetchDownPage(int pageKey) async {
    try {
      final newItems = await RemoteApi.getMessagesList(pageKey, _pageSize);
      final isLastPage = newItems.length < _pageSize;
      if (isLastPage) {
        _pagingReplyDownController.appendLastPage(newItems);
      } else {
        final nextPageKey = pageKey + newItems.length;
        _pagingReplyDownController.appendPage(newItems, nextPageKey);
      }
    } catch (error) {
      _pagingReplyDownController.error = error;
    }
  }

  @override
  void initState() {
    super.initState();
    _pagingReplyUpController.addPageRequestListener((pageKey) {
      _fetchUpPage(pageKey);
    });

    _pagingReplyDownController.addPageRequestListener((pageKey) {
      _fetchDownPage(pageKey);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scrollable(
      viewportBuilder: (BuildContext context, ViewportOffset position) {
        return Viewport(
          offset: position,
          center: downListKey,
          slivers: [
            PagedSliverList(
              pagingController: _pagingReplyUpController,
              builderDelegate: PagedChildBuilderDelegate<Message>(
                itemBuilder: (context, messageUp, index) => SizedBox(
                  height: 50,
                  width: double.infinity,
                  child: Text(
                    '${messageUp.text}',
                  ),
                ),
              ),
            ),
            PagedSliverList(
              key: downListKey,
              pagingController: _pagingReplyDownController,
              builderDelegate: PagedChildBuilderDelegate<Message>(
                itemBuilder: (context, messageDown, index) => SizedBox(
                  height: 50,
                  width: double.infinity,
                  child: Text(
                    '${messageDown.text}',
                  ),
                ),
              ),
            ),
          ],
        );
      },
    );
  }

  @override
  void dispose() {
    _pagingReplyUpController.dispose();
    _pagingReplyDownController.dispose();
    super.dispose();
  }
}

I don't know if it happens to anyone else but when I scroll from bottom to top the scroll makes a sharp jump to the first item in the top list, how can I prevent the scroll from making those jumps? thanks.