onError method of DecorationImage() in Flutter

user_10673528 0
Viewed 3241

Code works fine but because of my unreliable internet connection I am faced with an issue of NetworkImage.load ( See error image below )

Container(
 width: 60,
 height: 80,
 decoration: BoxDecoration(
  color: Colors.black12,
  borderRadius: BorderRadius.all(Radius.circular(7.0))
  image: DecorationImage(
   image: NetworkImage(trend['imageUrl']),
   onError: <how we can handle this?>,
   fit: BoxFit.cover
  ),
 ),
);

I hope this issue can be fixed by handling it on onError method (Correct me if I'm wrong). But I can't figure it out how to do that.

Error: Error I got on Android Studio

flutter-image flutter-layout flutter
3 Answers

First of all lets say you intialize NetworkImage inside your class. like:

var imgVariable = NetworkImage(trend['imageUrl']);

Then, load your network image. If, error occurs then we will load from our assets to let user know that we could not load network image.

Container(
 width: 60,
 height: 80,
 decoration: BoxDecoration(
  color: Colors.black12,
  borderRadius: BorderRadius.all(Radius.circular(7.0))
  image: DecorationImage(
   image: imgVariable,
   onError: (errDetails){
       setState(){
           imgVariable = AssetImage('assets/could_not_load_img.jpg');
       };
   },
   fit: BoxFit.cover
  ),
 ),
);

Here, assets/could_not_load_img.jpg is image that is imformative sthg.

*Note: This may not seem to work with errors, but this can be a way I came up with. There are plugins like cached_network_image to work beautifully on network images.

user_108605960

The accepted solution by Biplove doesn't seem to work anymore, at least I couldn't solve the resulting cast error when replacing the NetworkImage with an AssetImage. But a similar way would be:

class _YourClassState extends State<YourClass> {
 bool networkError = false;
 NetworkImage backgroundImage = const NetworkImage(
  'youUrl');
 AssetImage backgroundImageFallback = AssetImage('assets/img/....jpg');
 ...
 decoration: !networkError ? DecorationImage(
                  fit: BoxFit.fill,
                  onError: (Object e, StackTrace? stackTrace) {
                    log("Could not load the network image, showing fallback instead. Error: ${e.toString()}");
                    if (stackTrace != null) {
                      log(stackTrace.toString());
                    }
                    setState(() {
                      networkError = true;
                    });
                  },
                  image: backgroundImage) : 
                  DecorationImage(
                  fit: BoxFit.fill,
                  image: backgroundImageFallback)
                }
user_123201090

so, onError in flutter basically takes a return type of function
it takes some error that may generate during the loading/fetching of the response image URL as the parameter Error that is generated during call and a report that provides information about program subroutines that can be found in the debug console as well

onError:(error, stackTrace) => AssetImage('assets/could_not_load_img.jpg'),

or you can check these [click]https://github.com/flutter/flutter/issues/78925#issuecomment-806553363

[click]https://github.com/flutter/flutter/issues/78925

user_193569400
Related