如何使用 Firebase 实时数据库数据创建流构建器和列表视图（Flutter 聊天应用）

Question

我正在为我的个人学习项目构建一个颤振聊天应用程序，其中数据将从 Firebase 实时数据库中检索。

我从教程中获得了此代码，但它显示错误。如何解决？

StreamBuilder(
      stream: dbRef.onValue,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          print("Error on the way");
          messages.clear();
          DataSnapshot dataValues = snapshot.data.snapshot; //Error: The getter snapshot is not defined for the type 'Object';
          Map<dynamic, dynamic> values = dataValues.value;
          values.forEach((key, values) {
            messages.add(values);
          });
          return new ListView.builder(
            shrinkWrap: true,
            itemCount: messages.length,
            itemBuilder: (BuildContext context, int index) {
              return Card(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text("Name: " + messages[index]["Text"]),
                    Text("Time: " + messages[index]["TextTime"]),
                  ],
                ),
              );
            },
          );
        }
      },
    ),

Answer 1

根据DataSnapshot Class Documentation，没有名为snapshot的字段

我认为您的代码中有错字。

试试这个

StreamBuilder(
      stream: dbRef.onValue,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          print("Error on the way");
          messages.clear();
          DataSnapshot dataValues = snapshot.data! as DataSnapshot ; //here's the typo;
          Map<dynamic, dynamic> values = dataValues.value;
          values.forEach((key, values) {
            messages.add(values);
          });
          return new ListView.builder(
            shrinkWrap: true,
            itemCount: messages.length,
            itemBuilder: (BuildContext context, int index) {
              return Card(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text("Name: " + messages[index]["Text"]),
                    Text("Time: " + messages[index]["TextTime"]),
                  ],
                ),
              );
            },
          );
        }
      },
    ),

Answer 2

这解决了问题。

StreamBuilder(
                stream: _dbRef.onValue,
                builder: (context, snapshot) {
                  List<Message> messageList = [];
                  if (snapshot.hasData &&
                      snapshot.data != null &&
                      (snapshot.data! as DatabaseEvent).snapshot.value !=
                          null) {
                    final myMessages = Map<dynamic, dynamic>.from(
                        (snapshot.data! as DatabaseEvent).snapshot.value
                            as Map<dynamic, dynamic>); //typecasting
                    myMessages.forEach((key, value) {
                      final currentMessage = Map<String, dynamic>.from(value);
                      messageList.add(Message(
                          author: currentMessage['Author'],
                          authorId: currentMessage['Author_ID'],
                          text: currentMessage['Text'],
                          time: currentMessage['Time'],));
                    }); //created a class called message and added all messages in a List of class message
                    return ListView.builder(
                      reverse: true,
                      itemCount: messageList.length,
                      itemBuilder: (context, index) {
                        return ChattingDesign(
                          message: messageList[index],
                          dbpathToMsgChnl:
                              'TextChannels/${widget.channels['ChannelName']}/Messages',
                          showName: shouldShowName(
                            index,
                            messageList.length - 1,
                            messageList,
                          ),
                        );
                      },
                    );
                  } else {
                    return Center(
                      child: Text(
                        'Say Hi...',
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 21,
                            fontWeight: FontWeight.w400),
                      ),
                    );
                  }
                },
              ),