# Flutter Cached Network Imageの基本概要と使い方入門

## 目次

1. はじめに

2. Cached Network Imageとは

3. インストールとセットアップ

    - 3-1. pubspec.yamlの設定

    - 3-2. パッケージのインストール

4. 基本的な使い方

    - 4-1. シンプルな画像の表示

    - 4-2. プレースホルダーとエラーハンドリング

5. 高度な機能

    - 5-1. キャッシュの管理

    - 5-2. キャッシュのカスタマイズ

6. CachedNetworkImageを使ったパフォーマンスの最適化

7. 実例: 画像ギャラリーアプリの作成

8. まとめ

## 1. はじめに

Flutterはクロスプラットフォームのアプリケーション開発のための強力なツールキットで、その中で優れたパフォーマンスを発揮するUIコンポーネントが数多くあります。しかし、多くのアプリケーションでは外部のネットワークから取得した画像を表示する必要があります。これを効率的に行うために、cached_network_imageパッケージが頻繁に利用されます。

## 2. Cached Network Imageとは

Cached Network Imageは、Flutterで画像を読み込み、その結果を端末にキャッシュするための便利なパッケージです。このパッケージを利用することで、ネットワーク経由で画像を読み込む際の待ち時間を短縮し、オフライン環境でも画像を高速に表示することができます。

## 3. インストールとセットアップ

### 3-1. pubspec.yamlの設定

まず、プロジェクトの`pubspec.yaml`ファイルを開き、dependenciesセクションに以下のようにcached_network_imageを追加します。

```yaml

dependencies:

  flutter:

    sdk: flutter

  cached_network_image: ^3.2.0

```

### 3-2. パッケージのインストール

次に、ターミナルもしくはコマンドラインでプロジェクトのルートディレクトリに移動し、以下のコマンドを実行します。

```bash

flutter pub get

```

これで、cached_network_imageパッケージがインストールされ、プロジェクトで利用可能になります。

## 4. 基本的な使い方

### 4-1. シンプルな画像の表示

CachedNetworkImageを使用してインターネットから画像を読み込む最も基本的な方法は以下の通りです。

```dart

import 'package:cached_network_image/cached_network_image.dart';

import 'package:flutter/material.dart';

class SimpleImageExample extends StatelessWidget {

  final String imageUrl = "https://example.com/image.jpg";

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: Text('Cached Network Image Example')),

      body: Center(

        child: CachedNetworkImage(

          imageUrl: imageUrl,

          placeholder: (context, url) => CircularProgressIndicator(),

          errorWidget: (context, url, error) => Icon(Icons.error),

        ),

      ),

    );

  }

}

```

### 4-2. プレースホルダーとエラーハンドリング

画像がまだキャッシュされていない状態で読み込みを行う際、プレースホルダーを表示することができます。また、画像のロードに失敗した場合にエラーウィジェットを表示することも可能です。

- プレースホルダー: 読み込み中に一時的に表示されるウィジェット。

- エラーハンドリング: 画像のダウンロードに失敗したときに表示されるウィジェット。

これらは先ほどのコードスニペット内の`placeholder`および`errorWidget`プロパティで設定しています。

## 5. 高度な機能

### 5-1. キャッシュの管理

CachedNetworkImageではAndroid、iOS、Webでのキャッシュをコントロールできます。キャッシュを手動でクリアしたい場合は以下のようにします。

```dart

void clearCache() {

  DefaultCacheManager().emptyCache();

}

```

### 5-2. キャッシュのカスタマイズ

DefaultCacheManagerを使うことで、キャッシュの保存ディレクトリや保存可能サイズをカスタマイズすることも可能です。

```dart

CacheManager customCacheManager = CacheManager(

  Config(

    'customCacheKey',

    stalePeriod: const Duration(days: 7),

    maxNrOfCacheObjects: 100,

  ),

);

```

## 6. CachedNetworkImageを使ったパフォーマンスの最適化

多数の画像を表示するアプリケーションではパフォーマンスが重要です。CachedNetworkImageを利用すると、以下の利点があります。

- ネットワークから取得する画像は端末にキャッシュされるため、再読み込みが高速。

- メモリ上の消費が抑えられるため、アプリのレスポンスが向上。

- キャッシュの制御により、古いキャッシュを自動的にクリーンアップ。

## 7. 実例: 画像ギャラリーアプリの作成

簡単な画像ギャラリーアプリを作成してみましょう。このアプリでは、リスト表示で画像をスクロールし、各アイテムの画像がCachedNetworkImageによって提供されています。

```dart

import 'package:cached_network_image/cached_network_image.dart';

import 'package:flutter/material.dart';

class ImageGallery extends StatelessWidget {

  final List<String> imageUrls = [

    'https://example.com/image1.jpg',

    'https://example.com/image2.jpg',

    'https://example.com/image3.jpg',

    // さらに画像URLを追加してください

  ];

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: Text('Image Gallery')),

      body: ListView.builder(

        itemCount: imageUrls.length,

        itemBuilder: (context, index) {

          return Padding(

            padding: const EdgeInsets.all(8.0),

            child: CachedNetworkImage(

              imageUrl: imageUrls[index],

              placeholder: (context, url) => CircularProgressIndicator(),

              errorWidget: (context, url, error) => Icon(Icons.error),

            ),

          );

        },

      ),

    );

  }

}

```

## 8. まとめ

Cached Network Imageは、Flutterで効率的に画像を表示するためのライブラリです。この記事では、その基本的な使い方から高度な機能、パフォーマンスの最適化までを紹介しました。実際のアプリケーション開発において、ネットワーク画像の表示は頻繁に行われるため、ぜひこのパッケージを利用してUXの向上を図りましょう。

Flutter Cached Network Imageの基本概要と使い方入門

目次

続きを読むには単価診断を受けてください（30秒）