onError method of DecorationImage() in Flutter - flutter

Question

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:

Answer 1

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.

Answer 2

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)
}

Answer 3

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