I want to use a FirestoreListView() for a chat. In this chat, I want to load more Messages when I scroll up and not when I am scrolling down.

In my Firebase Firestore collection, I have documents as messages.

So my question is: How to Make FirestoreListView() load more documents when I scroll up?

Somebody can give me please an answer or an alternative solution to load more documents when scrolling up?

Thanks in advance.

CodePudding user response：

Actually what you're talking about here has a particular term Pagination which is a highly scalable practice while making any feed. Try this, refresh the screen again once the user reaches the bottom

Widget _buildBody(FeedState state) {
switch (state.status) {
  case FeedStatus.loading:
    return const Center(child: CircularProgressIndicator());
  default:
    return RefreshIndicator(
      onRefresh: () async {
        context.read<FeedBloc>().add(FeedFetchPosts());
      },
      child: ListView.builder(
        controller: _scrollController,
        itemCount: state.posts.length,
        itemBuilder: (BuildContext context, int index) {
          final post = state.posts[index];
          final likedPostsState = context.watch<LikedPostsCubit>().state;
          final isLiked = likedPostsState.likedPostIds.contains(post!.id);
          final recentlyLiked =
              likedPostsState.recentlyLikedPostIds.contains(post.id);
          return PostView(
            post: post,
            isLiked: isLiked,
            recentlyLiked: recentlyLiked,
            onLike: () {
              if (isLiked) {
                context.read<LikedPostsCubit>().unlikePost(post: post);
              } else {
                context.read<LikedPostsCubit>().likePost(post: post);
              }
            },
          );
        },
      ),
    );
}}

CodePudding user response：

My solution is not for loading more messages when you scroll up. For me the solution was to make it with a button that loads more data from the firebase with the .where() method and the time stamp:

await FirebaseFirestore.instance
  .collection("chats")
  .doc(documentId)
  .collection("messages")
  .where("timestamp", isLessThan: timestamps[0])
  .orderBy("timestamp", descending: true)
  .limit(20)
  .get()
  .then((value) {...});

Now the list view shows the oldest messages first.

To solve that look at this video: https://www.youtube.com/watch?v=VOV2V0asFaE

Hope it helps!