状況
以下のサンプルで画面に画像を表示しようとしたところ
iOS Simulator(iPhone8)
では画像が表示されたが
Android Emulator(Nexus6)
では画像が表示されない
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以外が原因であるパターンもあるようです