我们可以在手机上通过 chrome 浏览器打开 Flutter Web 应用吗？答案

【问题标题】：Can we open a flutter web application through chrome browser on mobile?我们可以在手机上通过 chrome 浏览器打开 Flutter Web 应用吗？
【发布时间】：2020-03-24 16:57:48
【问题描述】：

我创建了一个 Flutter Web 应用程序。在选择设备时，我看到了 chrome 和我的设备等选项。我能够在他们两个中运行该应用程序。但现在，我想通过手机上的 chrome 浏览器打开这个 Web 应用程序。怎么做？

【问题讨论】：

标签： flutter dart flutter-web

【解决方案1】：

是的，你可以。只要确保你在同一个局域网上。然后

只需在终端中运行它

flutter run -d chrome --web-hostname 0.0.0.0 --web-port 55555

现在检查您电脑的 IP 地址在 Windows 上：ipconfig 在 Linux/Mac 上：ifconfig

然后在手机浏览器上运行

http://your-local-ip(pc-ip):55555

【讨论】：

对我来说，这仅适用于 -d web-server，您确定可以在移动浏览器上打开它吗？此外，您是否获得了与在浏览器中运行的实例的调试连接？

【解决方案2】：

是的，您可以在本地网络上提供您的网络应用程序，并在您的移动浏览器中访问它，前提是它们连接到同一网络。

您可以使用端口反转来做到这一点，它基本上将您的本地主机端口请求重定向到您的系统本地主机端口。

所以当你使用运行你的 Flutter Web 应用程序时

flutter run -d web-server

您将看到您的 webapp 在 localhost 上提供服务例如

http://localhost:49403

将手机连接到设备
运行adb reverse tcp:49403 tcp:49403
现在您只需在手机浏览器中输入地址即可查看应用运行情况。

因此，当您运行 adb reverse 命令时，手机本地端口 49403 将被路由到您笔记本电脑的端口 49403。您将能够看到您的应用在手机浏览器中运行。

【讨论】：

【解决方案3】：

答案是否定的。但是您可以免费将您的网络应用程序部署到GitHub。

第 1 步 在 official site 上阅读准备要发布的 Web 应用程序。

在终端上运行flutter build web。

一个简单应用的发布版本具有以下结构：

/build/web
  assets
    AssetManifest.json
    FontManifest.json
    LICENSE
    fonts
      MaterialIcons-Regular.ttf
      <other font files>
    <image files>
  index.html
  main.dart.js
  main.dart.js.map

第 2 步 阅读如何在 Github 上的页面上托管 read here

创建一个名为 username.github.io 的 new repo，其中 username 是您在 GitHub 上的用户名（或组织名称）。
只需将 web 文件夹（从第 1 步开始）中的所有内容放到您的存储库中即可。
现在打开您的网站，例如https://username.github.io。

【讨论】：

我不是在说 Github，你知道我的问题的解决方案吗？
@Aishwarya 再次回答您的特定问题是否定的。你不能这样做，因为 android studio 只是检测平台没有应用程序（例如 chrome）。