Flutter Firebase Chat App – Part 8: Message Pagination & Infinite Scroll

Introduction

In real-world chat applications, conversations can contain thousands of messages. Loading the entire chat history at once would cause performance problems and unnecessary database reads.

To solve this, messaging apps use pagination and infinite scrolling to load messages gradually.

In this article we will implement:

• Loading the latest messages first
• Fetching older messages on scroll
• Firestore pagination
• Infinite scroll UI behavior

Pagination Concept

Latest Messages
      ↓
Load 20 messages
      ↓
User scrolls up
      ↓
Load older 20 messages
      ↓
Repeat

Firestore Message Query

Query query = FirebaseFirestore.instance
  .collection('conversations')
  .doc(conversationId)
  .collection('messages')
  .orderBy('createdAt', descending: true)
  .limit(20);

This loads the most recent 20 messages.

Step 1: Load Initial Messages

QuerySnapshot snapshot = await query.get();

List messages = snapshot.docs;

DocumentSnapshot lastDocument =
  snapshot.docs.last;

Step 2: Load Older Messages

Query nextQuery = FirebaseFirestore.instance
  .collection('conversations')
  .doc(conversationId)
  .collection('messages')
  .orderBy('createdAt', descending: true)
  .startAfterDocument(lastDocument)
  .limit(20);

QuerySnapshot nextSnapshot = await nextQuery.get();

Infinite Scroll Detection

ScrollController controller = ScrollController();

controller.addListener(() {

  if (controller.position.pixels ==
      controller.position.maxScrollExtent) {

      loadMoreMessages();

  }

});

Combine Old and New Messages

messages.addAll(nextSnapshot.docs);

Reverse Message Order

Chat apps show messages from bottom to top.

ListView.builder(
  reverse: true,
)

Message Loading UI

if (isLoadingMore) {
  return CircularProgressIndicator();
}

Stop Pagination When No More Messages

if (nextSnapshot.docs.isEmpty) {
  hasMoreMessages = false;
}

Pagination Flow

Chat opens
      ↓
Load latest 20 messages
      ↓
User scrolls up
      ↓
Load older messages
      ↓
Append to message list

Performance Optimization

• Use limit queries
• Use startAfterDocument
• Avoid loading entire collection
• Cache messages locally

Security Rules Reminder

match /conversations/{conversationId}/messages/{messageId} {
  allow read: if request.auth != null
    && request.auth.uid in resource.data.participants;
}

Common Mistakes

• Loading entire chat history
• Not using startAfterDocument
• Using offset pagination (Firestore doesn't support it)

Production Chat Pagination Strategy

Initial Load → 20 messages
Scroll Up → Load next 20
Scroll Up → Load next 20

Example Message Load Order

Newest
  ↓
Message 100
Message 99
Message 98
...
Message 81

Conclusion

Pagination is essential for scalable chat systems. Without it, your application would become slow as conversations grow.

By loading messages gradually, we ensure fast UI performance and efficient database usage.

In Part 9, we will implement: Image & File Sharing in Chat (Firebase Storage Integration).