【问题标题】：Use flutter web widgets inside a react js app在 react js 应用程序中使用颤振 Web 小部件
【发布时间】：2021-04-01 16:45:30
【问题描述】：

我有这个项目，我必须编写一个网站以及 ios 和 android 应用程序。

我必须与一个非常有限的团队（基本上是我自己）一起做这件事。所以我想在这些平台之间共享尽可能多的代码，尽可能避免维护不同的代码库。

我开始考虑 Flutter：dart 中的逻辑（以及与后端的交互）可以编译为 ios 和 android，也可以编译为 javascript 以供网站调用。我也喜欢使用 Flutter 构建 UI 的方式。

对于网站，我知道有 Flutter Web 可以用来做一个 Web 应用程序，但我希望我的网站感觉更像是一个网站，而不是一个单页应用程序。曾经想过用React+Gatsby做网站的ui，同时调用dart编译的js做逻辑。这将实现高页面加载速度、良好的 seo，同时通过 dart 到 js 编译保持 React 应用程序的交互性和单一代码库逻辑。

我想知道这对你来说是不是一个好方法，如果不是，你会怎么做。

在这种方法中，我想知道是否可以在 react js 组件中嵌入 Flutter Web 小部件，始终关注维护尽可能低的平台特定代码。除了将它们嵌入 iframe 之外，我还没有找到任何其他方法，这似乎不是一个好主意，或者是吗？

【问题讨论】：

标签： reactjs flutter widget flutter-web codebase

【解决方案1】：

更新

Flutter Web 现已推出用于生产的稳定版本。

以下答案与提出问题的时间有关。

不推荐使用 Flutter Web

目前，我建议不要将 Flutter Web 用于生产，因为它处于 Beta 阶段。 Flutter 团队仍在努力提高质量、性能和浏览器兼容性。您必须谨慎使用它，因为您可能会遇到错误和其他一些并发症。

另外，我认为 Flutter Web 的社区支持可能会偏低，因为它很新。

有限的浏览器支持

另一个让我烦恼的因素是，到目前为止，Flutter 网络应用程序可以在有限的浏览器上运行，这会影响到您的用户群：

Chrome（移动和桌面）
Safari（移动和桌面）
Edge（移动和桌面）
Firefox（桌面）

我更喜欢什么？

好吧，尽管为移动和 Web 平台处理不同的代码库可能很麻烦，但我仍然更愿意坚持使用 React JS，因为它具有更好的浏览器和社区支持，而不是Flutter Web。

祝您的应用好运！ :)

【讨论】：

【解决方案2】：

我不知道如何在 React 应用程序中使用 Flutter 小部件。但为了解决您的其他问题，

所以我想在这些平台之间共享尽可能多的代码，以避免尽可能多地维护不同的代码库。

在没有其他限制的情况下，这将导致一个单一的 Flutter 应用程序同时适用于 Web 和本机。对于一个只有三个人的团队，我们仍然发现它比拥有多个项目更容易。

将我们最初的项目合并为一个的关键因素是移动浏览器的概念。在移动浏览器中，您的网站应该简化为您的移动应用程序的外观，除非它们有不同的目的。如果您从屏幕大小派生布局断点，Flutter 项目会自动发生这种情况。否则，您将编写相同的窄设计代码两次：在 Flutter 中用于原生应用程序和在 React 中用于 Web。

横向模式下的平板电脑原生应用也是如此。他们需要类似于您的桌面浏览器版本的布局，而您可以使用 Flutter 自动获得它。

另外，在网页版中，您可能拥有比原生应用程序更多的工具，这仅仅是因为您的屏幕允许使用它。自然地，你会在 JS 中编写这个逻辑。但是随后您收到了将其迁移到本机应用程序的命令。然后你会用编译成 JS 并嵌入框架的 Dart 逻辑替换你的 JS 逻辑吗？这是一条混乱的道路。

最后，考虑一下即将使用 Flutter 的 Mac、Linux 和 Windows 平台。如果您需要桌面原生应用，则需要与 Web 相同的布局。

我希望我的网站更像是一个网站，而不是一个单页应用程序。

网站和单页应用在感觉上的区别主要在于状态管理和 URL 处理。您可以采取以下措施来减少它：

为您的网页引入 URL。默认情况下，在 Flutter 中，每个操作都可以在 example.com/#/ 的单个 URL 下发生。然后窗口感觉很脆弱，因为没有 URL 可以复制和返回。 Flutter 的 Router API 于 2020 年 10 月发布，允许您根据应用程序状态的任何更改生成 URL，并从 URL 解析返回的状态。如果操作正确，那么屏幕上的所有内容都会成为 URL 的函数，就像在传统网站中一样。
使用url_stragegy 包将您的网址设置为example.com/path 而不是example.com/#/path，这会立即让人觉得是假的。

除了将它们嵌入 iframe 之外，我还没有找到任何其他方法，这似乎不是一个好主意，或者是吗？

不，它没有。主要是因为你在 JS 窗口之间的消息通信渠道太窄了。你会如何在另一帧中收听 Flutter 的 BLoC 流？这将需要太多的样板代码。我也想不出简单的调试过程。

对我来说，Flutter Web 还是有缺点的：

加载需要一段时间。
许多特定的 JS API 尚未实现。
您集成的许多服务可能没有 Dart SDK，但有 JS SDK。例如，我很难让Ably 工作。
没有搜索引擎优化。
您不能将em 用作屏幕单元，因此缩放元素可能会变得棘手。

在资源有限的情况下，单个代码库胜过其他一切。

需要明确的是，我的团队在整个 2021 年都在致力于一个 web+native 项目。它现在已经通过了大部分测试，但还没有发布。就规模而言，它是一个拥有 40 多个屏幕的市场。

【讨论】：