How to prevent flutter app crash on fail to load NetworkImage?

Question

I checked mon many sources and everybody say to use FadeImage or CachedNetworkimage that got a property to return a Widget in case of error but in my case none of that work and I still don't know what's wrong. The error I got is "HTTP request failed, statusCode: 404, https://storage.gra.cloud.ovh.net/v1/AUTH_4fffdc10a38b40948ec3cab909dd99f3/YeessalStaticProd/7581-3296-2018-03-30.JPG", I know this one is unavailable. My images are from an API and I can't know if the images I get are available or not.

I thougth this kind of error could be carried using the code I used here :

  Widget getImageCover(double width, double height) {
    if (imageCover == null || imageCover!.toString().isEmpty) {
      return Image.asset(
        'assets/no_image.png',
        fit: BoxFit.cover,
        width: width,
        height: height,
      );
    }
    return Image.network(
      imageCover!,
      fit: BoxFit.fitWidth,
      width: width,
      height: height,
      loadingBuilder: (context, child, loadingProgress) {
        if (loadingProgress == null) return child;
        return Center(
          child: CircularProgressIndicator(),
        );
      },
      errorBuilder: (context, error, stackTrace) {
        return Center(
          child: Icon(
            Icons.error,
            color: Colors.red,
          ),
        );
      },
    );
    // return FadeInImage(
    //   image: NetworkImage(imageCover!),
    //   placeholder: AssetImage("assets/no_image.png"),
    //   imageErrorBuilder: (context, error, stackTrace) {
    //     return Center(
    //       child: Icon(
    //         Icons.error,
    //         color: Colors.red,
    //       ),
    //     );
    //   },
    //   fit: BoxFit.fitWidth,
    // );
    // CachedNetworkImage img = CachedNetworkImage(
    //   imageUrl: imageCover!,
    //   fit: BoxFit.cover,
    //   width: width,
    //   height: height,
    //   placeholder: (context, url) => Center(
    //     child: const CircularProgressIndicator(),
    //   ),
    //   errorWidget: (context, url, error) => const Icon(Icons.error),
    // );
    // return img;
  }

As you can see in comment of the function I tried many ways to prevent this error but I still get the same error. I'm really out of solutions right now🫤

UPDATE : I just noticed that the app crash when I am in launch the app from the IDE with the run button (Is this what is called 'debug mode'?) but when I launch the app directly from my phone (the builded app installed after compilation) the expected behavior happens.

So It "works" but I still don't know why it crash when I launch from the IDE. Some ideas ?

Answer 1

I finally got a solution to this problem and I simply had to update the breakpoints settings of Vs code. Image of breakpoint settings section on vs code

I just had to uncheck the '_network_image_io.dart' there and everything worked fine.

Thanks to Angel Roma for his contribution.