Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter: avoid exception from Network Image if unavailable

Tags:

flutter

dart

I am trying to avoid an exception in case if network image is available or returns 404. I am expecting, it should return the DefaultImagePlaceholder in that case. FOr that I created a common widget (named getNetworkImageV2) which renders an image, is part of the list widget within the widget is rendering iteratively.

Widget getNetworkImageV2(BuildContext context, String image, {BoxFit fit = BoxFit.cover, double height = 60.0, double width = 80.0}) {
  return FadeInImage(
    placeholder: MemoryImage(kTransparentImage),
    image: NetworkImage(image),
    fit: fit,
    height: height,
    width: width,
    fadeInDuration: Duration(milliseconds: 100),
    placeholderErrorBuilder: (context, ob, stack) => Container(child: Image.asset(DefaultPlaceholder, fit: fit, height: height, width: width)),
    imageErrorBuilder: (context, ob, stack) => Container(child: Image.asset(DefaultPlaceholder, fit: fit, height: height, width: width)),
  );
}

Exception:

======== Exception caught by image resource service ================================================
The following NetworkImageLoadException was thrown resolving an image codec:
HTTP request failed, statusCode: 404, https://i.ytimg.com/vi/WdGayNA5NUA/hqdefault.jpg

When the exception was thrown, this was the stack: 
#0      NetworkImage._loadAsync (package:flutter/src/painting/_network_image_io.dart:99:9)
<asynchronous suspension>
#1      NetworkImage.load (package:flutter/src/painting/_network_image_io.dart:50:14)
#2      ImageProvider.resolveStreamForKey.<anonymous closure> (package:flutter/src/painting/image_provider.dart:504:13)
#3      ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:355:22)
...
Image provider: NetworkImage("https://i.ytimg.com/vi/WdGayNA5NUA/hqdefault.jpg", scale: 1.0)
Image key: NetworkImage("https://i.ytimg.com/vi/WdGayNA5NUA/hqdefault.jpg", scale: 1.0)
====================================================================================================

======== Exception caught by image resource service ================================================
HTTP request failed, statusCode: 404, https://i.ytimg.com/vi/4sO_n7fn02I/hqdefault.jpg
====================================================================================================
I/flutter ( 5824): VIDEO-API: http://10.0.2.2:3001/api/_w/videos/1559520687419294485/detail

======== Exception caught by image resource service ================================================

like image 541
Sankalp Avatar asked Jul 03 '26 21:07

Sankalp


1 Answers

  Image.network(
      "URL",
      fit: BoxFit.cover,
      loadingBuilder: (BuildContext ctx, Widget child, ImageChunkEvent loadingProgress) {
        if (loadingProgress == null) {
          return child;
        }else {
          return Center(
            child: CircularProgressIndicator(
              valueColor: AlwaysStoppedAnimation<Color>(Colors.green),
            ),
          );
        }
      },       
  )
like image 156
Tasnuva Tavasum oshin Avatar answered Jul 06 '26 11:07

Tasnuva Tavasum oshin



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!