Flutter Supabase Client Paginating Realtime Database Changes with Streams Paginations?

Question

Hi I am currently making a chat application with Flutter and Supabase. Right now I am using the stream() method within flutter SDK to listen for Database changes as shown in the example here: https://supabase.com/blog/flutter-tutorial-building-a-chat-app#step-7-create-a-chat-page-to-receive-and-send-real-time-messages . But the problem is I can't seem to figure out on how I could paginate the records to display the older messages when the user scrolls up. It is like infinite scroll pagination but in reverse. Basically right now I am calling a supabase fetch query in my stream callback to fetch foreign table as well (this is why I would not want to load all rows as it would be costly as more messages are created in the chat and make use of pagination instead). I am aware that there is a limit function with maybe filters on CreatedAt column. however I am not sure on how I would be able to load older messages and also append new messages at the same time if that makes sense.

Here is my basic code to listen without any pagination of some sort:

// listen to messages for a particular chat message
  void listenToTeamChatMessages(String chatId) {
    var streamBuilder = _supabase.client
        .from("team_chat_messages")
        .stream(primaryKey: ["id"]).eq("chat_id", chatId);

    _teamChatMessagesSubs[chatId] =
        streamBuilder.listen((List<Map<String, dynamic>> data) {
      print("Team Chat Messages: $data");
      // Do Supabase api calls here to fetch inner join data as well associated to messages (Code omitted in this example)
    });
  }