Flutter Image.network()在没有网络连接的情况下会导致AnimatedList崩溃。

huangapple go评论66阅读模式
英文:

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'

我该如何修复这个问题?

编辑

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

  • 我报告了一个问题这里

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

英文:

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:

  • I created a sample project here, where you can easily see the problem

  • I reported a bug here.

  • I also reported a bug here for cached_network_image

答案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) =&gt; ErrorPage(error: details.toString())),
        );
      });
    };

Solution<br>

 FlutterError.onError = (FlutterErrorDetails details) {
      FlutterError.dumpErrorToConsole(details);
      log(details.toString());
      WidgetsBinding.instance.addPostFrameCallback((_) {
        print(&quot;test is it called?&quot;);
        // Don&#39;t push this widget to stack
        // Navigator.push(
        //   _navigatorKey.currentState!.context,
        //   MaterialPageRoute(builder: (context) =&gt; ErrorPage(error: details.toString())),
        // );
      });
    };
};

huangapple
  • 本文由 发表于 2023年6月15日 16:31:38
  • 转载请务必保留本文链接:https://go.coder-hub.com/76480593.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定