Flutter中基于Firebase Realtime Database实现聊天无限滚动加载

我正在为移动应用集成聊天功能，为降低成本选择Firebase Realtime Database而非Firestore作为后端，但关于Realtime Database实现无限滚动的资料十分匮乏。

当前我的消息查询语句、MessageWidget、主界面代码及滚动监听逻辑如下，需要实现滚动到列表顶部时触发查询，加载更早的消息并添加到现有消息上方的功能：

消息查询语句 #

FirebaseDatabase.instance
            .ref("messages/${widget.placeID}")
            .orderByChild("timeStamp")

MessageWidget实现 #

MessageWidget(
  message: message.text,
  id: message.uid,
  name: message.name,
  lastSender: message.lastSender,
  date: message.timeStamp,
  profilePicture: message.profilePicture,
);

数据库结构说明：messages/{placeID}节点下存储多个消息条目，每个条目包含timeStamp、text、uid、name等字段。

当前主界面代码 #

Flexible(
  child: StreamBuilder(
    stream: FirebaseDatabase.instance
        .ref("messages/${widget.placeID}")
        .orderByChild("timeStamp")
        .limitToLast(20)
        .onValue,
    builder:
        (context, AsyncSnapshot<DatabaseEvent> snapshot) {
      if (!snapshot.hasData) {
        return const CircularProgressIndicator();
      } else {
        Map<dynamic, dynamic> map =
            snapshot.data!.snapshot.value as dynamic;
        List<dynamic> list = [];
        list.clear();
        list = map.values.toList();
        return Align(
          alignment: Alignment.bottomCenter,
          child: Padding(
            padding: const EdgeInsets.only(bottom: 20),
            child: ListView.builder(
                controller: _scrollController,
                // shrinkWrap: true,
                itemCount: list.length,
                itemBuilder: (context, index) {
                  final json = list[index]
                      as Map<dynamic, dynamic>;
                  final message = Message.fromJson(json);
                  return MessageWidget(
                    message: message.text,
                    id: message.uid,
                    name: message.name,
                    lastSender: message.lastSender,
                    date: message.timeStamp,
                    profilePicture:
                        message.profilePicture,
                  );
                }),
          ),
        );
      }
    },
  ),
),

滚动监听逻辑（initState） #

void initState() {
   super.initState();

   _scrollController.addListener(() {
     if (_scrollController.position.atEdge) {
       bool isTop = _scrollController.position.pixels == 0;
       if (isTop) {
         //add more messages

       } else {
         print('At the bottom');
       }
     }
   });
 }

内容的提问来源于stack exchange，提问作者Mohammad Abd-Elmoniem