🧭

Flutter WebをLAN内の他のデバイスでデバッグする

2022/11/30に公開

Flutter

Web

tech

Flutter Webを開発したときに、開発機以外でも動かしたい。
スマホや他のPCでも動かしたい。実機で。

解法

flutter runするときに、hostnameとportを以下のように指定すると、外部からもアクセスできるようになります。

> flutter run -d web-server --web-hostname=0.0.0.0 --web-port=50505

0.0.0.0の部分には、開発機のローカルIPを入れます。ipconfigなどのコマンドから調べてください。

最初に実行すると、Windowsだとfirewallの設定が出てくるので、許可します。

Web Serverが立ち上がったら、同じLAN内のデバイスからhttp://0.0.0.0:50505にアクセスしましょう。

> flutter run -d web-server --web-hostname=192.168.1.9 --web-port=50505
Launching lib\main.dart on Web Server in debug mode...
Waiting for connection from debug service on Web Server...         20.8s
lib\main.dart is being served at http://192.168.1.9:50505
The web-server device requires the Dart Debug Chrome extension for debugging. Consider using the Chrome or Edge devices
for an improved development workflow.

🔥  To hot restart changes while running, press "r" or "R".
For a more detailed help message, press "h". To quit, press "q".

スマホのブラウザから入れました！

hot restartは効かない

解法

Discussion