Skip to main content
Contents

将 Flutter 添加到现有应用

Contents

将Flutter添加到现有应用

#

如果您正在从头开始编写新的应用程序，则可以使用 Flutter 轻松上手。但如果您已经拥有一个并非用 Flutter 编写的应用程序，并且从头开始编写不切实际，该怎么办？

对于这种情况，Flutter 可以作为模块逐步集成到您的现有应用程序中。此功能称为“添加到应用”。该模块可以导入到您的现有应用程序中，以使用 Flutter 渲染应用程序的一部分，而其余部分可以使用现有技术渲染。此方法还可以通过利用 Dart 的可移植性和与其他语言的互操作性来运行共享的非 UI 逻辑。

目前，添加到应用功能支持 Android、iOS 和 Web。

Flutter 支持两种添加到应用的方式：

  • 多引擎模式: 支持 Android 和 iOS，允许运行一个或多个 Flutter 实例，每个实例都渲染嵌入到主机应用程序中的小部件。每个实例都是一个单独的 Dart 程序，在与其他程序隔离的情况下运行。拥有多个 Flutter 实例允许每个实例在使用最少内存资源的同时维护独立的应用程序和 UI 状态。请参阅多个 Flutter 实例页面了解更多信息。
  • 多视图模式: 支持 Web，允许创建多个FlutterView，每个实例都渲染嵌入到主机应用程序中的小部件。在此模式下，只有一个 Dart 程序，所有视图和小部件都可以共享对象。

添加到应用功能支持集成任意大小的多个 Flutter 视图，支持各种用例。两种最常见的用例是：

  • 混合导航栈: 应用程序由多个屏幕组成，其中一些屏幕由 Flutter 渲染，另一些屏幕由其他框架渲染。用户可以自由地在屏幕之间导航，无论使用哪个框架渲染屏幕。
  • 部分屏幕视图: 应用程序中的屏幕渲染多个小部件，其中一些由 Flutter 渲染，另一些由其他框架渲染。用户可以自由滚动和交互任何小部件，无论使用哪个框架渲染小部件。

支持的功能

#

向 Android 应用程序添加 Flutter

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

向 iOS 应用程序添加 Flutter

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

请参阅我们的添加到应用 GitHub 示例存储库，其中包含导入 Flutter 模块以进行 UI 渲染的 Android 和 iOS 示例项目。

向 Web 应用程序添加 Flutter

#

Flutter 可以添加到任何使用任何客户端 Dart Web 框架（jaspr、ngdart、over_react 等）、任何客户端 JS 框架（React、Angular、Vue.js 等）、任何服务器端渲染框架（Django、Ruby on Rails、Apache Struts 等），甚至没有框架（俗称“VanillaJS”）编写的现有基于 HTML DOM 的 Web 应用程序中。最低要求是您的现有应用程序及其框架支持导入 JavaScript 库，并为 Flutter 创建 HTML 元素以进行渲染。

要将 Flutter 添加到现有应用程序，请正常构建它，然后按照嵌入说明 将 Flutter 视图放在页面上。

开始

#

要开始，请参阅我们的 Android 和 iOS 项目集成指南：

Android
iOS
Web

API 使用

#

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

Android
iOS
Web

限制

#

移动端限制：

  • 不支持多视图模式（仅支持多引擎模式）。
  • 不支持将多个 Flutter 库打包到一个应用程序中。
  • 如果插件不支持 FlutterPlugin，则如果它们做出在添加到应用中站不住脚的假设（例如假设始终存在 Flutter Activity），则可能会有意外行为。
  • 在 Android 上，Flutter 模块仅支持 AndroidX 应用程序。

Web 端限制：

  • 不支持多引擎模式（仅支持多视图模式）。
  • 没有办法完全“关闭”Flutter 引擎。应用程序可以删除所有FlutterView对象并确保使用正常的 Dart 概念将所有数据进行垃圾回收。但是，即使引擎没有渲染任何内容，它也会保持预热状态。

除非另有说明，否则本网站上的文档反映的是 Flutter 的最新稳定版本。页面最后更新于 2025-01-30。 查看源代码 或 报告问题。