NetworkImageでAndroid Emulatorだけ画像が表示されない[Flutter][Mac]

5232 ワード
NetworkImage Dart Flutter Mac image Mac テキストリンク

状況

以下のサンプルで画面に画像を表示しようとしたところ
iOS Simulator(iPhone8)では画像が表示されたが
Android Emulator(Nexus6)では画像が表示されない

Sample.dart
import 'package:flutter/material.dart';

void main() => runApp(
    MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("hogeSample"),
            backgroundColor: Colors.green,
            ),
          backgroundColor: Colors.deepPurple,
          body: Center(
            child: Image(
                    //ここがうまくいかない
                    image: NetworkImage('https://qiita-user-profile-images.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F427937%2Fprofile-images%2F1561490860?ixlib=rb-1.2.2&auto=compress%2Cformat&lossless=0&w=300&s=eafa563fc759df778dafdcd7364c784a'),
              ),
            ),
          ),
      ),
);

Error Log

I/flutter (17431): ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
I/flutter (17431): The following SocketException was thrown resolving an image codec:
I/flutter (17431): Failed host lookup: 'qiita-user-profile-images.imgix.net' (OS Error: No address associated with
I/flutter (17431): hostname, errno = 7)

原因

iPhoneで表示されてAndroid Emulatorで表示されないのは
そもそもAndroid Emulatorだけインターネットに接続できないのが原因らしい
(Chrome開いてもどこにもアクセスできず、、、)
そりゃネット繋がらないんだからurlから画像取ってこれませんね。。

対策

インターネットに頑張って繋げる
→DNSサーバの設定で8.8.8.8を使うようにMac側で設定しましょう

システム環境設定を開く

8.8.8.8に設定

これでAndroidでもネットにアクセスでき
NetworkImageが機能して画像を取ってきてくれるようになりました！

・emulation - Android emulator not able to access the internet - Stack Overflow

・Androidのエミュレータでネットワークにつながらない場合の対処法 - Qiita
→terminal側からも設定するやり方もあります
(sdk入ってるはずなのにemulator: command not foundとなってしまい、↓の文献も見たのですが理由はよく分からず、、)
→こう修正すればできました(リンク先も修正されています)

cd (SDKの場所)/sdk/emulator
./emulator -list-avds
# この場合は Nexus_5X_API_25 の仮想デバイスでDNSサーバー 8.8.8.8 を利用する
./emulator -avd Nexus_5X_API_25 -dns-server 8.8.8.8

・android - Emulator command not found on Mac OS 10.7 - Stack Overflow

・Androidエミュレータがインターネットに繋がらない - Qiita
→DNS以外が原因であるパターンもあるようです