原文地址：medium.com/flutter-cla…

原文作者：medium.com/@hiashutosh

发布时间：2021年4月20日 – 4分钟阅读

2021年3月3日，在Flutter Engage活动期间，除了其他重要的公告外，有一个公告让我印象深刻，那就是Flutter Web现在已经稳定了。

作为一个移动开发者，我从来没有想象过自己会创建Web应用程序，所以一想到能够创建一个应用程序，我就很兴奋！所以我决定亲自动手。所以我决定亲自动手，与社区分享我的发现。在这个系列中，我们将迁移Aqi_monitor应用程序，其作者是
安什-辛格

在进入Flutter Web之前，让我们先看看一些重要的前提条件。

1) 分析你的软件包

检查pubspec.yaml文件中的软件包，并在pub.dev上看一下，看看哪些软件包支持Web。如果一个软件包不兼容网络，你可能要寻找另一个替代方案。例如，像 twilio_programmable_video, firebase_dynamic_links这样的包还没有网络支持。所以最好的解决办法是选择支持网络平台的软件包，或者你总是可以选择制作自己的插件。

在aqi_monitor项目中，我们有http、provider、shared_preferences、flutter_svg、hive和hive_flutter Flutter包，它们都启用了网络支持，所以我们在这部分已经分类。?

2) 在您当前的Flutter应用程序中添加Web支持。

i) 如果您的应用程序是在Flutter版本<2.0.0上创建的，那么请到应用程序的根文件夹中运行以下命令。这将为您创建缺少的必要文件。

flutter create .
复制代码

ii) 如果您的Flutter应用程序是在Flutter版本≥2.0.0时创建的，那么您已经被覆盖了，您应该看到web文件夹及其必要的文件已经在那里了。

现在，通过执行以下命令在谷歌浏览器上运行您的项目。

flutter run -d ch
复制代码

您的应用程序的第一个屏幕应该在网络浏览器上加载。虽然由于屏幕分辨率的原因，它可能看起来有点拉长，但我们当然可以在以后修复它。

3. 修复跨源资源共享（CORS）错误

如果您的Flutter应用程序正在进行API调用，那么有可能您的后端API没有被配置为CORS。基本上，它限制了不同域之间共享资源的能力。要了解更多关于 CORS 的信息，请阅读这篇文章。

你的后端工程师需要在HTTP响应中添加相关的头信息，以避免出现CORS错误。

然而，出于开发目的，您可以通过禁用其安全性在chrome中运行您的Flutter项目。这里有更多关于这个的细节。

对于Mac，我从终端执行这个命令。

open -n -a /Applications/Google Chrome.app/Contents/MacOS/Google Chrome - args - user-data-dir="ANY_TEMP_LOCATION" - disable-web-security
复制代码

用flutter run -d ch从文件夹的根部运行您的Flutter项目，当它在正常的chrome上打开时，只需复制它的localhost URL并在禁用安全的chrome上运行。然后您会发现，之前出现 CORS 错误的 API 将开始正常工作。

注意：这只是一个临时的解决方案，在部署你的网站时它不会工作。

在下一篇文章中，我将解释如何在 Flutter 项目中设置路由，以便在移动和网络平台上无缝运行。

medium.com/flutter-cla…

如果你觉得这篇文章有用，请点击拍手图标?并与你的朋友分享，因为这将激励我写更多的文章。
如有任何关于Flutter的疑问，请随时在社交媒体平台上与我联系。

linktr.ee/hiahutoshsi…

通过www.DeepL.com/Translator（免费版）翻译