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/1.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) {
          // 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]),
          );
        },
      ),
    );
  }


} 

CodePudding user response：

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