【Flutter】画像の読み込みが遅かった問題をcached_network_imageで改善する

この記事は、株式会社ゆめみの23卒 Advent Calendar 2023のアドベントカレンダーになります！！
色々な種類の記事が投稿されるので、お楽しみに🤗

初めに

開発を進める中で画像の読み込みが遅いな？？と思った時にすぐに改善策を思いつかずにいたので、今後も忘れないようにと思い、記事を書くことにしました。

cached_network_imageについて

簡単に説明すると、

• ネットワークから取得した画像をキャッシュして表示を高速化するためのPackageです。

キャッシュの仕組みについては以下の記事がわかりやすくまとめていただいているので掲載させていただきます🙇

導入までの流れ

flutter pub add cached_network_image

dependencies:
  cached_network_image: ^3.3.0 # 適宜最新のバージョンを入れてください

cached_network_imageを使用なしと使用あり

使用なし	使用あり

今回の場合は、写真の数が多くないため、大きな違いは見られないかもしれませんが、それでも違いが見られますね。

cached_network_imageを使用なしと使用ありの実装

// 使用なし
Image.network(
  '',
  fit: BoxFit.cover,
),


// 使用あり
CachedNetworkImage(
  imageUrl: '',
  fit: BoxFit.cover,
),

最後に

今回は少し画像でしたが、大量になってくると辛いなと思っていたのでよかったです💦

ちょっとした宣伝

株式会社ゆめみの23卒のメンバーでアドベントカレンダーを作成しています。
新卒のフレッシュな記事がたくさん投稿予定なので、少しでも興味があれば購読いただけると幸いです！！