FlutterでWebの画像を表示して読み込み失敗時は別の画像を表示させる

Flutterでネット上の画像を表示させて読み込み失敗時に
「読み込めませんでした」的な画像を表示してくれる便利なものないかな～って探した結果、
丁度いいのがあったのでご紹介します。

実行環境

• VS Code (version 1.47.2)
• Dart (version 2.8.4)
• Flutter (version 1.17.5)

インストール

今回は「cached_network_image」を使います。

1.「cached_network_image」とは

これです(雑。。)
https://pub.dev/packages/cached_network_image

2. pubspec.yamlに追加

以下をpubspec.yamlファイルに記載します。

cached_network_image: 2.2.0+1

3. インストール

ターミナルやコマンドラインで以下を実行する。
(VSCodeであればpubspec.yaml保存時に自動で実行されます。)

$ flutter packages get

ソースコード

1. インポート

以下のコードを追記します。

import ‘package:cached_network_image/cached_network_image.dart’;

2.「cached_network_image」の実装

CachedNetworkImage(
    imageUrl: ｛※１　ここに表示したいWeb画像URLを記載｝,
    errorWidget: (context, url, dynamic error) => 
        Image.asset(
            {※２　ここに表示したい画像を設定},
        ),
    ),

※１に表示したいWeb画像URLを記載する。(Stringです)
※１の取得に失敗した際に※2の画像を表示する。
　なので失敗した際に出したいImageなどを設定する。

簡単にですがこんな感じに実装できるといった紹介でした。