在 Flutter 应用中下载、缓存和显示图片

缓存网络图片

一个 Flutter 库，用于从互联网上显示图片并将其保存在缓存目录中。

如何使用

CachedNetworkImage 可以直接使用，也可以通过 ImageProvider 使用。
CachedNetworkImage 和 CachedNetworkImageProvider 在 Web 上支持有限。目前不包含缓存功能。

带有占位符

CachedNetworkImage(
        imageUrl: "http://via.placeholder.com/350x150",
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
     ),

或带有进度指示器

CachedNetworkImage(
       imageUrl: "http://via.placeholder.com/350x150",
       progressIndicatorBuilder: (context, url, downloadProgress) => 
               CircularProgressIndicator(value: downloadProgress.progress),
       errorWidget: (context, url, error) => Icon(Icons.error),
    ),

Image(image: CachedNetworkImageProvider(url))

当您想要占位符功能并希望获取 imageprovider 以在另一个小部件中使用时，可以提供 imageBuilder

CachedNetworkImage(
  imageUrl: "http://via.placeholder.com/200x150",
  imageBuilder: (context, imageProvider) => Container(
    decoration: BoxDecoration(
      image: DecorationImage(
          image: imageProvider,
          fit: BoxFit.cover,
          colorFilter:
              ColorFilter.mode(Colors.red, BlendMode.colorBurn)),
    ),
  ),
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
),

工作原理

缓存网络图片使用 flutter_cache_manager 来存储和检索文件。

常见问题

我的应用在图片加载失败时崩溃了。(我知道，这不算一个真正的问题。)

真的崩溃了吗？调试器可能会暂停，因为 Dart VM 不将其识别为已捕获的异常；控制台可能会打印错误；甚至您的崩溃报告工具也可能会报告它（我知道，这真的很糟糕）。但是，它真的崩溃了吗？可能一切都运行正常。如果您真的遇到了应用崩溃，您可以报告一个问题，但请提供一个小的示例，以便我们能够重现该崩溃。

例如，请参阅之前提交的问题中的 此 或 此 回复。

GitHub

https://github.com/Baseflow/flutter_cached_network_image