查看在移动设备上的Flutter网页

Question

我正在构建一个Flutter Web应用程序，但我希望它在手机和桌面上表现不同。为了测试它，是否可以在手机浏览器或模拟器的浏览器中运行Web应用程序？谢谢。

- Bennett567

---

https://dev59.com/L1EG5IYBdhLWcg3wgPt3#68223713 - Leonid Veremchuk

Answer 1

是的，在生产环境中通过网页浏览器测试您的代码是可能的。以下是实现此操作的步骤：

• 将您的设备（笔记本电脑和手机）连接到同一个互联网上
• 在打开的项目终端中运行以下代码

t

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

然后，打开您的手机浏览器并输入：

HTTP://<your IP address>:8080

- JAtoms

---

欢迎 @Michael - JAtoms

请确保IP地址应为您的系统/ PC IP地址，而不是您真实设备的地址。我以前也是这样做的，但后来发现我必须输入我的PC IP地址。希望对其他开发人员有所帮助。 - Mehroze Zaidi

Answer 2

1.

你需要在特定端口启动你的Flutter Web应用

flutter run -d web-server --web-port 5011

2.

连接你的设备并验证设备是否已正确连接

adb devices

3.

adb端口转发

adb reverse tcp:5011 tcp:5011

4.

使用http://localhost:5011/在移动浏览器中打开

之后，你就可以在移动浏览器上访问该端口。

- Rinkesh

---

如何按照最后一条指令进行操作：“之后，您就可以在移动浏览器上访问该端口。”是通过复制URL并将localhost替换为设备IP，还是只需复制URL（例如http://localhost:5011/#/）并对其进行某些操作？谢谢。 - Samuel Nde

无需通过本地主机指定IP地址，您可以访问您的页面。 - Rinkesh

你可以访问你的页面，但是怎样访问？ - Samuel Nde

@SamuelNde 使用 http://localhost:5011/ 打开移动浏览器。 - Rinkesh

我看到你在回答中添加了更多步骤。非常感谢。现在非常清楚该怎么做了。 - Samuel Nde

Answer 3

上述答案是不正确的。我在模拟器的移动浏览器中测试所有我的Flutter Web开发。我使用VS Code。您的环境可能不同。

以下是步骤：

1. 在Chrome（Web）上运行项目，这将启动本地服务器和Chrome浏览器。从浏览器中复制URL。在我的情况下，我将其始终设为http://localhost:8686/#/。
2. 启动模拟器。
3. 在模拟器上启动Safari或其他浏览器。将URL粘贴到浏览器中。

如果真机与您的开发计算机在同一本地网络上，您甚至可以从真机访问该项目。只需使用您的开发计算机的IP地址替换“localhost”。

- dakamojo

Answer 4

我使用Macbook，在上述答案中没有找到帮助，但我发现了一个非常简单的解决方案来测试我的网页。

步骤如下：

1.首先，您需要使用以下命令构建您的项目：`flutter build web`

2.然后进入build/web文件夹并运行此命令：`python3 -m http.server 8000`（您需要安装Python 3）。

这样就可以在两个平台上查看您的网页。在移动设备上，只需填写托管平台的IP地址即可。在Mac上，您可以使用此命令获取IP地址：`ipconfig getifaddr en0`。

因此，在手机上，您可以通过以下方式访问网页：`您的IP地址:8000`。例如：192.10.42.14:8000。

在托管平台上，它将是 `0.0.0.0:8000` （但这只适用于您的托管平台）。

我知道这只是一个解决方法，但对于我的情况非常有帮助。 :)

- Gergő Csiszár

---

谢谢！足以进行快速检查 :) flutter build web ; cd build/web ; python3 -m http.server 8000 & ; open "http://$(ipconfig getifaddr en0):8000/"; - sr9yar

但你只能梦想热重启，更别提调试了... - Paul

Answer 5

是的，你可以这样做。 但是，不需要运行本地的Web服务器之类的，只需在你的系统上使用Chrome浏览器运行你的代码即可。

1. 在你的应用程序在Web上运行后，点击检查
2. 在检查工具栏中，你会找到一个名为“切换设备工具栏”的按钮，点击它，你就可以开始了。
3. 你的桌面屏幕将呈现移动设备视图，你可以尝试不同的设备和尺寸。

- Aditya Singh

Answer 6

不，你不能在移动浏览器本地运行Flutter Web应用程序。如果你想以移动格式测试你的应用程序，你可以通过启用开发者工具中的设备工具栏从Google Chrome浏览器模拟它Ctrl+Shift+M。

- Guillaume Roux

---

这个回答怎么会有这么多赞？完全是胡说八道。当然可以！https://dev59.com/L1EG5IYBdhLWcg3wgPt3#68223713 - Leonid Veremchuk