Flutter List View Pagination lazy load the images from firebase - flutter

Question

i try to implement pagination on my image list from firebase, and i need some help..
// Fetch images from databse for list
initSliderImages() async {
var result = await FirebaseFirestore.instance.collection('galerytab1');
result.snapshots().listen((data) {
List imgs = [];
data.docChanges.forEach((change) {
var imageData = change.doc.data();
String image = imageData?['url'];
imgs.add(CachedNetworkImageProvider(image));
});
setState(() {
images = imgs;
});
});}
I create ListView.build and try to fetch data using
_scrollListener() {
print(controller.position.extentAfter);
if (controller.position.extentAfter < 13) {
setState(() {
images.addAll(List.generate(2, (index) => 'Inserted $index'));
});
}_scrollListener() {
print(controller.position.extentAfter);
if (controller.position.extentAfter < 13) {
setState(() {
images.addAll(List.generate(2, (index) => 'Inserted $index'));
});
}}
#override
void
dispose() {
controller.removeListener(_scrollListener);
super.dispose();}
but i can't leazy load images that are storaged in this database collection 'galerytab1'
Question: How can i leazy load images from this collection'galerytab1' and display them in listview
Thank You!

Answer 1

setState will re-render your build method which causes the list and elements in the list to re-render as well. You can use KeyValue to prevent this from happening.
Also with modern flutter you can use NotificationListener instead of a ScrollController
This sample should give you a rough idea of how it works.
you can run it on dartpart
import 'dart:math';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: PaginationExample(
key: ValueKey('pagination'),
),
),
),
);
}
}
class PaginationExample extends StatefulWidget {
const PaginationExample({super.key});
#override
State<PaginationExample> createState() => PaginationExampleState();
}
class PaginationExampleState extends State<PaginationExample> {
List<String> urls = [];
#override
void initState() {
super.initState();
addUrls();
}
#override
void dispose() {
super.dispose();
}
void addUrls() {
final List<String> newUrls = List.generate(
10,
(_) {
int random = Random().nextInt(500) + 250; // 250-500
return 'https://picsum.photos/$random/$random';
},
);
setState(() {
urls.addAll(newUrls);
});
}
#override
Widget build(BuildContext context) {
return NotificationListener<ScrollNotification>(
onNotification: (ScrollNotification notification) {
if (notification.metrics.pixels ==
notification.metrics.maxScrollExtent) {
addUrls();
}
return true;
},
child: ListView.builder(
key: widget.key,
itemCount: urls.length,
itemExtent: 250,
itemBuilder: (context, index) {
return Image.network(
urls[index],
key: ValueKey(urls[index]),
);
},
),
);
}
}