FlutterでNetworkImageクラスでサーバーから画像をダウンロードしている間別の画像を出す場合、方法について共有します。

ImageProviderの派生クラスNetoworkImageクラスではローデイング画像を出せない

実装を見ている限りですが、画像のダウンロード処理は await しているぽいでの別の画像をだすことはできません。

↓実際の内部実装


Future<ui.Codec> _loadAsync(NetworkImage key) async {
    assert(key == this);

    final Uri resolved = Uri.base.resolve(key.url);
    final HttpClientRequest request = await _httpClient.getUrl(resolved);
    headers?.forEach((String name, String value) {
      request.headers.add(name, value);
    });
    final HttpClientResponse response = await request.close();
    if (response.statusCode != HttpStatus.OK)
      throw new Exception('HTTP request failed, statusCode: ${response?.statusCode}, $resolved');

    final Uint8List bytes = await consolidateHttpClientResponseBytes(response);
    if (bytes.lengthInBytes == 0)
      throw new Exception('NetworkImage is an empty file: $resolved');

    return await ui.instantiateImageCodec(bytes);
  }

解決方法

FadeInImage クラスでラップしましょう
サンプルコードはこんな感じです

new FadeInImage(
     image: NetworkImage(snapshot["image_url"]),
     fit: BoxFit.fill,
     placeholder: AssetImage("assets/loading_image.png"),
)

placeholder　で別の画像を読み込んで出しましょう。