Flutterで画像キャッシュを簡単に！「cached_network_image」の使い方

ネットワーク画像を表示する際、毎回ダウンロードしていると通信量が無駄になります。
そんなときに便利なのが cached_network_image パッケージです。
画像のキャッシュ機能を自動で管理し、快適なUIを実現できます。

1. cached_network_imageとは？
2. インストール方法
3. 基本の使い方
1. 解説
4. キャッシュの制御
5. キャッシュの削除
6. まとめ
おわりに

1. cached_network_imageとは？

Flutterでネットワーク画像を読み込みつつ、ローカルにキャッシュしてくれる便利なパッケージです。
次回以降の表示が高速になり、オフラインでも画像が表示されます。

2. インストール方法

pubspec.yaml に以下を追加：

dependencies:
  cached_network_image: ^3.3.1

その後、以下を実行：

flutter pub get

3. 基本の使い方

以下は最もシンプルな使い方です。

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

class MyImagePage extends StatelessWidget {
  final String imageUrl = 'https://example.com/image.jpg';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('画像キャッシュの例')),
      body: Center(
        child: CachedNetworkImage(
          imageUrl: imageUrl,
          placeholder: (context, url) => CircularProgressIndicator(),
          errorWidget: (context, url, error) => Icon(Icons.error),
        ),
      ),
    );
  }
}

解説

imageUrl: 表示したい画像のURL
placeholder: ローディング中に表示するウィジェット
errorWidget: 読み込み失敗時に表示するウィジェット

4. キャッシュの制御

cached_network_image は内部的に flutter_cache_manager を使っています。
カスタムキャッシュ設定も可能です。

final customCacheManager = CacheManager(
  Config(
    'customCacheKey',
    stalePeriod: const Duration(days: 7),
    maxNrOfCacheObjects: 100,
  ),
);

CachedNetworkImage(
  imageUrl: imageUrl,
  cacheManager: customCacheManager,
);

stalePeriod: キャッシュの有効期限
maxNrOfCacheObjects: 保持する最大画像数

5. キャッシュの削除

手動でキャッシュを削除することも可能です：

await CachedNetworkImage.evictFromCache(imageUrl);

6. まとめ

機能	内容
画像の自動キャッシュ	対応（ローカル保存）
ローディング中のUI	`placeholder`で設定可能
失敗時のエラーハンドリング	`errorWidget`で設定可能
キャッシュ制御	有効期限やサイズを柔軟にカスタマイズ可能
オフライン表示	キャッシュ済みなら可能