how to use two future builder in one page in flutter-CodePudding

hey i have an issue in my app in my app i need to show two list which are coming from future. So in signle screen i need to display both list from database. i am using two future builder but first builder is working and other is still loading so please help

future 1 is the first future list which return a list of quran text and i am using an container to display that list so this first list is visible but other one is not visible

var future1 = FutureBuilder<List<QuranTextModel>>(
        future: database.getQuranText(),
        builder: (context, snapshot) {
          if(snapshot.hasData){
            return ScrollablePositionedList.builder(
                itemScrollController: scrollToIndex,
                itemCount: snapshot.data!.length,
                initialScrollIndex: widget.position,
                itemBuilder: (context, index) {
                  QuranTextModel model = snapshot.data![index];
                  bookmarkModel = BookmarkNameModel(bookMarkTitle: "title", surahName: "surah", ayahPosition: index   1);
                  return InkWell(
                      onTap: () async {
                        // scrollToIndex.scrollTo(index: 10, duration: const Duration(seconds: 1000));
                      },
                      child: quranTextContainer(snapshot.data![index].verseText, snapshot.data![index].suraId, snapshot.data![index].verseId,"urdu"));
                });
          }else{
            return const Center(child: CircularProgressIndicator(),);
          }
        });
    var future2 = FutureBuilder<List<UrduTextModel>>(
        future: database.getUrduTranlation(),
        builder: (context, snapshot) {
          if(snapshot.hasData){
            return ScrollablePositionedList.builder(
                itemScrollController: scrollToIndex,
                itemCount: snapshot.data!.length,
                initialScrollIndex: widget.position,
                itemBuilder: (context, index) {
                  UrduTextModel model = snapshot.data![index];
                  bookmarkModel = BookmarkNameModel(bookMarkTitle: "title", surahName: "surah", ayahPosition: index   1);
                  return InkWell(
                      onTap: () async {
                        // scrollToIndex.scrollTo(index: 10, duration: const Duration(seconds: 1000));
                      },
                      child: quranTextContainer("", 1, 1,snapshot.data![index].text));
                });
          }else{
            return const Center(child: CircularProgressIndicator(),);
          }
        });

i am using column to display both list coming from future

Column(
          children: [
            SizedBox(
              height: 200,
                child: future1),
            SizedBox(height: 200,child: future2,)
          ],
        )

CodePudding user response：

 SingleChildScrollView(
          child: Column(
      children: [
        SizedBox(
          height: 200,
            child: future1),
        SizedBox(height: 200,child: future2,)
      ],
    ),
        ),

Try this.

also you have to check your future status before populate you can check that by using

if (snap.connectionState == ConnectionState.done) { your code. you can check does snpa has data in it.  }

connection state has deferent states that can help you to make your UI more interactive