如何将Firebase实时数据库快照值赋值给Flutter变量

问题分析 #

你编写的getDbValueAsNumber函数存在逻辑漏洞：使用onValue.listen订阅实时数据流时，return语句写在listen的回调函数内部，但async函数不会等待listen回调执行，会直接返回null，导致你无法拿到数据库的值赋值给目标变量。

解决方案 #

根据使用场景分为两种实现方式：单次读取数据、实时监听数据变化（更适配实时数据库特性）

场景1：单次读取数据（仅获取当前快照值） #

修改函数返回Future，使用get()方法完成单次数据读取：

Future<num?> getDbValueAsNumber(String path, String grandeza) async {
  DatabaseReference refer = FirebaseDatabase.instance.ref(path);
  DatabaseEvent event = await refer.get();
  if (event.snapshot.exists) {
    final data = event.snapshot.value as Map;
    return data[grandeza] as num?;
  }
  return null;
}

在StatefulWidget中通过FutureBuilder完成变量赋值与UI更新：

class SensorPage extends StatefulWidget {
  const SensorPage({super.key});

  @override
  State<SensorPage> createState() => _SensorPageState();
}

class _SensorPageState extends State<SensorPage> {
  Future<num?>? _temp1Future;
  Future<num?>? _umid1Future;

  Future<num?> getDbValueAsNumber(String path, String grandeza) async {
    DatabaseReference refer = FirebaseDatabase.instance.ref(path);
    DatabaseEvent event = await refer.get();
    if (event.snapshot.exists) {
      final data = event.snapshot.value as Map;
      return data[grandeza] as num?;
    }
    return null;
  }

  @override
  void initState() {
    super.initState();
    // 替换为你的数据库路径与目标字段名
    _temp1Future = getDbValueAsNumber("devices/sensor1", "temp1");
    _umid1Future = getDbValueAsNumber("devices/sensor1", "umid1");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("传感器数据")),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                FutureBuilder<num?>(
                  future: _temp1Future,
                  builder: (context, snapshot) {
                    if (snapshot.connectionState == ConnectionState.waiting) {
                      return const CircularProgressIndicator();
                    }
                    final temp1 = snapshot.data ?? 0;
                    return createTempClock(temp1, "Temperatura 1");
                  },
                ),
                const SizedBox(height: 20),
                FutureBuilder<num?>(
                  future: _umid1Future,
                  builder: (context, snapshot) {
                    if (snapshot.connectionState == ConnectionState.waiting) {
                      return const CircularProgressIndicator();
                    }
                    final umid1 = snapshot.data ?? 0;
                    return createUmidClock(umid1, "Umidade 1");
                  },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

场景2：实时监听数据变化（数据库更新时自动刷新UI） #

修改函数返回Stream，直接监听实时数据流：

Stream<num?> getDbValueStream(String path, String grandeza) {
  DatabaseReference refer = FirebaseDatabase.instance.ref(path);
  return refer.onValue.map((DatabaseEvent event) {
    if (event.snapshot.exists) {
      final data = event.snapshot.value as Map;
      return data[grandeza] as num?;
    }
    return null;
  });
}

使用StreamBuilder在UI中实时展示数据：

class SensorPage extends StatelessWidget {
  const SensorPage({super.key});

  Stream<num?> getDbValueStream(String path, String grandeza) {
    DatabaseReference refer = FirebaseDatabase.instance.ref(path);
    return refer.onValue.map((DatabaseEvent event) {
      if (event.snapshot.exists) {
        final data = event.snapshot.value as Map;
        return data[grandeza] as num?;
      }
      return null;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("传感器数据")),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                StreamBuilder<num?>(
                  stream: getDbValueStream("devices/sensor1", "temp1"),
                  initialData: 0, // 设置初始显示值
                  builder: (context, snapshot) {
                    final temp1 = snapshot.data ?? 0;
                    return createTempClock(temp1, "Temperatura 1");
                  },
                ),
                const SizedBox(height: 20),
                StreamBuilder<num?>(
                  stream: getDbValueStream("devices/sensor1", "umid1"),
                  initialData: 0, // 设置初始显示值
                  builder: (context, snapshot) {
                    final umid1 = snapshot.data ?? 0;
                    return createUmidClock(umid1, "Umidade 1");
                  },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

关键注意事项 #

• 确保Firebase数据库规则允许读取操作，否则会触发权限异常
• 处理数据为空的边界情况，避免类型转换错误
• 实时监听场景下，StreamBuilder会自动管理数据流的订阅与取消，无需手动操作

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