Flutter: Do FutureBuilder Loads everything at the same time? - asynchronous

Question

My app has a book summaries Feature, Now since I don't have money to host an API, I am using Firebase/Firestore database where I add summaries manually and then retrieve data from firebase to App.
I am using FutureBuilder for it.
Now say I have 10 summaries will FutureBuilder first load all 10 of them and then display data on screen(which is a ListView.builder and can show only 2 summaries without scrolling) or it will load only the data which need to be painted on the screen just like simple ListView.builder.
// code to retrieve data:
Future<QuerySnapshot> getFeedsfromFb() async {
var data = await Firestore.instance
.collection('feedItem')
.orderBy('feedId', descending: true).getDocuments();
return data;
}
// building widget:
Widget feed() {
return Container(
width: deviceWidth,
height: deviceHeight / 3,
child: FutureBuilder(
future: getFeedsfromFb(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
return ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: snapshot.data.documents.length > 10
? 10
: snapshot.data.documents.length,
itemBuilder: (BuildContext context, int index) {
return Container(
width: deviceWidth / 2.5,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext context) => FeedIntro(
snapshot.data.documents[index]['feedId'])));
},
child: Card(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
// width: 150,
height: 150,
foregroundDecoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
snapshot.data.documents[index]['feedImage'],
),
fit: BoxFit.fill)),
),
Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(snapshot.data.documents[index]['title']),
)),
],
)),
),
);
},
);
} else if (snapshot.hasError) {
return Center(child: Text('Sorry Something went wrong!'));
} else {
return Center(
child: SizedBox(
child: CircularProgressIndicator(),
width: 50,
height: 50,
),
);
}
}),
);
}

Answer 1

Your FutureBuilder will load all items at the same, but only needed data by ListView.builder will be painted on the screen.