Home > Enterprise >  How to create streambuilder and listview with Firebase Realtime database data (Flutter chat app)
How to create streambuilder and listview with Firebase Realtime database data (Flutter chat app)

Time:01-21

I'm building a flutter chat app for my personal learning project where the data will be retrieved from Firebase Realtime database.

I got this code from a tutorial but it is showing errors. How to solve this?

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"]),
                  ],
                ),
              );
            },
          );
        }
      },
    ),

CodePudding user response:

According to the DataSnapshot Class Documentation there is no field called snapshot

I think there is a typo in your code.

Try this

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"]),
                  ],
                ),
              );
            },
          );
        }
      },
    ),

CodePudding user response:

This solved the problem.

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>);
                    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'],));
                    });
                    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),
                      ),
                    );
                  }
                },
              ),
  •  Tags:  
  • Related