background
When it comes to exception handling, you may directly think that it's not a try-catch thing. As for writing an article to explain it separately?
If you think so, this article may surprise you.~
And this article focuses on the exception handling of the image.
scene
Learning to apply, there are specific application scenarios, can deepen our knowledge.
Let's take a short list of articles as an example, as follows:
Assuming that the product has such a requirement, when the cover image on the right fails to load, replace it with a default image or fill the original image position with the text horizontally.
Regardless of the processing method, the first thing we need to do is to be able to know that the image loading failed.
How do I know that the image loading failed? Next, we compare the API of Flutter's own network load and a third-party network library.
Image.network
Let's look at the source code, as follows:
Image.network(String src, {
Key key,
double scale = 1.0,
this.semanticLabel,
this.excludeFromSemantics = false,
this.width,
this.height,
this.color,
this.colorBlendMode,
this.fit,
this.alignment = Alignment.center,
this.repeat = ImageRepeat.noRepeat,
this.centerSlice,
this.matchTextDirection = false,
this.gaplessPlayback = false,
this.filterQuality = FilterQuality.low,
Map<String, String> headers,
}) : image = NetworkImage(src, scale: scale, headers: headers),
assert(alignment != null),
assert(repeat != null),
assert(matchTextDirection != null),
super(key: key);You can see that only src is a required parameter, so we give the case where src is of different values.
1. The url of a picture
Widget _buildWidget() {
return Image.network('https://upload-images.jianshu.io/upload_images/5361063-e413832da0038304.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/800');
}The following figure can be displayed normally:
2. Unaccessible url s, such as random string test
Widget _buildWidget() {
return Image.network('test');
}The terminal error is as follows:
flutter: ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════ flutter: The following ArgumentError was thrown resolving an image codec: flutter: Invalid argument(s): No host specified in URI file:///test
The simulator displays blanks.
This scenario assumes that we want to catch exceptions and add try-catch, as follows:
Widget _buildWidget() {
try {
return Image.network('test');
} catch (e) {
print('enter catch exception start');
print(e);
print('enter catch exception end');
return Container();
}
}Still unable to capture
3. Accessible non-picture url s, such as http://mp.weixin.qq.com/mp/homepage?__biz=MzI3OTAyNzAwNg==&hid=5&sn=7e4598d8b00537fe2846f2e85d746b9a&scene=18#wechat_redirect
Widget _buildWidget() {
try {
return Image.network('http://mp.weixin.qq.com/mp/homepage?__biz=MzI3OTAyNzAwNg==&hid=5&sn=7e4598d8b00537fe2846f2e85d746b9a&scene=18#wechat_redirect');
} catch (e) {
print('enter catch exception start');
print(e);
print('enter catch exception end');
return Container();
}
}The console throws the following exception
[VERBOSE-2:codec.cc(97)] Failed decoding image. Data is either invalid, or it is encoded using an unsupported format. flutter: ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════ flutter: The following _Exception was thrown resolving an image codec: flutter: Exception: operation failed
You can see that try-catch is just as ineffective. No related logs were printed.
cached_network_image
This is a third-party development of the network library, the pub address is https://pub.dartlang.org/packages/cached_network_image
Because the project is useful to this library, so to use this as an example is not to advertise for it, as to whether you actually develop the library, or whether there are other better libraries, you need to evaluate them yourself.
Because this was chosen by the iOS colleagues of the project team, I haven't studied it in depth here.
We execute three case s in the same order as above.
1. The url of a picture
Widget _buildWidget() {
return Image(image: new CachedNetworkImageProvider('https://upload-images.jianshu.io/upload_images/5361063-e413832da0038304.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/800'));
}The following figure can be displayed normally:
2. Unaccessible url s, such as random string test
Widget _buildWidget() {
return Image(image: new CachedNetworkImageProvider('test'));
}The terminal error is as follows:
flutter: ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════ flutter: The following message was thrown resolving an image codec: flutter: Couldn't download or retrieve file.
The simulator displays blanks.
This scenario assumes that we want to catch exceptions and add try-catch, as follows:
Widget _buildWidget() {
try {
return Image(image: new CachedNetworkImageProvider('test'));
} catch (e) {
print('enter catch exception start');
print(e);
print('enter catch exception end');
return Container();
}
}Still unable to capture.
But through its own error callback, as follows:
Widget _buildWidget() {
return Image(
image: new CachedNetworkImageProvider(
'test',
errorListener: () {
print('enter errorListener');
}
)
);
}You can see that the console enters the errorListener and prints the corresponding log.
Although Flutter's own error log is still output, we can get this exception through errorListener.
flutter: enter errorListener flutter: ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════ flutter: The following message was thrown resolving an image codec: flutter: Couldn't download or retrieve file.
3. Accessible non-picture url s, such as http://mp.weixin.qq.com/mp/homepage?__biz=MzI3OTAyNzAwNg==&hid=5&sn=7e4598d8b00537fe2846f2e85d746b9a&scene=18#wechat_redirect
Widget _buildWidget() {
return Image(
image: new CachedNetworkImageProvider(
'http://mp.weixin.qq.com/mp/homepage?__biz=MzI3OTAyNzAwNg==&hid=5&sn=7e4598d8b00537fe2846f2e85d746b9a&scene=18#wechat_redirect',
errorListener: () {
print('enter errorListener');
}
)
);
}Running, the console will report errors, and can not capture, the console output is as follows:
[VERBOSE-2:codec.cc(97)] Failed decoding image. Data is either invalid, or it is encoded using an unsupported format. flutter: ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════ flutter: The following _Exception was thrown resolving an image codec: flutter: Exception: operation failed
The same is true of try-catch, which is not redundant here.
General Abnormal Capture Processing for Pictures
From the above study, we can find that neither Image.network nor cached_network_image can cover all the above two kinds of exception capture processing.
But what both of them have in common is that they all return to Image.
So the following generic templates can be used for image exception capture:
// Image image = Image(image: new CachedNetworkImageProvider(''));
Image image = Image.network('');
final ImageStream stream = image.image.resolve(ImageConfiguration.empty);
stream.addListener((_, __) {}, onError: (dynamic exception, StackTrace stackTrace) {
//TODO error callback
});The first step is to get an Image. If you get an Image Provider, you just need to change the image.image to your Image Provider. Of course, the author did not test it, just look at the type of image.image template above the source code is ImageProvider.
AdListener has two callbacks, of which successful callbacks are mandatory and have two parameters, because they are not needed here, so the first parameter is an underscore and the second parameter is two underscores. Maybe you'll say you don't need it, can you just fill in null? No, it's tested here. Fill in null and the console will throw an exception when the image is loaded successfully. So provide a callback that does not require any implementation.
Error callbacks are optional, because the theme of this article is to get error callbacks, so implementation is provided here.
For our three examples above, let's see if the generic template can be captured in all.
1. The url of a picture
Widget _buildWidget() {
Image image = Image.network('https://upload-images.jianshu.io/upload_images/5361063-e413832da0038304.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/800');
final ImageStream stream = image.image.resolve(ImageConfiguration.empty);
stream.addListener((_,__){}, onError: (dynamic exception, StackTrace stackTrace) {
print('enter onError start');
print(exception);
print(stackTrace);
print('enter onError end');
});
return image;
}The picture was loaded successfully.
2. Unaccessible url s, such as random string test
Widget _buildWidget() {
Image image = Image.network('test');
final ImageStream stream = image.image.resolve(ImageConfiguration.empty);
stream.addListener((_,__){}, onError: (dynamic exception, StackTrace stackTrace) {
print('enter onError start');
print(exception);
print(stackTrace);
print('enter onError end');
});
return image;
}The console output is as follows:
flutter: enter onError start flutter: Invalid argument(s): No host specified in URI file:///test flutter: #0 _HttpClient._openUrl (dart:_http/http_impl.dart:2121:9) #1 _HttpClient.getUrl (dart:_http/http_impl.dart:2056:48) #2 NetworkImage._loadAsync (package:flutter/src/painting/image_provider.dart:486:57) <asynchronous suspension> #3 NetworkImage.load (package:flutter/src/painting/image_provider.dart:471:14) #4 ImageProvider.resolve.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:267:86) #5 ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:143:20) #6 ImageProvider.resolve.<anonymous closure> (package:flutter/src/painting/image_provider.dart:267:63) #7 SynchronousFuture.then (package:flutter/src/foundation/synchronous_future.dart:38:29) #8 ImageProvider.resolve (package:flutter/src/painting/image_provider.dart:265:30) #9 MyApp._buildWidget (package:my_flutter/main.dart:20:42) #10 MyApp.build (package:my_flutter/main.dart:12:18) #11 StatelessElement.build (package:flutter/<…> flutter: enter onError end
You can see that the error callback has actually been entered.
3. Accessible non-picture url s, such as http://mp.weixin.qq.com/mp/homepage?__biz=MzI3OTAyNzAwNg==&hid=5&sn=7e4598d8b00537fe2846f2e85d746b9a&scene=18#wechat_redirect
Widget _buildWidget() {
Image image = Image.network('http://mp.weixin.qq.com/mp/homepage?__biz=MzI3OTAyNzAwNg==&hid=5&sn=7e4598d8b00537fe2846f2e85d746b9a&scene=18#wechat_redirect');
final ImageStream stream = image.image.resolve(ImageConfiguration.empty);
stream.addListener((_,__){}, onError: (dynamic exception, StackTrace stackTrace) {
print('enter onError start');
print(exception);
print(stackTrace);
print('enter onError end');
});
return image;
}The console output is as follows:
[VERBOSE-2:codec.cc(97)] Failed decoding image. Data is either invalid, or it is encoded using an unsupported format. flutter: enter onError start flutter: Exception: operation failed flutter: #0 NetworkImage._loadAsync (package:flutter/src/painting/image_provider.dart:498:12) <asynchronous suspension> #1 NetworkImage.load (package:flutter/src/painting/image_provider.dart:471:14) #2 ImageProvider.resolve.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:267:86) #3 ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:143:20) #4 ImageProvider.resolve.<anonymous closure> (package:flutter/src/painting/image_provider.dart:267:63) #5 SynchronousFuture.then (package:flutter/src/foundation/synchronous_future.dart:38:29) #6 ImageProvider.resolve (package:flutter/src/painting/image_provider.dart:265:30) #7 MyApp._buildWidget (package:my_flutter/main.dart:20:42) #8 MyApp.build (package:my_flutter/main.dart:12:18) #9 StatelessElement.build (package:flutter/src/widgets/framework.dart:3774:28) #10 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3721:15<…> flutter: enter onError end
You can see that the error callback has actually been entered.
Read more:
Flutter Introductory Blog Series
Flutter & Dart
Finally, an egg expression bag:
