Flutter问题：数据库内容仅在代码保存/热重载后显示

核心问题 #

你遇到的情况是异步获取数据后没有通知Flutter框架更新UI。虽然数据已经成功获取并添加到列表，但Flutter不知道数据发生了变化，所以初始渲染时列表是空的；热重载时UI重新构建，此时数据已经存在，所以能显示出来。

具体修复方案 #

1. 触发UI更新 #

在getKrankheiten()方法中，数据加载完成后调用setState()，通知框架重新构建UI：

getKrankheiten() async {
  await FirebaseFirestore.instance
      .collection("krankheiten")
      .orderBy("name")
      .get()
      .then((snapshot) => {
            snapshot.docs.forEach((doc) {
              krankheit_name.add(doc.data()["name"]);
              krankheit_beschreibung.add(doc.data()["beschreibung"]);
            })
          });

  // 添加此行，触发UI刷新
  setState(() {});

  for (int i = 0; i < krankheit_name.length; i++) {
    print("+++");
    print(krankheit_name.length);
    print(krankheit_name[i]);
    print(krankheit_beschreibung[i]);
  }
}

2. 避免重复请求数据 #

当前代码在build()方法中直接调用getKrankheiten()，会导致每次UI重建（比如屏幕旋转、父组件更新）都重复请求数据库。应该把数据初始化放在initState()中，只执行一次：

@override
void initState() {
  super.initState();
  // 组件初始化时加载数据
  getKrankheiten();
}

@override
Widget build(BuildContext context) {
  // 移除build方法内的getKrankheiten()调用
  return Scaffold(...);
}

3. 优化数据管理（可选） #

如果需要实时同步数据或简化代码，推荐使用StreamBuilder直接监听Firestore数据流，数据变化时自动更新UI，无需手动调用setState()：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBarCustom(widgetTitle: "Krankheiten"),
    body: SingleChildScrollView(
      child: Container(
        color: Color.fromRGBO(218, 243, 186, 1),
        child: Padding(
          padding: const EdgeInsets.all(15.0),
          child: StreamBuilder<QuerySnapshot>(
            stream: FirebaseFirestore.instance.collection("krankheiten").orderBy("name").snapshots(),
            builder: (context, snapshot) {
              if (!snapshot.hasData) {
                // 数据加载中显示加载状态
                return Center(child: CircularProgressIndicator());
              }
              return Column(
                children: snapshot.data!.docs.map((doc) {
                  return Container(
                    width: 500,
                    color: Colors.white,
                    margin: EdgeInsets.only(bottom: 15),
                    padding: EdgeInsets.fromLTRB(15, 15, 15, 15),
                    child: Padding(
                      padding: const EdgeInsets.only(top: 15, bottom: 15),
                      child: Text(doc.data()["name"],
                          textAlign: TextAlign.left, style: TextStyle(fontSize: 20.0)),
                    ),
                  );
                }).toList(),
              );
            },
          ),
        ),
      ),
    ),
  );
}

4. 清理冗余代码 #

把dispose()方法中注释掉的无效代码清理，保持代码整洁：

@override
void dispose() {
  super.dispose();
}

总结 #

• 核心是确保数据更新后调用setState()触发UI刷新
• 把数据初始化放在initState()避免重复请求
• 推荐使用StreamBuilder简化Firestore数据的UI绑定，同时支持实时更新

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