Flutter中如何读取Firebase实时数据库的温湿度与时间戳？

核心逻辑 #

Firebase Realtime Database 的 onValue 方法会返回实时更新的数据流，StreamBuilder 负责监听这个流并自动刷新 UI 展示最新数据——二者是标准的实时数据同步组合，不存在功能冲突，反而能高效实现你需要的实时更新效果。

实现步骤与代码示例 #

1. 初始化数据库引用

先确保项目已配置好 Firebase Realtime Database，然后获取传感器数据节点的引用（请根据你的实际数据库结构调整节点路径）：

import 'package:firebase_database/firebase_database.dart';

// 假设传感器数据存放在`sensor_data`节点下
final DatabaseReference _sensorRef = FirebaseDatabase.instance.ref('sensor_data');

2. 用 StreamBuilder 监听并解析数据

直接在 UI 中嵌入 StreamBuilder，监听数据流并提取目标字段：

StreamBuilder(
  stream: _sensorRef.onValue,
  builder: (context, AsyncSnapshot<DatabaseEvent> snapshot) {
    // 处理未加载状态
    if (!snapshot.hasData) {
      return const Center(child: CircularProgressIndicator());
    }

    // 处理空数据或异常格式
    final data = snapshot.data?.snapshot.value;
    if (data == null || data is! Map) {
      return const Center(child: Text('暂无传感器数据'));
    }

    // 提取字段，键名需与数据库中完全一致
    double humidity = (data['humidity'] as num).toDouble();
    double temperature = (data['temperature'] as num).toDouble();
    int epochTs = data['Ts'] as int;

    // 将 epoch 时间戳转换为本地可读时间
    DateTime updateTime = DateTime.fromMillisecondsSinceEpoch(epochTs).toLocal();

    // 渲染数据
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text('湿度: ${humidity.toStringAsFixed(1)}%'),
        const SizedBox(height: 16),
        Text('温度: ${temperature.toStringAsFixed(1)}°C'),
        const SizedBox(height: 16),
        Text('更新时间: ${updateTime.toString().substring(0, 19)}'),
      ],
    );
  },
)

3. 关键注意事项

• 数据库权限：开发阶段可临时设置开放读写规则方便调试，上线前必须改为安全规则（比如限制特定用户访问）：

  {
    "rules": {
      ".read": true,
      ".write": true
    }
  }
  

• 多传感器场景：如果数据库是数组结构（多个传感器条目），需要遍历快照子节点：

  List<Map<String, dynamic>> sensorList = [];
  final children = snapshot.data?.snapshot.children;
  if (children != null) {
    for (var child in children) {
      sensorList.add(child.value as Map<String, dynamic>);
    }
  }
  // 遍历 sensorList 展示每个传感器的数据
  

• 类型安全：建议添加异常捕获避免数据类型不匹配崩溃：

  double? humidity;
  try {
    humidity = (data['humidity'] as num).toDouble();
  } catch (e) {
    humidity = null;
  }
  

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