今日よりちょっと賢い明日、今よりずっと自由な未来

Liberal Arts & IT

IT

Flutter×DjangoをVS codeエミュレーターで実行できない話

投稿日:

事象:Chromeでは起動できるのにAndroidエミュレーターでは起動できない

バックエンドとしてDjango Rest APIを実装し、DBのデータを取得できるようにしました。
起動するデバイスとしてWeb-serverやChromeを選択すればDBデータを取得できるのですが、アンドロイドエミュレーターで実行しようとすると、アプリの枠は表示されるのにDBデータが取得できていません。

エラー内容

接続拒否されてレスポンスのlengthがnullだからエラーになっています。

本来は、ボタンだけでなくDBデータが表示されるはずです。

原因:web-serverとandroidでlocalhostの値が違う

URLの127.0.0.1:8000の部分を10.0.2.2:8000に変更すると、起動できます。

バックエンド側のallowed hostの値も変更する必要があります。
以下がDjangoのsettings.pyの設定

恒久対応:ローカルホストを自分のIPアドレスにする

Djangoをrunserverするときに、0.0.0.0を指定します。これで現在の自分のIPアドレスで起動されます。

ブラウザからAPIの結果を確認したい場合は、ipconfigで自分のIPアドレスを確認してから、http://自分のIPアドレス:8000にアクセスします。
Flutter上のURLも、自分のIPアドレスに変更します。Terminalに表示しているのは「ipconfig」の結果です。

これで、Android、Chrome(web-server)どちらで実行しても結果が表示されるようになりました。

おまけ:ポート番号の指定

なお、Flutterをポートを指定せずに実行すると、毎回ポート番号が自動採番されてそのたびにDjangoのCORS_ORIGIN_WHITELISTを直さなければならなくなるので、launch.jsonを以下のように変更しています

emulator-5554はデバイスIDで、「flutter devices」というコマンドで調べることができます。
このように設定しておくことで、Ctrl+F5する度にアンドロイド端末、ポート8000で起動されます。

-IT
-,

Copyright© Liberal Arts & IT , 2022 All Rights Reserved Powered by STINGER.