CODEWITHSUNDEEP
flutterdartgoogle-cloud-firestore
ajnabz
ajnabz

Reputation: 308

nested streambuilder and snapshot in Flutter

I am wanting to use two different collections from cloud firestore so I was trying to nest stream builders. However, I cant figure out how to then nest the snapshot. The error I am currently getting is:

flutter: Another exception was thrown: type '(DocumentSnapshot) => dynamic' is not a subtype of type '(QueryDocumentSnapshot) => Widget' of 'f'

This is my code:

new StreamBuilder(
                        stream: FirebaseFirestore.instance
                            .collection('moodIcons')
                            .snapshots(),
                        builder: (context, snapshot1) {
                          if (!snapshot1.hasData)
                            return Text('Loading data... Please Wait');

                          return StreamBuilder(
                              stream: FirebaseFirestore.instance
                                  .collection('activityIcons')
                                  .snapshots(),
                              builder: (context, snapshot2) {
                                if (!snapshot2.hasData)
                                  return Text('Loading data... Please Wait');

                                return Container(
                                  height: 100.0,
                                  child: new ListView(
                                    scrollDirection: Axis.horizontal,
                                    children: snapshot1.data.documents
                                        .map<Widget>(
                                            (DocumentSnapshot document1) {
                                      return snapshot2.data.documents
                                          .map<Widget>(
                                              (DocumentSnapshot document2) {
                                        if (document1.data()['display']) {
                                          return new Positioned(
                                              child: new MoodButton(
                                                  onTap: () {},
                                                  iconData: IconData(
                                                      document1.data()['ref'],
                                                      fontFamily:
                                                          'MaterialIcons')));
                                        }
                                        if (document2.data()['display']) {
                                          return new Positioned(
                                              child: new MoodButton(
                                                  onTap: () {},
                                                  iconData: IconData(
                                                      document2.data()['ref'],
                                                      fontFamily:
                                                          'MaterialIcons')));
                                        } else {
                                          return (Container());
                                        }
                                      }).toList();
                                    }).toList(),
                                  ),
                                );
                              });
                        }),

Any help would be appreciated!

Upvotes: 0

Views: 853

Answers (1)

Thierry
Thierry

Reputation: 8383

In your code, document1 and document2 are QueryDocumentSnapshot and not DocumentSnapshot.

Also, you are nesting the maps on the moodIcons and the activityIcons.

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final moodStream = FirebaseFirestore.instance.collection('moodIcons').snapshots();
    final activityStream = FirebaseFirestore.instance.collection('activityIcons').snapshots();
    return StreamBuilder<QuerySnapshot>(
      stream: moodStream,
      builder: (context, moodQuerySnapshot) => !moodQuerySnapshot.hasData
          ? Text('Loading data... Please Wait')
          : StreamBuilder<QuerySnapshot>(
              stream: activityStream,
              builder: (context, activityQuerySnapshot) => !activityQuerySnapshot.hasData
                      ? Text('Loading data... Please Wait')
                      : Container(
                          height: 100.0,
                          child: new ListView(
                            scrollDirection: Axis.horizontal,
                            children: [
                              ...moodQuerySnapshot.data.docs,
                              ...activityQuerySnapshot.data.docs,
                            ]
                                .where((queryDocSnapshot) => queryDocSnapshot.data()['display'])
                                .map(
                                  (queryDocSnapshot) => Positioned(
                                    child: MoodButton(
                                      onTap: () {},
                                      iconData: IconData(
                                        queryDocSnapshot.data()['ref'],
                                        fontFamily: 'MaterialIcons',
                                      ),
                                    ),
                                  ),
                                )
                                .toList(),
                          ),
                        ),
            ),
    );
  }
}

Upvotes: 1

Related Questions