Problem with displaying images in ListView, have error app crash when load all images at once and pagination code i have now is not work for some reason
Basicly want to fetch images from this firebase colection and display them in ‘ListView’ with pagination to my app not crash.
Hopfuly somebody can help me fix this issue, thank you!
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(CachedNetworkImage(imageUrl: image));
});
setState(() {
images = imgs;
});
});
}
class _CategoryTab1State extends State<CategoryTab1> {
List images = [];
late ScrollController controller;
final scaffoldKey = GlobalKey<ScaffoldState>();
@override
void initState() {
super.initState();
// addUrls();
controller = ScrollController()..addListener(_scrollListener);
initSliderImages();
if (this.mounted) {
context.read<CategoryTab1Bloc>().data.isNotEmpty
? print('data already loaded')
: context.read<CategoryTab1Bloc>().getData(mounted, widget.category);
}
}
@override
void dispose() {
controller.removeListener(_scrollListener);
super.dispose();
}
void _scrollListener() {
print(controller.position.extentAfter);
if (controller.position.extentAfter < 2) {
setState(() {
print('add 2 more');
print('add 2 more');
print('add 2 more');
print('add 2 more');
// images.addAll(['item1','item2','item3']
// List.generate(2, (index) => 'Inserted $index'
// )
// );
});
}
}
// //
// void addUrls() {
// final List<String> imgs = List.generate(
// 16,
// (_) {
// int random = Random().nextInt(16) + 16; // 250-500
// return
// // initSliderImages();
// // 'https://picsum.photos/$random/$random';
// 'https://firebasestorage.googleapis.com/v0/b/klosterkatz-c914e.appspot.com/o/galerytab1%2F1.png?alt=media&token=5b0e9c74-ec5a-42ca-aa59-309f41938a28';
//
//
//
//
// },
// );
// setState(() {
// images.addAll(imgs);
// });
// }
//
// Fetch images from databse for list
initSliderImages() async {
final int _limit = 3;
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(image);
});
setState(() {
images = imgs;
});
});
}
@override
Widget build(BuildContext context) {
print('imagesimageimagesimagesimageismageimage');
print('$images');
print(images.length);
return NotificationListener<ScrollNotification>(
onNotification: (ScrollNotification notification) {
if (notification.metrics.pixels ==
notification.metrics.maxScrollExtent) {
initSliderImages();
_scrollListener();
// addUrls();
}
return true;
},
child:
ListView.builder(
controller: controller,
key: widget.key,
itemCount: images.length,
itemExtent: 250,
itemBuilder: (context, index) {
return CachedNetworkImage(
imageUrl: images[index],
fit: BoxFit.cover,
key: ValueKey(images[index]),
);
}
),
);
}
}
2
Answers
In listview.Builder add shrinkWrap : primary false if not true
App is crashing due to memory issue. Following code is for proper pagination using firestore. Hope it will help you.