Problem display images in ListView with infinity pagination - flutter

Question

Problem with displaying images in ListView, have error that 'CachedNetworkImage' is nota subtype of type 'String'
Basicly want to fetch images from this firebase colection and display them in 'ListView' with pagination
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 CategoryTab1 extends StatefulWidget {
final String category;
CategoryTab1({Key? key, required this.category}) : super(key: key);
#override
_CategoryTab1State createState() => _CategoryTab1State();
}
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 < 13) {
setState(() {
images.addAll(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 {
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;
});
});
}
#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();
// addUrls();
}
return true;
},
child: ListView.builder(
key: widget.key,
itemCount: images.length,
itemExtent: 250,
itemBuilder: (context, index) {
return Image.network(
images[index],
fit: BoxFit.cover,
key: ValueKey(images[index]),
);
},
),
);
}
}

Answer 1

You can't add CachedNetworkImage in a list of String !
You have to map each url of your images list into a CachedNetworkImage like this :
itemBuilder: (context, index) {
return CachedNetworkImage(
imageUrl: images[index],
fit: BoxFit.cover,
key: ValueKey(images[index]),
);
}
You should also rename your images variable into urls or imageUrls