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