Firestore StreamBuilder with nested AnimatedList

Question

I am currently working on the chat aspect of my app. and I set up an AnimatedList inside of a StreamBuilder in order to make the messages appear in reverse. This is my code

      children: <Widget>[
        new Flexible(
          child: new StreamBuilder<QuerySnapshot> (
            stream: chatRoomRef.document(widget.chatRoomID).collection('messages')
                               .orderBy('time').snapshots(),
            builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot){
              return new AnimatedList(
                reverse: true,
                padding: const EdgeInsets.all(8.0),
                itemBuilder: (BuildContext context, int index, Animation<double> animation) {
                  return new ChatMessageListItem(
                    context: context,
                    index: index,
                    animation: animation,
                    reference: snapshot,
                  );
                }
              );
            }, 
          ),
        ),

My problem is that the builder is never hit, so the AnimatedList is never called. I am not sure the setup is correct so any help on this is much appreciated.

Edit: I am trying to make it work like the FirebaseAnimatedList widget. I dont know if that helps with understanding my goal here.

Thank you

I declare it in the State Class final CollectionReference chatRoomRef = Firestore.instance.collection('chatrooms'); — Romeo Bahoumda, Aug 04 '18 at 05:47
AnimatedList, in your case, require to work the constructor parameter **initialItemCount** (it is indeed used in FirebaseAnimatedList: https://github.com/FirebaseExtended/flutterfire/blob/master/packages/firebase_database/lib/ui/firebase_animated_list.dart ). — , Jan 27 '20 at 21:20

score 1 · Answer 1 · answered Aug 04 '18 at 04:37

Try to validate if your snapshot has data

            children: <Widget>[
                    new Flexible(
                      child: new StreamBuilder<QuerySnapshot> (
                        stream: chatRoomRef.document(widget.chatRoomID).collection('messages')
                                           .orderBy('time').snapshots(),
                        builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot){
                          return snapshot.hasData ? new AnimatedList(
                            reverse: true,
                            padding: const EdgeInsets.all(8.0),
                            itemBuilder: (BuildContext context, int index, Animation<double> animation) {
                              return new ChatMessageListItem(
                                context: context,
                                index: index,
                                animation: animation,
                                reference: snapshot,
                              );
                            }
                          ): new CircularProgressIndicator();
                        }, 
                      ),
                    ),

Unfortunately that did not work, I was trying to do the equivalent of the FIrebaseAnimatedList since theres not such feature with the cloudstore stream — Romeo Bahoumda, Aug 04 '18 at 20:03

score -1 · Accepted Answer · answered Jan 08 '19 at 07:37

Update: I fixed it by adding a custom animation as well as modifying the code in the documentation of cloud_firestore. My code looks like this now

 new Flexible(
              child: new StreamBuilder<QuerySnapshot> (
                stream: chatRoomRef.document(widget.chatRoomID).collection('messages')
                                   .orderBy('time').snapshots(),
                builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot){
                  return snapshot.hasData ? new ListView(
                    physics: const AlwaysScrollableScrollPhysics(),
                    reverse: true,
                    padding: const EdgeInsets.all(8.0),
                    children: snapshot.data.documents.map((DocumentSnapshot messageSnapshot) {
                        return new ChatMessageListItem(
                        context: context,
                        animation: _animation,
                        messageSnapshot: messageSnapshot,
                        currentUserEmail: curUserEmail,
                      );
                    }).toList(),
                  ): const CircularProgressIndicator();

Firestore StreamBuilder with nested AnimatedList

2 Answers2

Linked