英文:
Flutter Image.network() keeps crashing in AnimatedList if there is no Internet connection
问题
在我的Flutter应用中,我使用Image.network()
小部件如下来显示一张图片:
Image.network(
url,
errorBuilder: (context, error, stacktrace) => Container(color: Colors.red),
width: 80,
height: 80,
cacheWidth: 80,
cacheHeight: 80,
)
该小部件是在一个AnimatedList中使用的一部分。
如果我在列表中向下滚动而没有互联网连接,有时我的应用程序会崩溃,告诉我无法访问url
,尽管我使用了errorBuilder:
以下SocketException在解析图像编解码时抛出:
主机查找失败:'i.discogs.com' (OS错误:无与主机名关联的地址,errno = 7)
所以我尝试了另一种方法,使用了cached_network_image包:
CachedNetworkImage(
placeholder: (context, url) => Container(color: Colors.red),
errorWidget: (context, url, error) => Container(color: Colors.red),
imageUrl: url,
memCacheWidth: 80,
memCacheHeight: 80,
)
但是再次出现了类似的错误:
以下_ClientSocketException在解析图像编解码时抛出:
主机查找失败:'i.discogs.com'
我该如何修复这个问题?
编辑:
英文:
In my Flutter app, I use a Image.network()
widget as follows to display an image:
Image.network(
url,
errorBuilder: (context, error, stacktrace) => Container(color: Colors.red),
width: 80,
height: 80,
cacheWidth: 80,
cacheHeight: 80,
)
That widget is part of an item used in a AnimatedList.
If I'm scrolling down my list and I don't have an Internet connection, sometimes my app crashes telling me that it can't reach url
, even though I use errorBuilder:
The following SocketException was thrown resolving an image codec:
Failed host lookup: 'i.discogs.com' (OS Error: No address associated with hostname, errno = 7)
So I tried another approach with the cached_network_image package:
CachedNetworkImage(
placeholder: (context, url) => Container(color: Colors.red),
errorWidget: (context, url, error) => Container(color: Colors.red),
imageUrl: url,
memCacheWidth: 80,
memCacheHeight: 80,
)
But again, I get a similar error:
The following _ClientSocketException was thrown resolving an image codec:
Failed host lookup: 'i.discogs.com'
How can I fix that?
EDIT:
答案1
得分: 1
好的,以下是您提供的内容的翻译:
原文:
Ok. I have tested your sample code.<br>
The root cause of the error is this code in your main function, which pushes a page on top of your page if error occurs.<br>
翻译:
好的,我已经测试了您的示例代码。
错误的根本原因是您主函数中的这段代码,如果发生错误,它会在您的页面之上推送一个页面。
原文:
FlutterError.onError = (FlutterErrorDetails details) {
FlutterError.dumpErrorToConsole(details);
log(details.toString());
WidgetsBinding.instance.addPostFrameCallback((_) {
Navigator.push(
_navigatorKey.currentState!.context,
MaterialPageRoute(builder: (context) => ErrorPage(error: details.toString())),
);
});
};
Solution<br>
FlutterError.onError = (FlutterErrorDetails details) {
FlutterError.dumpErrorToConsole(details);
log(details.toString());
WidgetsBinding.instance.addPostFrameCallback((_) {
print("test is it called?");
// Don't push this widget to stack
// Navigator.push(
// _navigatorKey.currentState!.context,
// MaterialPageRoute(builder: (context) => ErrorPage(error: details.toString())),
// );
});
};
};
翻译:
解决方案:
FlutterError.onError = (FlutterErrorDetails details) {
FlutterError.dumpErrorToConsole(details);
log(details.toString());
WidgetsBinding.instance.addPostFrameCallback((_) {
print("测试是否被调用?");
// 不要将此小部件推送到堆栈
// Navigator.push(
// _navigatorKey.currentState!.context,
// MaterialPageRoute(builder: (context) => ErrorPage(error: details.toString())),
// );
});
};
};
英文:
Ok. I have tested your sample code.<br>
The root cause of the error is this code in your main function, which pushes a page on top of your page if error occurs.<br>
FlutterError.onError = (FlutterErrorDetails details) {
FlutterError.dumpErrorToConsole(details);
log(details.toString());
WidgetsBinding.instance.addPostFrameCallback((_) {
Navigator.push(
_navigatorKey.currentState!.context,
MaterialPageRoute(builder: (context) => ErrorPage(error: details.toString())),
);
});
};
Solution<br>
FlutterError.onError = (FlutterErrorDetails details) {
FlutterError.dumpErrorToConsole(details);
log(details.toString());
WidgetsBinding.instance.addPostFrameCallback((_) {
print("test is it called?");
// Don't push this widget to stack
// Navigator.push(
// _navigatorKey.currentState!.context,
// MaterialPageRoute(builder: (context) => ErrorPage(error: details.toString())),
// );
});
};
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论