阅读 135

[Flutter翻译]迈向Flutter Web的旅程第一部分:介绍

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

原文作者:medium.com/@hiashutosh

发布时间:2021年4月20日 - 4分钟阅读

image.png

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项目中,我们有httpprovidershared_preferencesflutter_svghivehive_flutter Flutter包,它们都启用了网络支持,所以我们在这部分已经分类。😁

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

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

flutter create .
复制代码

image.png

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

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

flutter run -d ch
复制代码

image.png

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

  1. 修复跨源资源共享(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
复制代码

image.png

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

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

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

medium.com/flutter-cla…


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

linktr.ee/hiahutoshsi…


通过www.DeepL.com/Translator(免费版)翻译

文章分类
前端
文章标签