用于 Web 开发的 Flutter：优势、威胁、应用

2022年，谷歌打造的软件开发工具包Flutter正式打败了最激烈的竞争对手React Native，成为跨平台技术的新领导者。 据谷歌报道，目前已有超过 100,000 个基于 Flutter 的应用程序向公众发布。 尽管越来越受欢迎，但 Flutter 仍然是最著名的多平台（Android 和 iOS）移动开发工具。 同时，只有少数行业专家知道 Flutter 也可以用于 Web 应用程序！ 了解Flutter 用于 Web 开发的可能性、应用程序和风险，并发现它可以为您的业务增加什么价值。

Flutter 正在成为市场上最令人兴奋的解决方案之一，这不仅是因为它的成本效益和时间效率。 每一次更新，Flutter 的性能都越来越接近原生解决方案。 当然，许多公司选择 Flutter for web 作为其移动产品的补充，重点放在增加客户接触点的数量上。 但是，是否值得仅仅因为 Flutter for web 的个别功能而考虑它？

当然是！ Flutter 支持快速开发具有复杂、独特界面的 Web 应用程序，并且在提供类移动体验方面首屈一指。 需要例子吗？ 只需查看我们团队使用 Flutter 为 Web 创建的令人振奋的客户参与工具 PAJO。

开门见山：Flutter for web 有哪些优势、应用和风险？ Flutter 适合 Web 开发吗？ 阅读更多以找出答案！

Flutter for web：让我们从基础开始

让我们从最基本的信息开始：

内容： Flutter 是一个谷歌框架，允许开发人员使用一个共享代码库构建移动、网络、桌面和嵌入式应用程序。

时间： Flutter 的第一个稳定版本于 2018 年底发布。

原因：谷歌创建 Flutter 是为了应对移动应用程序预算的减少以及 React Native 日益流行，成为其主要竞争对手。

现在让我们继续讨论一些更具体的技术信息。

Flutter 引起了人们对 Dart 的关注，这是一种来自 Google 的面向对象语言，根据许多领域专家的说法，它是所有移动、Web 和桌面开发的未来。 与 JavaScript（由其主要竞争对手 React Native 使用）相比，Dart 是完全面向对象和强类型的。 这对您的企业意味着什么？ Dart 中交付的代码更能抵抗错误并且更容易维护，即使在一个不断变化的团队中多年也是如此。 毫无疑问，Flutter 编程语言是其最大的优势之一。

用于 Web 开发的 Flutter

您知道 Flutter 中的 Web 开发功能相对较新吗？ 几年前，谷歌进行了一个名为蜂鸟的研究项目。 参与 Hummingbird 的谷歌开发者小组试图找到一种方法，从 iOS 和 Android 应用程序中使用的相同 Flutter 代码生成网络应用程序。

这个项目的效果在很大程度上促进了框架的发展。 虽然花了一些时间，但在 2021 年 3 月，谷歌宣布Flutter for the web 已经完全稳定，可以在商业项目中使用了。 一种代码，一种技术，一石多鸟。

Google 的最新项目之一 Flutter for the web 是如何工作的？ 简而言之，自 2021 版发布以来，开发人员可以将现有的 Dart 代码编译成 Web 产品——使用他们用于开发跨平台移动应用程序的相同 Flutter 框架。 在这种情况下，网络只是移动应用程序的另一个设备目标——不需要任何其他网络开发人员参与。

Flutter for web 的优势

Flutter for web 的主要优势是什么？ 最重要的是，谷歌正在增加对 SDK 项目的参与，系统改进和发布（2022 年将近 20 个版本！）就是证明。 尽管 Flutter 的历史相对较短，但它已经克服了许多早期成熟的问题。 Flutter Web 的其他最显着优势是什么？

想要了解最重要的 Flutter 更新吗？

订阅我们的新闻

1. Flutter for web 降低开发成本

使用 Flutter for web，三个应用程序在一个技术连接的团队中使用一个代码库以一种速度创建。 使用 Flutter 开发应用程序的客户不必寻找三种不同技术的供应商，然后同步他们的工作。 无需复制，例如，相同的支付功能或社交媒体授权。 这是否直接意味着三倍的节省？ 不完全是！

当然，Flutter 大大降低了开发成本。 但是，这并不意味着跨平台应用程序开发与原生应用程序开发相同。 为跨平台提供某种功能通常会更复杂一些。 通常，跨平台乘数约为 1.2-1.5。 这意味着什么？ 如果一项功能在一个平台上需要 X 小时的开发时间，那么在跨平台方面则需要 (1.2-1.5) * X。 不过，与 x3 相比，x1.5 可能是您预算的成功案例。

2. 易于扩展和具有成本效益的想法验证

成本和时间效率使 Flutter 成为 PoC 和产品创意验证的绝佳选择。 在几周内，您就可以开发出一个完全可操作的应用程序，您可以轻松地将其发布到应用程序商店并通过 Web 分发。 在取得潜在成功后，您可以考虑扩展您的移动和 Web 应用程序，例如，通过将跨平台移动应用程序扩展到本机应用程序。

Airbnb 等几家行业巨头都遵循了这条道路。 在其跨平台移动应用程序取得成功后，Airbnb 决定转向原生解决方案，这样可以更自由地调整产品以适应目标群体。

3.简化维护流程

当您的申请最终成功时会发生什么？ 它进入维护！ 与仅雇用三名开发人员维护代码相比，与一名 Dart/Flutter 专家合作更容易且更具成本效益。 更不用说开发人员技能的任何不平衡都会导致工作节奏的变化。

考虑到不同平台上的共享外观，开发团队的技能也很重要。 当您决定开发三个项目时，它们的最终形态在很大程度上取决于开发人员的技能和 UI 态度。 当 iOS 用户更喜欢圆角，而 Android 用户不太喜欢圆角时，这两种应用程序在影响您的产品策略方面可能会有所不同。

4.以应用程序为中心的壮观体验

按照 Flutter 的 Web 创始人的说法，在这个时候，Flutter 是一个完美的嵌入交互体验的工具。 作为一个 UI 框架，Flutter 可以为网站提供以应用程序为中心的服务——因此是渐进式 Web 应用程序、单页应用程序和增强现有 Flutter 移动应用程序的完美解决方案。 您可以在下面的机会部分阅读更多相关信息。 但首先，让我们最后讨论一下最关键的 Flutter Web 风险。

Flutter for web 的威胁

如前所述，Flutter Web 是一个相对较新的项目，由跨平台专家不断改进。 我们的 Flutter 团队在编制 2021 年 Flutter Web 开发相关潜在风险清单时，发现了 14 个问题。 如今，Flutter 的 Web 风险列表减少了三分之一。 然而，一些问题，例如 SEO 问题或缺乏对某些浏览器的支持，仍然需要解决。 2022 年 Flutter for web 最显着的缺点是什么？

一、Flutter for web的Web应用异常

也许这不是 Flutter Web 的直接缺点，但更值得一提的免责声明。 Android 和 iOS 应用程序的世界非常相似，大多数情况下代码库是 95-100% 相同的。 但是，这可能不适用于浏览器版本！

底部抽屉、底部选项卡菜单或水平轮播是很好的移动用户体验模式，但不适用于网络。 通常，您需要仅为 Web 应用创建例外。 架构设计通常需要在移动设备和 Web 上完全不同。 在工作之初，最好在设计人员和开发人员之间建立一个圆桌讨论会。 让他们分享他们的观点并尝试达成共识，尤其是在您关心预算和日程安排的情况下。

2.搜索引擎优化（SEO）问题

说白了，Flutter Web 不支持 SEO。 框架的创建者如何解释使用 Flutter 创建的 Web 应用程序的 SEO 不兼容？

Flutter Web 优先考虑性能、保真度和一致性。 这意味着应用程序输出与搜索引擎正确索引所需的内容不一致。 对于静态或类似文档的 Web 内容，我们建议使用 HTML——就像我们在 flutter.dev、dart.dev 和 pub.dev 上所做的那样。 您还应该考虑将您的主要应用程序体验（在 Flutter 中创建）与您的登录页面、营销内容和帮助内容（使用搜索引擎优化的 HTML 创建）分开。

资料来源：Flutter.dev 的 Web FAQ

据 Stack Overflow 称，SEO 友好性是 Flutter 团队的下一个目标之一。 然而，在这一点上，想要在 SEO 方面优化 Web 应用程序的开发人员必须使用额外的库。

3. Flutter for web 中没有热重载

热重载是 Flutter 为移动开发带来的最明显的好处之一。 借助此功能，开发人员可以立即预览前端和后端更改，并在生产的早期阶段进行必要的修复。 不幸的是，热重载还不兼容 Flutter Web。

幸运的是，在 Flutter for web 中有一种替代热重新加载的方法：热重启。 热重启可以预览更改，而无需重新启动 Web 应用程序。 唯一（也是最痛苦的）区别是，与热重载相反，热重启会丢失应用程序状态——可能会降低引入开发更改的灵活性。

4.与某些浏览器的兼容性有限

根据 Flutter 开发人员的说法， Flutter Web 应用程序可以在四种最流行的浏览器上运行：

• 铬合金
• 苹果浏览器
• 边缘
• 火狐

从理论上讲，您应该确保无论用户选择哪种浏览器，您的 Web 应用程序都能高效运行。 但它在实践中是如何运作的呢？ 一些 Flutter 开发人员报告了 Safari 的问题，并抱怨需要为多个功能执行耗时的解决方法。

Flutter Web 仍然面临一些小困难，例如 SEO 问题、与 Safari 的兼容性有限或缺少库。 但与此同时，毫无疑问，随着每次更新，Flutter 变得更加高效并接近于完整的功能。 而且毫不夸张的说，一年之后，这些问题或许都将成为过去！

Flutter在Web开发中的应用

现在进入正题：谁能从 Flutter 中获益最多？ Flutter 的创建者指出了 Flutter Web 的三个理想用例：

渐进式网络应用程序

自 2021 年推出 Flutter 2 稳定版以来，Flutter 开发人员已经能够构建渐进式 Web 应用程序 (PWA)：Web 应用程序不仅能够离线运行，而且还能在通过浏览器运行时模仿移动设备的功能。

简而言之，PWA 是可以安装在任何设备上以提供类似原生体验的网页——与专用的 iOS 和 Android 应用程序相反，它可以在任何设备上使用。

PWA 通常被那些为广泛的目标受众提供产品、希望在所有消费者接触点提供无可挑剔的用户体验并且必须利用每一个与潜在用户互动的机会的公司所使用。 例子？ 星巴克、Flipboard、游戏 2048。我打赌你至少用过这些迷人的应用程序中的一个！

单页应用

Facebook、Gmail、谷歌地图、Spotify——所有这些流行的应用程序至少有一个重要的共同点。 它们无需重新加载页面即可运行。 在与单页应用程序交互时，用户不必等待新页面加载 - 它从一开始就与相关内容一起存在。

SPA 响应迅速，相对容易编码、优化和维护。 最后但并非最不重要的一点是，它们可以使用 Flutter 快速开发——并作为优质的最小可行产品。

您想阅读更多有关渐进式 Web 和单页应用程序的信息吗？ 请务必阅读我们关于为您的企业选择合适类型的应用程序的文章！

现有的 Flutter 移动应用程序可以轻松转换为 Flutter for web

向现有的基于 Flutter 的移动项目添加 Web 支持既快速又简单：它需要创建一个 Web 目录，然后……点击运行按钮！ 当然，要确保完美的性能，使 Web 应用程序响应迅速且易于导航至关重要。 但与从头开始构建应用程序相比，在 Flutter 中将 Web 版本添加到现有的移动应用程序中确实需要花费一小部分精力。

Flutter for Web 值得一试吗？

Flutter for Web 值得一试吗？ 显然，您应该自己回答这个问题。 为您的产品选择正确的框架取决于几个业务和技术因素，例如公司的使命、愿景、预算、规模或技术堆栈。 但是，在某些特定情况下，至少值得考虑使用 Flutter Web。

首先， Flutter Web 为早期初创企业创造了前所未有的机会。 试想一下，您刚刚提出了一个绝妙的产品创意，定义了您的业务目标，并进行了竞争分析。 现在您必须尽快验证您的 MVP——在时机结束之前。 在这种场景下，选择 Flutter 进行 Web 开发当然是一个安全、省时、合理的选择。

其次，Dart 编程语言的灵活性使Flutter Web 成为增强数字产品的绝佳选择。 Flutter 支持在许多不同平台上快速开发应用程序，从而提高产品的知名度和用户的可访问性。

如果您在上述任何一种场景中发现哪怕是一点点您的业务情况，那当然值得对 Flutter Web 产生兴趣。

什么时候不值得考虑使用 Flutter 开发 Web 应用程序？ 甚至框架的创建者也承认，在这一点上，并不是每个网页在 Flutter 中都有意义：

(...) Flutter 不适合包含文本丰富的基于流的内容的静态网站。 例如，博客文章受益于 Web 构建的以文档为中心的模型，而不是像 Flutter 这样的 UI 框架可以提供的以应用程序为中心的服务。 但是，您可以使用 Flutter 将交互式体验嵌入到这些网站中。 对可用图书馆的研究应该先于那里的每个项目。

资料来源：Flutter.dev 的 Web FAQ

任何商业决策之前都应经过深入研究并咨询多位行业专家。

Flutter for web 的（预期的）光明未来

在这一点上，为每个 Web 项目选择 Flutter 可能不是最好的主意。 但是，我预计这个快速发展的框架会有越来越光明的未来。 为什么？

用户以前从未如此分散在平台之间。 移动设备和网络浏览器只是冰山一角。 人们在汽车、手表和电视机中使用应用程序。

因此，需要简化流程，降低软件生产成本。 Web 和移动开发的一个代码库已经是一种常见的模式， Flutter for Web就是一个很好的例子。

很长一段时间，我认为 Flutter Web 是一项新兴技术。 我最近的工作让我改变了主意。 Flutter 让我想起了一个站在光明未来面前的成年青年。 对于预算很少、期限很短的想法来说，这似乎是一个很有吸引力的选择。 Flutter 是那些想要快速、低成本地验证自己想法的人，以及那些有想法并正在响应市场需求的人的完美选择。