跳至主要内容
内容

将 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 应用

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

添加到 iOS 应用

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

请参阅我们的添加到应用 GitHub 示例存储库，了解 Android 和 iOS 中的示例项目，这些项目导入用于 UI 的 Flutter 模块。

添加到 Web 应用

#

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的插件，如果它们做出在添加到应用中站不住脚的假设（例如假设 FlutterActivity始终存在），则可能会出现意外行为。
  • 在 Android 上，Flutter 模块仅支持 AndroidX 应用程序。

Web 限制

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

除非另有说明，否则本网站上的文档反映了 Flutter 的最新稳定版本。页面上次更新于 2024-08-20。 查看源代码 或 报告问题.