PoC：同一文档中的两个 Flutter 应用

该项目说明了如何在同一个 HTML 文档中运行两个独立的 Flutter 应用。Dart 的 JS 桥被用来在它们之间共享状态和事件。

要求

• 安装 Flutter 并切换到 master 分支

  flutter channel master
  flutter upgrade

• 安装 Docker 以便运行 Web 服务器

如何运行演示

1. 构建组件 1

   cd component1
   flutter build web

2. 构建组件 2

   cd component2
   flutter build web

3. 启动服务器

   ./startServers.sh

浏览至 https://:8080，即可看到在两个不同 div 中渲染的组件 1 应用（粉色）和组件 2 应用（绿色）。

工作原理

将 Flutter 应用渲染到自定义 HTML 节点（而不是重新定义整个 body）的支持有望在未来的版本中到来，但它已经包含在 master 分支中。

利用此功能，一个 JS 脚本会维护一个待渲染组件列表，每个组件都有一个逻辑名称和一个 URL。

页面加载时，该脚本使用 Flutter 加载器来获取和运行 Flutter 项目，并为每个项目期望一个具有相应 ID 的 div。

在演示中，容器的位置和大小由纯 CSS 定义。

同一个脚本遵循命名约定进行状态和事件的绑定（请参阅 component1/web/js/interop.js）。

这两个组件实现了相同的应用，但颜色不同。当应用在同一页面上运行时，它们都能管理自己的状态并监听外部事件。因此，点击其中一个应用中的按钮也会更新另一个应用的状态，这得益于 JS 绑定。

GitHub

查看 Github