💸

【Flutter】cached_network_imageでキャッシュがない状態の再現方法

2024/03/28に公開

概要

Flutterでアプリ開発をするとき、cached_network_imageなどのライブラリを使って画像をキャッシュすることがあると思います。
キャッシュを実装した後で、初回アクセス時等のキャッシュがない状況を再現したい時があります。この状況の再現は、キャッシュの効率性や正確性を確認するために不可欠です。

Flutterでは、初回アクセス時のキャッシュがない状況を再現する方法がいくつか用意されています。

初回アクセスの再現方法

2つ紹介します。先に結論からお伝えすると、①の方がシンプルですが、使い勝手を考えると②の方が良いと思います。

①エミュレータのキャッシュを削除する

エミュレータを使用する場合、アプリ&エミュレータを再起動することでキャッシュを削除することができます。
iOSの場合、手順は以下の通りです。

  1. メニューバーから「Device」→「Erase All Content and Settings...」を選択
  2. 確認ダイアログが表示されたら「Erase」をクリックしてシミュレータをリセット

この方法のメリット、デメリットは以下の通りです。

メリット

  • コードに修正を加える必要がない

デメリット

  • 実機の場合、この方法は使えない
  • 時間がかかる(アプリのビルドやエミュレータの再起動に時間がかかるため)

②flutter_cache_managerを利用してキャッシュを削除する

flutter_cache_manager にはemptyCache()メソッドが用意されており、このメソッドを呼ぶことでキャッシュを削除することができます。
以下は実装例です。

サンプルコード

import 'package:flutter_cache_manager/flutter_cache_manager.dart';

void clearCache() async {
  final cacheManager = DefaultCacheManager();
  await cacheManager.emptyCache(); // キャッシュをクリア
}

適切な場所でメソッドを実行します。

clearCache();

この方法のメリット、デメリットは以下の通りです。

メリット

  • リビルドする手間がない(Hot Reload等で手軽に何度も挙動を確認できる)

デメリット

  • コードに修正を加える必要がある

終わり

間違いやご指摘等あればコメントしていただけると助かります。
読んでくださりありがとうございました!!

Discussion