在 React js 应用程序中使用 flutter web widgets
Use flutter web widgets inside a react js app
我有这个项目，我必须编写一个网站和 ios 和 android 应用程序。
我必须和一个非常有限的团队（基本上是我自己）一起做这件事。所以我想在这些平台之间共享尽可能多的代码，尽可能避免维护不同的代码库。
我开始考虑 flutter：dart 中的逻辑（以及与后端的交互）可以编译为 ios 和 android，以及用于网络的 javascript站点调用。我也喜欢 UI 是如何使用 flutter 的 built。
对于网站，我知道有 flutter web 可以用来做一个网络应用程序，但我希望我的网站感觉更像是一个网站，而不是一个单页应用程序。想过用React+Gatsby做网站的ui，同时调用dart编译的js做逻辑。这将实现高页面加载速度，良好的 seo，同时保持反应应用程序的交互性和通过 dart 到 js 编译的单一代码库逻辑。
我想知道这对您来说是否是个好方法，如果不是，您会怎么做。
在这种方法中，我想知道是否可以在 React js 组件中嵌入 flutter web 小部件，始终关注维护尽可能低的平台特定代码。除了将它们嵌入到 iframe 中，我还没有找到任何其他方法来执行此操作，这似乎不是一个好主意，是吗？
更新
Flutter Web 现在可用于生产的稳定版本。
Below answer is relevant back to the time when question was asked.
不推荐 Flutter Web
在当前日期，我建议不要使用 Flutter Web 进行生产，因为它处于 Beta。 Flutter 团队仍在致力于提高质量、性能和浏览器兼容性。您必须谨慎使用它，因为您可能 运行 出现错误和其他一些并发症。
此外，我认为社区对 Flutter Web 的支持可能较低，因为它还很新。
有限的浏览器支持
另一个让我烦恼的因素是 Flutter 网络应用目前可以 运行 在有限的浏览器上使用，这会影响您的用户群：
- Chrome（移动和桌面）
- Safari（移动和桌面）
- 边缘（移动和桌面）
- Firefox（桌面）
我更喜欢什么？
好吧，虽然处理移动和网络平台的不同代码库可能很麻烦，但我仍然更愿意坚持使用 React JS，因为它在更好的浏览器中更稳定 &社区支持而不是 Flutter Web。
祝您的应用程序好运！ :)
我不知道如何在 React 应用程序中使用 Flutter 小部件。但为了解决您的其他问题，
So I want to share as much code between those platforms, to avoid maintaining different codebases as much as possible.
如果没有其他限制，这将导致一个 Flutter 应用程序同时适用于 Web 和本机。对于一个只有三个人的小团队，我们仍然发现它比拥有多个项目更容易。
将我们最初的项目合并为一个项目的关键因素是移动浏览器的概念。在移动浏览器中，除非它们有不同的目的，否则您的网站应该缩小为您的移动应用程序的外观。如果您从屏幕尺寸导出布局断点，这会自动发生在 Flutter 项目中。否则，您将对同一个狭窄的设计进行两次编码：在 Flutter 中用于原生应用程序，在 React 中用于 Web。
横向模式的平板电脑本机应用程序也是如此。他们需要类似于您的桌面浏览器版本的布局，您可以使用 Flutter 自动获得它。
此外，在网络版中，您可能拥有比本机应用程序更多的工具，只是因为您的屏幕允许使用。自然地，您会在 JS 中编写此逻辑。但是随后您收到了将其迁移到本机应用程序的命令。然后你会用编译成 JS 并嵌入到框架中的 Dart 逻辑替换你的 JS 逻辑吗？这是一条凌乱的道路。
最后，想想即将加入 Flutter 的 Mac、Linux 和 Windows 平台。如果您需要桌面本机应用程序，您会想要与 Web 相同的布局。
I want my website to feel like a web site more than a single page app.
网站和单页app的感觉差异主要在于状态管理和URL处理。您可以执行以下操作来减少它：
- 为您的页面引入 URLs。默认情况下，在 Flutter 中，每个动作都可以在
example.com/#/ 的单个 URL 下发生。 window 感觉很脆弱，因为没有 URL 可以复制和返回。 Flutter 的 Router API 于 2020 年 10 月发布，允许您在应用程序状态发生任何变化时生成 URL，并从 URL 解析状态。如果操作正确，那么屏幕上的所有内容都会成为 URL 的功能，就像在传统网站中一样。
- 使用
url_stragegy 包使您的 URL 成为 example.com/path 而不是 example.com/#/path，后者立即让人感觉很假。
I have not found any other way of doing this than embedding them into iframes, which does not seem like a good idea, or does it ?
不，不是。主要是因为 JS windows 之间的消息通信渠道太窄了。你会如何在另一个框架中收听 Flutter 的 BLoC 的流？这将需要太多的样板代码。我也想不出简单的调试过程。
对我来说，Flutter Web 还是有缺点的：
- 加载需要一些时间。
- 许多特定的 JS API 尚未实现。
- 您集成的许多服务可能没有 Dart SDK，而有 JS SDK。例如，我努力
Ably 工作。
- 没有搜索引擎优化。
- 您不能使用
em 作为屏幕单位，因此缩放元素可能会很棘手。
在资源有限的情况下，单一代码库胜过其他一切。
需要说明的是，我的团队整个 2021 年都在做一个 web+native 项目。它现在已经通过了大部分测试，但还没有发布。就规模感而言，它是一个拥有 40 多个屏幕的市场。
我有这个项目，我必须编写一个网站和 ios 和 android 应用程序。
我必须和一个非常有限的团队（基本上是我自己）一起做这件事。所以我想在这些平台之间共享尽可能多的代码，尽可能避免维护不同的代码库。
我开始考虑 flutter：dart 中的逻辑（以及与后端的交互）可以编译为 ios 和 android，以及用于网络的 javascript站点调用。我也喜欢 UI 是如何使用 flutter 的 built。
对于网站，我知道有 flutter web 可以用来做一个网络应用程序，但我希望我的网站感觉更像是一个网站，而不是一个单页应用程序。想过用React+Gatsby做网站的ui，同时调用dart编译的js做逻辑。这将实现高页面加载速度，良好的 seo，同时保持反应应用程序的交互性和通过 dart 到 js 编译的单一代码库逻辑。
我想知道这对您来说是否是个好方法，如果不是，您会怎么做。
在这种方法中，我想知道是否可以在 React js 组件中嵌入 flutter web 小部件，始终关注维护尽可能低的平台特定代码。除了将它们嵌入到 iframe 中，我还没有找到任何其他方法来执行此操作，这似乎不是一个好主意，是吗？
更新
Flutter Web 现在可用于生产的稳定版本。
Below answer is relevant back to the time when question was asked.
不推荐 Flutter Web
在当前日期，我建议不要使用 Flutter Web 进行生产，因为它处于 Beta。 Flutter 团队仍在致力于提高质量、性能和浏览器兼容性。您必须谨慎使用它，因为您可能 运行 出现错误和其他一些并发症。
此外，我认为社区对 Flutter Web 的支持可能较低，因为它还很新。
有限的浏览器支持
另一个让我烦恼的因素是 Flutter 网络应用目前可以 运行 在有限的浏览器上使用，这会影响您的用户群：
- Chrome（移动和桌面）
- Safari（移动和桌面）
- 边缘（移动和桌面）
- Firefox（桌面）
我更喜欢什么？
好吧，虽然处理移动和网络平台的不同代码库可能很麻烦，但我仍然更愿意坚持使用 React JS，因为它在更好的浏览器中更稳定 &社区支持而不是 Flutter Web。
祝您的应用程序好运！ :)
我不知道如何在 React 应用程序中使用 Flutter 小部件。但为了解决您的其他问题，
So I want to share as much code between those platforms, to avoid maintaining different codebases as much as possible.
如果没有其他限制，这将导致一个 Flutter 应用程序同时适用于 Web 和本机。对于一个只有三个人的小团队，我们仍然发现它比拥有多个项目更容易。
将我们最初的项目合并为一个项目的关键因素是移动浏览器的概念。在移动浏览器中，除非它们有不同的目的，否则您的网站应该缩小为您的移动应用程序的外观。如果您从屏幕尺寸导出布局断点，这会自动发生在 Flutter 项目中。否则，您将对同一个狭窄的设计进行两次编码：在 Flutter 中用于原生应用程序，在 React 中用于 Web。
横向模式的平板电脑本机应用程序也是如此。他们需要类似于您的桌面浏览器版本的布局，您可以使用 Flutter 自动获得它。
此外，在网络版中，您可能拥有比本机应用程序更多的工具，只是因为您的屏幕允许使用。自然地，您会在 JS 中编写此逻辑。但是随后您收到了将其迁移到本机应用程序的命令。然后你会用编译成 JS 并嵌入到框架中的 Dart 逻辑替换你的 JS 逻辑吗？这是一条凌乱的道路。
最后，想想即将加入 Flutter 的 Mac、Linux 和 Windows 平台。如果您需要桌面本机应用程序，您会想要与 Web 相同的布局。
I want my website to feel like a web site more than a single page app.
网站和单页app的感觉差异主要在于状态管理和URL处理。您可以执行以下操作来减少它：
- 为您的页面引入 URLs。默认情况下，在 Flutter 中，每个动作都可以在
example.com/#/的单个 URL 下发生。 window 感觉很脆弱，因为没有 URL 可以复制和返回。 Flutter 的 Router API 于 2020 年 10 月发布，允许您在应用程序状态发生任何变化时生成 URL，并从 URL 解析状态。如果操作正确，那么屏幕上的所有内容都会成为 URL 的功能，就像在传统网站中一样。 - 使用
url_stragegy包使您的 URL 成为example.com/path而不是example.com/#/path，后者立即让人感觉很假。
I have not found any other way of doing this than embedding them into iframes, which does not seem like a good idea, or does it ?
不，不是。主要是因为 JS windows 之间的消息通信渠道太窄了。你会如何在另一个框架中收听 Flutter 的 BLoC 的流？这将需要太多的样板代码。我也想不出简单的调试过程。
对我来说，Flutter Web 还是有缺点的：
- 加载需要一些时间。
- 许多特定的 JS API 尚未实现。
- 您集成的许多服务可能没有 Dart SDK，而有 JS SDK。例如，我努力
Ably工作。 - 没有搜索引擎优化。
- 您不能使用
em作为屏幕单位，因此缩放元素可能会很棘手。
在资源有限的情况下，单一代码库胜过其他一切。
需要说明的是，我的团队整个 2021 年都在做一个 web+native 项目。它现在已经通过了大部分测试，但还没有发布。就规模感而言，它是一个拥有 40 多个屏幕的市场。