【Flutter】Web上の画像を表示する方法【初心者向け】

本記事では、FlutterでWeb上の画像を表示する方法について解説します。

参考：Display images from the internet ,Work with cached images

ImageのWidgetを使用する

これは一番簡単な方法で、以下のように記載することで簡単にWeb上の画像を表示することができます。Flutter公式によると、JPEG/PNG/GIF/Animated GIF/WebP/Animated WebP/BMP/WBMPに対応しており、その他のフォーマットは動作しているプラットフォーム（Android、iOSなど）に依存するようです。

Image.network('画像のURL'),

キャッシュを有効化して画像を表示する

前述した方法では、非常に簡単にWeb上の画像を表示することができますが、キャッシュ機能を有していないため、繰り返し表示されるような画像を表示する場合には適していません。

キャッシュを利用したい場合は、cached_network_imageパッケージのCachedNetworkImageを使用するようにFlutter公式で紹介されています。以下の例では、画像読み込み中にインジケータ（ぐるぐる）を表示する形になっています。

import 'package:cached_network_image/cached_network_image.dart'; // 外部パッケージのためインポート必要

CachedNetworkImage(
        imageUrl: "画像のURL",
        placeholder: (context, url) => CircularProgressIndicator(), // インジケータの表示
        errorWidget: (context, url, error) => Icon(Icons.error), // 読み込みエラー時に表示するアイコン
     ),