【ライブラリ紹介】cached_network_image

キャッシュされたネットワーク画像: cached_network_image

概要

cached_network_image は、ネットワーク上の画像を表示し、それらをキャッシュディレクトリに保存するためのFlutterライブラリです。

使用方法

CachedNetworkImage は、直接使用するか、ImageProvider を介して使用できます。両方のオプションはウェブの最小限のサポートを提供しますが、現在はキャッシングは含まれていません。

プレースホルダーを使用する場合:

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),
)

別のウィジェットで使用するための ImageProvider を取得する場合:

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),
)

動作原理

cached_network_image は、flutter_cache_manager を使用してファイルを保存・取得します。

FAQ

• 画像読み込みに失敗するとアプリがクラッシュします。（質問ではありませんが、よくある状況です）
• 実際にクラッシュしているわけではないかもしれません。デバッガが一時停止する、コンソールにエラーが表示される、クラッシュレポートが表示されるかもしれません。しかし、本当にクラッシュしているのでしょうか？おそらく、すべては正常に動作しています。本当にアプリがクラッシュする場合は、小さな例を添えて問題を報告してください。

詳細は、こちらの例やこの回答を参照してください。