FirebaseAnimatedList使用query查询实时数据库返回空白列表如何解决

问题根因 #

问题出在异步加载的时序和FirebaseAnimatedList的初始化逻辑上：

1. 你从Firestore拉取currentworker用户数据是异步请求，组件第一次执行build的时候，Firestore请求还没有返回结果，此时currentworker是你初始化的空Worker对象，currentworker.department为null或者空值，传给查询条件自然匹配不到任何数据。
2. FirebaseAnimatedList的query参数是组件初始化时一次性生效的，就算后续你拉到了用户数据调用setState更新了currentworker，已经初始化完成的FirebaseAnimatedList也不会自动重新生成新的查询去拉取数据，因此页面一直保持空白。
   你直接写死'Maths'能正常返回数据，是因为组件初始化时查询参数就是确定的有效值，能直接匹配到数据库的对应条目。

解决方案 #

最直接的处理方式是等用户数据加载完成后，再渲染FirebaseAnimatedList：

1. 新增一个加载状态变量标记用户数据是否拉取完成：

User? wuser = FirebaseAuth.instance.currentUser;
Worker currentworker = Worker();
// 新增加载状态标记
bool _isWorkerLoaded = false;

@override
void initState() {
  super.initState();
  FirebaseFirestore.instance
      .collection("employees")
      .doc(wuser!.uid)
      .get()
      .then((value) {
    this.currentworker = Worker.fromMap(value.data());
    setState(() {
      _isWorkerLoaded = true;
    });
  });
}

2. build时先判断加载状态，未加载完成显示加载提示，加载完成再渲染列表：

@override
Widget build(BuildContext context) {
  if (!_isWorkerLoaded) {
    return const Center(child: CircularProgressIndicator());
  }
  return FirebaseAnimatedList(
    query: subjectref.orderByChild('department').equalTo(currentworker.department),
    itemBuilder: (BuildContext context, DataSnapshot snapshot,Animation<double> animation, int index) {
      return ListTile(
        title: Text(snapshot.value['courseName']),
      );
    }
  );
}

如果后续有动态切换查询条件的需求，可以给FirebaseAnimatedList加上key: ValueKey(currentworker.department)，当部门值变化时会自动销毁旧组件、用新的查询条件重新初始化列表。

内容的提问来源于stack exchange，提问作者coderhelp