The firebase RTDB data fetching issue

[4444monkey]

Hi There,
I hope I could have any advice regarding the weird display on the Android mobile system.
The issue I found was related to the function "FirebaseAnimatedList" that I called and tried to read the real-time data update from Firebase RTDB. I was sure everything went smoothly couple weeks ago, and no abnormal display was observed as well. Somehow, I re-tested it and found the abnormal display with the iterative wordings. I am confused about why it suddenly became this (picture was attached).

Other configurations were correctly set up following the website.
coding environment: Windows-VScode, Flutter kit, dart code

The code is as follows (I just simplified it):
import 'package:firebase_database/firebase_database.dart';
import 'package:firebase_database/ui/firebase_animated_list.dart';
import 'package:flutter/material.dart';

class DataPage extends StatefulWidget {
const DataPage({Key? key, required this.title}) : super(key: key);
final String title;

@OverRide
State createState() => _DataPageState();
}

class _DataPageState extends State {
// Get the Stream
final DatabaseReference _userRef = FirebaseDatabase.instance.ref();

@OverRide
void initState() {
super.initState();
}

@OverRide
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color.fromARGB(255, 166, 224, 211),
appBar: AppBar(
centerTitle: true,
title: const Text("RTDB Data Fetching"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: FirebaseAnimatedList(
query: _userRef,
itemBuilder: (context, snapshot, animation, index) {
// Replace the placeholder 'Test' with actual data from the snapshot
return Container();
},
),
),
],
),
);
}
}