将 Flutter 添加到现有应用

如果你是从零开始编写一个新应用，使用 Flutter 入门非常简单。但如果你已经有一个并非用 Flutter 编写的应用，且从头重写不切实际，该怎么办呢？

在这种情况下，可以将 Flutter 以模块的形式逐步集成到现有的应用中。这一功能被称为“Add-to-app”。该模块可以导入到现有应用中，用 Flutter 渲染应用的一部分，而其余部分则使用现有技术渲染。这种方法还可以利用 Dart 的可移植性和与其他语言的互操作性，来运行共享的非 UI 逻辑。

Add-to-app 目前支持 Android、iOS 和 Web 平台。

Flutter 支持两种 Add-to-app 模式

• 多引擎模式 (Multi-engine)：在 Android 和 iOS 上支持，允许运行一个或多个 Flutter 实例，每个实例渲染一个嵌入到宿主应用中的组件。每个实例都是一个独立的 Dart 程序，与其他程序隔离运行。拥有多个 Flutter 实例允许每个实例在占用极少内存资源的同时，保持独立的应用程序和 UI 状态。详见 multiple Flutters 页面。
• 多视图模式 (Multi-view)：在 Web 上支持，允许创建多个 FlutterView，每个视图渲染一个嵌入到宿主应用中的组件。在此模式下，只有一个 Dart 程序，所有视图和组件都可以共享对象。

Add-to-app 支持集成任意大小的多个 Flutter 视图，以满足各种使用场景。其中最常见的两个使用场景是：

• 混合导航栈 (Hybrid navigation stacks)：应用由多个页面组成，其中一些由 Flutter 渲染，另一些由其他框架渲染。用户可以自由地在页面间导航，而无需考虑渲染该页面所使用的框架。
• 页面局部视图 (Partial-screen views)：应用中的一个页面包含多个组件，其中一些由 Flutter 渲染，另一些由其他框架渲染。用户可以自由地滚动和交互任何组件，而无需考虑渲染该组件所使用的框架。

• 通过将 Flutter SDK 钩子添加到 Gradle 脚本中，自动构建并导入 Flutter 模块。
• 将 Flutter 模块构建为通用的 Android Archive (AAR)，以便集成到你自己的构建系统中，并实现与 AndroidX 更好的 Jetifier 互操作性。
• FlutterEngine API，用于独立于 FlutterActivity/FlutterFragment 等组件，启动并持久化你的 Flutter 环境。
• Android Studio 提供 Android/Flutter 联合编辑以及模块创建/导入向导。
• 支持 Java 和 Kotlin 宿主应用。
• Flutter 模块可以使用 Flutter 插件与平台进行交互。
• 支持通过 IDE 或命令行使用 flutter attach 连接到包含 Flutter 的应用，进行调试和有状态热重载。

• 通过将 Flutter SDK 钩子添加到 CocoaPods 和 Xcode 构建阶段，自动构建并导入 Flutter 模块。
• 将 Flutter 模块构建为通用的 iOS Framework，以便集成到你自己的构建系统中。
• FlutterEngine API，用于独立于 FlutterViewController 启动并持久化你的 Flutter 环境。
• 支持 Objective-C 和 Swift 宿主应用。
• Flutter 模块可以使用 Flutter 插件与平台进行交互。
• 支持通过 IDE 或命令行使用 flutter attach 连接到包含 Flutter 的应用，进行调试和有状态热重载。

查看我们的 add-to-app GitHub 示例仓库，了解在 Android 和 iOS 中导入 Flutter 模块进行 UI 展示的示例项目。

Flutter 可以添加到任何基于 HTML DOM 的现有 Web 应用中，无论其是使用何种客户端 Dart Web 框架（如 jaspr, ngdart, over_react 等）、客户端 JS 框架（如 React, Angular, Vue.js 等）、服务端渲染框架（如 Django, Ruby on Rails, Apache Struts 等），甚至是不使用框架（俗称 "VanillaJS"）。最低要求仅为：现有应用及其框架支持导入 JavaScript 库，并创建供 Flutter 渲染的 HTML 元素。

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

入门指南，请参阅我们的 Android 和 iOS 项目集成指南：

在 Flutter 集成到你的项目后，请通过以下链接查看我们的 API 使用指南：

移动端限制

• 不支持多视图模式 (仅支持多引擎模式)。
• 不支持将多个 Flutter 库打包到一个应用中。
• 不支持 FlutterPlugin 的插件，如果在 Add-to-app 环境中做出不合理的假设（例如假设 Flutter 的 Activity 一直存在），可能会导致意外行为。
• 在 Android 上，Flutter 模块仅支持 AndroidX 应用。

Web 端限制

• 不支持多引擎模式 (仅支持多视图模式)。
• 目前无法彻底“关闭” Flutter 引擎。应用可以移除所有 FlutterView 对象，并确保使用标准的 Dart 概念对所有数据进行垃圾回收。然而，即使引擎没有渲染任何内容，它仍将保持启动（ warmed up）状态。