はじめに
FlutterWebで実装したアプリケーションをモバイル端末で確認しなくてはいけない状況になりました。
とはいえ開発環境のURLはlocalhostだし、どうやるんだこれ？？って思った時に、実機での確認方法を見つけたので、備忘として残しておきます。
結論、めっちゃ簡単です。
開発環境
[Flutterバージョン]
3.16.1
[使用端末]
PC: Macbook Air(M1)
モバイル端末: iPhone13Pro(17.4.1)
[開発ツール]
VSCode
Wi-Fi接続
前提として、PCと動作確認するモバイル端末を同じWi-Fiに接続してください。
IPアドレスの確認
以下の手順でIPアドレスを確認します。
アップルマーク > システム設定 > ネットワーク > Wi-Fi > 詳細
その画面にあるIPアドレスをコピーしておきましょう。
よく聞く、「192.168~」ってやつですね。
Webサーバ起動
以下のコマンドを打って、Webサーバを起動します。
fvm flutter run -d web-server --web-hostname=<IPアドレス> --web-port=8080
「< IPアドレス >」には、先の手順でコピーしたIPアドレスを貼り付けてください。
確認
ここまでできたら、実際にChromeで確認してみましょう。
検索バーに「http://< IPアドレス >:8080」で検索してみてください。Web上で動作するアプリが確認できると思います。
参考サイト