将 Flutter 集成到现有应用

如果你正从零开始编写一个新应用，使用 Flutter 上手 会很容易。但如果你已经有一个并非使用 Flutter 编写的应用，并且从头开始重写并不现实，该怎么办？

对于这些场景，Flutter 可以作为一个 module，逐步集成到你的现有应用中。这项功能称为「add-to-app」。该 module 可以导入到你的现有应用中，用 Flutter 渲染应用的一部分，而其余部分继续使用现有技术渲染。借助 Dart 的可移植性以及与其他语言的互操作性，这种方式也可以用来运行共享的非 UI 逻辑。

Add-to-app 目前支持 Android、iOS、macOS 和 web。

Flutter 支持两种 add-to-app 形式：

• 多引擎：支持 Android、iOS 和 macOS，允许运行一个或多个 Flutter 实例，每个实例都会渲染一个嵌入到宿主应用中的 widget。每个实例都是一个独立的 Dart 程序，并与其他程序隔离运行。多个 Flutter 实例可以让每个实例在使用较少内存资源的同时，维护各自独立的应用状态和 UI 状态。请在 multiple Flutters 页面了解更多内容。

• 多视图：支持 web，允许创建多个 FlutterView，每个视图都会渲染一个嵌入到宿主应用中的 widget。在这种模式下只有一个 Dart 程序，所有视图和 widget 都可以共享对象。

Add-to-app 支持集成多个任意尺寸的 Flutter 视图，适用于多种用例。其中最常见的两个用例是：

• 混合导航栈：一个应用由多个屏幕组成，其中一些屏幕由 Flutter 渲染，另一些屏幕由其他框架渲染。无论屏幕使用哪种框架渲染，用户都可以在不同屏幕之间自由导航。

• 局部屏幕视图：应用中的一个屏幕会渲染多个 widget，其中一些由 Flutter 渲染，另一些由其他框架渲染。无论 widget 使用哪种框架渲染，用户都可以自由滚动并与任何 widget 交互。

• 在 Gradle 脚本中添加 Flutter SDK 钩子，自动构建并导入 Flutter module。

• 将 Flutter module 构建为通用的 Android Archive (AAR)，以便集成到你自己的构建系统中，并提升 Jetifier 与 AndroidX 的互操作性。

• FlutterEngine API 可用于启动并持久化 Flutter 环境，且不依赖附加 FlutterActivity、FlutterFragment 等组件。

• Android Studio 提供 Android/Flutter 协同编辑，以及 module 创建/导入向导。

• 支持 Java 和 Kotlin 宿主应用。

• Flutter module 可以使用 Flutter 插件 与平台交互。

• 支持从 IDE 或命令行使用 flutter attach 连接到包含 Flutter 的应用，以进行 Flutter 调试和有状态的热重载。

• 将 Flutter module 构建为 Swift package，以便集成到你自己的构建系统中。

• 使用 Xcode build phase 自动构建并导入 Flutter module。

• FlutterEngine API 可用于启动并持久化 Flutter 环境，且不依赖附加 FlutterViewController。

• 支持 Objective-C 和 Swift 宿主应用。

• Flutter module 可以使用 Flutter 插件 与平台交互。

• 支持从 IDE 或命令行使用 flutter attach 连接到包含 Flutter 的应用，以进行 Flutter 调试和有状态的热重载。

请查看我们的 add-to-app GitHub 示例仓库，其中包含在 Android 和 iOS 中导入 Flutter module 来构建 UI 的示例项目。

• 将 Flutter module 构建为 Swift package，以便集成到你自己的构建系统中。

• 使用 Xcode build phase 自动构建并导入 Flutter module。

• FlutterEngine API 可用于启动并持久化 Flutter 环境，且不依赖附加 FlutterViewController。

• 支持 Swift 宿主应用。

• Flutter module 可以使用 Flutter 插件 与平台交互。

• 支持从 IDE 或命令行使用 flutter attach 连接到包含 Flutter 的应用，以进行 Flutter 调试和有状态的热重载。

Flutter 可以添加到任何基于 HTML DOM 的现有 web 应用中，这些应用可以使用任意客户端 Dart web 框架（jaspr、ngdart、over_react 等）、任意客户端 JS 框架（React、Angular、Vue.js 等）、任意服务端渲染框架（Django、Ruby on Rails、Apache Struts 等），甚至可以不使用任何框架（亲切地称为「VanillaJS」）。最低要求只是你的现有应用及其框架支持导入 JavaScript library，并支持创建供 Flutter 渲染内容的 HTML 元素。

若要将 Flutter 添加到现有应用，请按常规方式构建它，然后按照 嵌入说明 将 Flutter 视图放到页面上。

若要开始使用，请参阅 Android、web、iOS 和 macOS 的项目集成指南：

将 Flutter 集成到你的项目后，请参阅以下链接中的 API 使用指南：

移动端限制：

• 不支持多视图模式（仅支持多引擎）。

• 不支持将多个 Flutter library 打包到同一个应用中。

• 如果不支持 FlutterPlugin 的插件做出了 add-to-app 中并不成立的假设（例如假设 Flutter Activity 始终存在），可能会出现意外行为。

• 在 Android 上，Flutter module 仅支持 AndroidX 应用。

Web 限制：

• 不支持多引擎模式（仅支持多视图）。

• 无法完全「关闭」Flutter 引擎。应用可以移除所有 FlutterView 对象，并确保所有数据都通过常规 Dart 概念完成垃圾回收。但是，即使引擎未渲染任何内容，它仍会保持预热状态。