当Flutter解决NetworkImage时,如何捕获抛出的异常? [英] How can I catch exceptions thrown when flutter resolves a NetworkImage?
问题描述
我的用例是在出现错误时显示小吃店,但是由于我没有调用加载:抖动是。
My use-case here is to show a snackbar if there's an error, but I can't catch the SocketException since I'm not calling load: flutter is.
更新(示例堆栈跟踪):
Update (example stacktrace):
I/flutter (11702): ══╡ EXCEPTION CAUGHT BY SERVICES ╞══════════════════════════════════════════════════════════════════
I/flutter (11702): The following SocketException was thrown resolving a single-frame image stream:
I/flutter (11702): Connection failed (OS Error: Network is unreachable, errno = 101), address = (( snip )), port
I/flutter (11702): = 443
I/flutter (11702): When the exception was thrown, this was the stack:
I/flutter (11702): #0 IOClient.send (package:http/src/io_client.dart:30:23)
I/flutter (11702): <asynchronous suspension>
I/flutter (11702): #1 BaseClient._sendUnstreamed (package:http/src/base_client.dart:171:38)
I/flutter (11702): <asynchronous suspension>
I/flutter (11702): #2 BaseClient.get (package:http/src/base_client.dart:34:5)
I/flutter (11702): #3 NetworkImage._loadAsync (package:flutter/src/services/image_provider.dart:431:54)
I/flutter (11702): <asynchronous suspension>
I/flutter (11702): #4 NetworkImage.load (package:flutter/src/services/image_provider.dart:417:7)
I/flutter (11702): #5 ImageProvider.resolve.<anonymous closure>.<anonymous closure> (package:flutter/src/services/image_provider.dart:253:61)
推荐答案
我敢肯定,使用NetworkImage是不可能的,这是因为据我了解,只有在您等待引发异常的结果时,才能捕获异常。
I'm relatively certain it is not possible using NetworkImage and this is because as I understand exceptions can only be caught if you are awaiting the result of what is throwing an exception.
幸运的是,通过执行一些F12动作,代码似乎非常简单。因此,我的解决方案是在短短的几周内将NetworkImage的_loadAsync功能复制到自己的班级。 (就像转动Uint8List而不是编解码器一样)
Fortunately with a little F12 action it seems the code is pretty simple. So my solution was to copy NetworkImage's _loadAsync functionality to my own class with a few small tweeks. (Like rturning a Uint8List instead of a codec)
utils / network_image_loader.dart
utils/network_image_loader.dart
import 'package:flutter/services.dart';
import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:typed_data';
class NetworkImageLoader {
String url;
Map<String, String> headers;
NetworkImageLoader(this.url, {this.headers});
static final http.Client _httpClient = createHttpClient();
Future<Uint8List> load() async {
final Uri resolved = Uri.base.resolve(this.url);
final http.Response response = await _httpClient.get(resolved, headers: headers);
if (response == null || response.statusCode != 200)
throw new Exception('HTTP request failed, statusCode: ${response?.statusCode}, $resolved');
final Uint8List bytes = response.bodyBytes;
if (bytes.lengthInBytes == 0)
throw new Exception('NetworkImage is an empty file: $resolved');
return bytes;
}
}
一种简单的使用方法是自从我加载图像循环并显示默认值以来,它就有所不同,因此我没有进行这种方式的测试,但是它应该可以工作,或者很接近):
A simple way to use this would be (I used it differently since I was loading a loop of images and displaying a default, so I haven't tested this way, but it should work, or be close):
Widget img = new Text("Loading");
...
//Some function, ex constructor, init state, or a callback after you've done an http call
loadImage('http://imawesome.com');
...
@override
build(BuildContext context) {
return img;
}
Future<Uint8List> loadImage(String url) async {
try {
var netImg = new NetworkImageLoader(url);
var res = await netImg.load();
setState(() {
img = new Image(image: new MemoryImage(data),
height: 100.0,
width: 100.0,
fit: BoxFit.contain,
);
});
}
on Exception {
setState(() {
img = new Text("Load Failed");
}
}
}
因此,如果您要执行以下任一操作,则我的课很不错:
So my class is nice if you want to do any of the following:
- 在图像加载之前显示一些内容
- 处理加载图像的异常(或者事件只是忽略它们)
- 收听有关图像加载的事件(例如,在加载图像时执行某些操作)
编辑:
您可能还希望查看图像的淡入淡出效果,从而可以指定占位符,并且在许多情况下可能已足够: a href = https://flutter.io/cookbook/images/fading-in-images/ rel = noreferrer> https://flutter.io/cookbook/images/fading-in-images/
You may want to look into fade in images as well, which allow specifying a placeholder and may be sufficient for many cases: https://flutter.io/cookbook/images/fading-in-images/
这篇关于当Flutter解决NetworkImage时,如何捕获抛出的异常?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!