时间戳

首页 > 解决方案 > 如何使用 BLoC 模式实时显示 Firebase 列表？

flutter - 如何使用 BLoC 模式实时显示 Firebase 列表？

问题描述

我有一个 TODO 列表功能（Alarmas），但我觉得我没有充分利用 Firebase 的实时功能。

小部件很好地显示了列表，但是当有人从另一部手机放置新任务时，我无法自动显示它，但我必须通过单击底部导航栏中的“TODO 按钮”再次调用构建。

有没有一种方法可以自动显示新任务而无需执行任何操作？

我正在使用 BLOC 模式和提供程序通过流获取数据...

@override
  Widget build(BuildContext context) {
    alarmaBloc.cargarAlarmas();

///---Scaffold and others

return StreamBuilder(
          stream: alarmaBloc.alarmasStream,
          builder: (BuildContext context, AsyncSnapshot<List<AlarmaModel>> snapshot){
            if (snapshot.hasData) {
              final tareasList = snapshot.data;
              if (tareasList.length == 0) return _imagenInicial(context);
            
              return ListView(

            children: [
              for (var itemPendiente in tareasList)
                _crearItem(context, alarmaBloc, itemPendiente),
              //more widgets
              ],
          );
        } else if (snapshot.hasError) {
          return Text(snapshot.error.toString());
        } 
          return Center (child: Image(image: AssetImage('Preloader.gif'), height: 200.0,));
      },
  ),

@puf 在如何实时显示 Firebase 列表中发布了一个解决方案？使用 setState，但我不知道如何实现它，因为我无法在 BLoC 模式页面中使用 setState。

更新

我的 BLoC 模式看起来像这样......

class AlarmaBloc {

  final _alarmaController = new BehaviorSubject<List<AlarmaModel>>();
  final _alarmaProvider = new AlarmaProvider();


  Stream <List<AlarmaModel>>    get alarmasStream     => _alarmaController.stream;

  Future<List<AlarmaModel>> cargarAlarmas() async {
    final alarmas = await _alarmaProvider.cargarAlarmas();
    _alarmaController.sink.add(alarmas);
    return alarmas;
  }

 //---

  dispose() {
    _alarmaController?.close();
  }

我的 PROVIDER 看起来像这样......

  Future<List<AlarmaModel>> cargarAlarmas() async {

  final List<AlarmaModel> alarmaList = new List(); 

  Query resp = db.child('alarmas');

  resp.onChildAdded.forEach((element) {
        print('Provider - Nuevo onChild Alarma ${element.snapshot.value['fecha']} - ${element.snapshot.value['nombreRefEstanque']} - ${element.snapshot.value['pesoPromedio']}}');
        final temp = AlarmaModel.fromJson(Map<String,dynamic>.from(element.snapshot.value));
        temp.idAlarma = element.snapshot.key;
        alarmaList.add(temp);    // element.snapshot.value.
  });
  await resp.once().then((snapshot) {
    print("Las Alarmas se cargaron totalmente - ${alarmaList.length}");
  });

      return alarmaList;

如何使用 BLoC 模式在“真实”实时中显示来自 Firebase 的列表？

标签： flutterfirebase-realtime-databaseblocrxdart

解决方案

推荐阅读