Flutter Web 应用程序无法在移动浏览器上运行。在手机浏览器上运行flutter代码出现错误如何调试？

Question

flutter web 应用程序在调试和发布模式下在桌面 chrome 和 safari 浏览器上运行良好。但是，它不适用于调试和发布模式下的移动浏览器。我将发布模式文件上传到服务器上，并尝试使用 URL 访问该网站，但有一个页面无法正常工作。Widget 设计完全损坏。

在手机浏览器上运行flutter代码如何调试错误在哪里？请参阅下面的屏幕截图。

Answer 1

我们没有看到代码。因此，很难肯定地说。但是当我运行不带参数的应用程序构建时遇到了这样的问题--web-renderer

flutter build web

重点是，默认情况下它使用不同的渲染器（桌面版 CanvasKit 和移动版 HTML）。由于我使用了需要 CanvasKit 的东西，因此移动浏览器中的应用程序显示不正确。

使用适当的参数进行构建解决了我的问题

flutter build web --web-renderer canvaskit

详细信息可以在这里找到

Answer 2

这是我所做的

1. 启动 Android avd

2. 使用您的桌面 IP 和端口（例如 7357）启动 flutter 应用程序 $ flutter run -d chrome --debug --web-hostname --web-port 7357

3. 在 avd 上启动 chrome 并输入：例如 192.168.10.4:7357

4. 打开桌面 chrome 并在地址栏中输入以下内容：chrome://inspect/#devices

在那里你可以找到你设置的：像这样：

5. 单击“检查”，然后出现一个新的调试窗口！

Answer 3

发生这种情况的原因可能是发布模式下的一些小部件溢出问题。尝试前往浏览器中的开发工具并切换到移动模式以缩小屏幕宽度。请说得更具体一些，这样我们才能更好地帮助您。