Flutter / Firebase : Refresh FutureBuilder data between pages

Question

I'm a junior and I have a app where user can reads books. I want to put a feature where the app recommend other books. I use Firestore to store my data. So here I get the data from Firestore:

Future<List> getMoreChapter() async {
    final currentMangaChapters = await FirebaseFirestore.instance
        .collection('chapters')
        .where('manga', isEqualTo: _currentChapterManga)
        .get();
    moreChapter.clear();
    final currentMangaChaptersList =
        currentMangaChapters.docs.map((doc) => doc.data()).toList();
    genreReco.addAll(currentMangaChaptersList);

    return genreReco;
  }

Then I display the result into a ListView.builder and Future.builder:

FutureBuilder(
                  future: getMoreChapter(),
                  builder: (context, AsyncSnapshot future) {
                    if (!future.hasData) {
                      return Container();
                    } else {
                      var moreChaptersList = future.data;
                      return SizedBox(
                        height: 140,
                        child: ListView.builder(
                          scrollDirection: Axis.horizontal,
                          itemCount: moreChaptersList.length,
                          itemBuilder: (context, index) {
                            return Padding(
                                padding: const EdgeInsets.all(5),
                                child: SizedBox(
                                    width: 90,
                                    height: 90,
                                    child: SingleChildScrollView(
                                        child: Column(children: [
                                      Image.network(
                                        moreChaptersList[index]['pic'],
                                        height: 90,
                                        width: 90,
                                      ),
                                      const SizedBox(
                                        height: 5,
                                      ),
                                      Text(
                                        moreChaptersList[index]['title'],
                                        style: const TextStyle(
                                            fontSize: 10,
                                            fontWeight: FontWeight.bold),
                                        textAlign: TextAlign.center,
                                      ),
                                      const SizedBox(height: 4),
                                      Text(
                                          '${moreChaptersList[index]['number']}',
                                          style: const TextStyle(fontSize: 10)),
                                    ]))));
                          },
                        ),
                      );
                    }
                  })

It's working fine but the problem is when the user changes to another book, the app still displays the previous recommendations.

Example, first book:

and here the second one:

You can see at the bottom the problem. I think using Future.builder is not the best option. Do you have any suggestion?

Answer 1

Ok, so for those who want to know, the problem was because I don't return the good list but another one from other feature...

Be carefull !

Future<List> getMoreChapter() async {
    final currentMangaChapters = await FirebaseFirestore.instance
        .collection('chapters')
        .where('manga', isEqualTo: _currentChapterManga)
        .get();
    moreChapter.clear();
    final currentMangaChaptersList =
        currentMangaChapters.docs.map((doc) => doc.data()).toList();
    genreReco.addAll(currentMangaChaptersList);

    return currentMangaChaptersList;
  }