Use with FirestoreQueryBuilder

[arnoutvandervorst]

First of all, nice package!

Trying to use this together with the FirestoreQueryBuilder to create a dynamic stack of cards streamed from a Firestore database. This setup works very well when combined with ListView, PageView or GridView, or any other builder that does infinite scrolling. The issue is that this widget removes cards and the FirestoreQueryBuilder also automatically rebuilds since the contents of the stream has changed due to the onSwipe callback and when new records are created in the database by other users. When I set the onSwipe result to false this is solved and it works, except...

The only thing is that the rebuild makes the focus card flicker for an instant, I don't see an easy way to remedy this. The entire CardSwiper widget rebuilds. The flickering shows the previous card for an instant. So you see the correct card from the background being animated to the front, then the previous card flickering, and then the correct front card again.

return FirestoreQueryBuilder<UserTask>(
      query: UserTask.unreadForQuery(user.id),
      pageSize: 5,
      builder: (context, snapshot, _) {
        if (snapshot.isFetching) {
          return SizedBox.shrink();
        }

        if (snapshot.hasData && snapshot.docs.isEmpty) {
          return SizedBox.shrink();
        }

        if (snapshot.hasError) {
          LogService.log(snapshot.error.toString());

          return SizedBox.shrink();
        }

        final focus = snapshot.docs.first.data();

        ///TODO: stop flickering due to rebuild
        return CardSwiper(
          cardBuilder: (context, index, _, __) {
            if (snapshot.hasMore && index + 1 == snapshot.docs.length) {
              snapshot.fetchMore();
            }

            return UserTaskSnapTileHome(
              userTask: snapshot.docs[index].data(),
              borderRadius: BorderRadius.circular(20),
            );
          },
          cardsCount: snapshot.docs.length,
          isLoop: false,
          padding: p12,
          numberOfCardsDisplayed: snapshot.docs.length > 1 ? 2 : 1,
          onSwipe: (previousIndex, currentIndex, direction) {
            switch (direction) {
              case CardSwiperDirection.right:
                focus.removeStatus([UserTaskStatus.unread]);
                break;
              case CardSwiperDirection.left:
                focus.removeStatus([UserTaskStatus.unread]);
                break;
              case CardSwiperDirection.top:
                focus.removeStatus([UserTaskStatus.unread]);
                break;
              default:
                break;
            }

            return false;
          },
        );
      },
    );

Do you have any suggestions?

[blue23992]

Hi, I am having a very similar issue with a FutureBuilder that connects to Firebase. This flickering is really annoying. Could I ask whether you found a way around it?