Adding Multiple Flutter Applications to Single Window on Web

摘要

在 2024 年 5 月，作者探讨了在单个浏览器窗口中运行多个 Flutter 网页应用程序的技术挑战。文章首先列举了 Flutter GitHub 仓库中相关的一些讨论话题，这些话题围绕着如何实现多视图（multi-view）嵌入和支持。

作者通过一个实际的示例，展示了如何使用 _flutter 全局变量和 MultiViewApp 类来初始化和运行多个 Flutter 应用程序实例。文章详细介绍了默认和自定义的 Flutter 应用程序启动过程，以及如何通过修改 base.href 和使用正则表达式从 flutter_bootstrap.js 中提取必要的代码来动态加载不同的 Flutter 应用程序。

最后，作者提供了一个演示应用程序的例子，其中包含了多个 Flutter 应用程序的启动和切换逻辑，以及如何在单个页面中管理这些应用程序的状态。

观点

• 多 Flutter 应用程序集成: 文章强调了在单个网页中集成多个 Flutter 应用程序的重要性，以及这一能力对于微前端架构的应用。
• 技术挑战: 描述了实现多个 Flutter 应用程序共存的技术挑战，包括命名空间冲突和单例对象的限制。
• _flutter 全局变量: 文章指出 _flutter 全局变量在初始化 Flutter 应用程序时的作用，以及如何通过修改这个变量来支持多个应用程序实例。
• MultiViewApp 类: 提到了 MultiViewApp 类在管理多个 Flutter 视图时的作用，以及如何使用这个类来构建支持多视图的应用程序。
• 启动过程的修改: 文章详细说明了如何修改 Flutter 应用程序的启动过程，以便能够动态加载和运行不同的 Flutter 应用程序。
• 演示应用程序: 作者通过一个具体的演示应用程序，展示了如何在实际开发中实现多个 Flutter 应用程序的切换和状态管理。