EdsonBueno
[Feature] Scroll to previous pages when setting firstPageKey
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.
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.
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?
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.
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.
Yes, @NamanShergill, it definitely is! I just couldn't allocate the time for it yet, stuffed with work.
Yes, @NamanShergill, it definitely is! I just couldn't allocate the time for it yet, stuffed with work.
That's awesome!
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'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.
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?
