问题

在我的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'

我该如何修复这个问题？

编辑：

• 我创建了一个示例项目这里，您可以轻松地查看问题

• 我报告了一个问题这里。

• 我还为cached_network_image报告了一个问题这里。

Image.network(
  url,
  errorBuilder: (context, error, stacktrace) => Container(color: Colors.red),
  width: 80,
  height: 80,
  cacheWidth: 80,
  cacheHeight: 80,
)

The following SocketException was thrown resolving an image codec:
Failed host lookup: 'i.discogs.com' (OS Error: No address associated with hostname, errno = 7)

CachedNetworkImage(
  placeholder: (context, url) => Container(color: Colors.red),
  errorWidget: (context, url, error) => Container(color: Colors.red),
  imageUrl: url,
  memCacheWidth: 80,
  memCacheHeight: 80,
)

The following _ClientSocketException was thrown resolving an image codec:
Failed host lookup: 'i.discogs.com'

答案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())),
// );
});
};
};

 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())),
        );
      });
    };

 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())),
        // );
      });
    };
};