how to use two future builder in one page in flutter

Question

In my Flutter app, I need to display two lists that are coming from the database, but I am having trouble getting both lists to display on the same screen. I am using two FutureBuilder widgets, but the first list is displaying correctly while the second list is still loading.

Here is the code I am using:

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) {
          // Build the list item widget here
        });
    }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) {
          // Build the list item widget here
        });
    }else{
      return const Center(child: CircularProgressIndicator(),);
    }
  }
);

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

The first FutureBuilder is used to build a list of QuranTextModel objects, and the second FutureBuilder is used to build a list of UrduTextModel objects. I am using a Column widget to display both lists, with each list contained within a SizedBox widget to give it a fixed height.

The issue I am having is that only the first list is displaying correctly, while the second list is still loading. How can I get both lists to display on the same screen?

Thank you for any help you can provide!

score 0 · Accepted Answer · answered Sep 18 '22 at 15:16

0

 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

answered Sep 18 '22 at 15:16

Shakthi Hettiarachchi

389
3
7

i actully solve the issue – waqas023 Sep 18 '22 at 15:52
but i thing u need to send any code which will help me more on connectionState – waqas023 Sep 18 '22 at 15:53
you can refer this page for more information https://api.flutter.dev/flutter/widgets/ConnectionState.html – Shakthi Hettiarachchi Sep 21 '22 at 10:10

how to use two future builder in one page in flutter

1 Answers1