Note: I have already seen answers on Lazy Load of ListView but those are for custom API not firestore database!
I have a books summary app, App fetches data from my Firebase/Firestore
database and then display it using a ListView.builder
which is wrapped inside a StreamBuilder
.
Now, I want to fetch data lazily, I mean as the user scrolls through the List the required data gets loaded rather than loading data at once and then displaying it lazily.
//The Widget used to display data:
Widget feed() {
return Container(
width: deviceWidth,
height: deviceHeight / 3,
child: StreamBuilder(
stream: Firestore.instance
.collection('feedItem')
.orderBy('feedId', descending: true)
.snapshots(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
int totalLength = snapshot.data.documents.length;
return ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: totalLength > 10 ? 10 : totalLength,
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[
((totalLength - 1) - 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,
),
);
}
}),
);
}