Issue

This Content is from Stack Overflow. Question asked by waqas023

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,)
          ],
        )

Solution

 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

This Question was asked in StackOverflow by waqas023 and Answered by Shakthi Hettiarachchi It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.