You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在移动浏览器运行Flutter Web应用?求操作指导

在手机浏览器测试Flutter Web应用的步骤

别发愁,这事儿其实挺简单的,我帮你梳理清楚每一步:

  • 第一步:确保设备在同一网络
    先确认你的电脑和手机连接的是同一个Wi-Fi网络,这是基础前提,不然手机没法访问电脑上的服务。

  • 第二步:启动允许外部访问的Flutter Web服务
    默认情况下,flutter run -d chrome只允许本地访问,手机连不上。你需要用这个命令启动服务:

    flutter run -d web-server --web-port 8080 --web-hostname 0.0.0.0
    

    这里0.0.0.0表示允许所有设备访问你的电脑服务,8080是端口号,你也可以换成其他没被占用的端口(比如5000、3000)。

  • 第三步:找到电脑的本地IP地址
    你需要知道电脑在当前Wi-Fi下的IP,不同系统的查询方式:

    • Windows:打开命令提示符,输入ipconfig,找到“无线局域网适配器 Wi-Fi”下的IPv4地址(比如192.168.1.105
    • Mac/Linux:打开终端,输入ifconfig或者ip addr,找到Wi-Fi接口对应的inet地址(同样是类似192.168.x.x的格式)
  • 第四步:在手机浏览器访问应用
    打开手机上的浏览器(Chrome、Safari都行),输入地址:http://你的电脑IP:端口号,比如http://192.168.1.105:8080,回车就能看到你的Flutter Web应用啦!

额外调试小技巧

如果需要排查手机端的显示或功能问题,可以用Chrome的远程调试功能:

  1. 打开手机的USB调试模式(在开发者选项里,没开的话先找到「关于手机」,连续点击版本号开启开发者选项)
  2. 用USB线把手机连到电脑
  3. 在电脑的Chrome浏览器里输入chrome://inspect,就能看到连接的手机设备,点击对应的应用就能打开调试工具,和调试桌面网页一样方便。

内容的提问来源于stack exchange,提问作者Sana'a Al-ahdal

火山引擎 最新活动