让 Flutter 发挥作用？

您好！

此项目是一个演示，旨在通过将其集成到现有应用程序中来帮助人们试用 Flutter。

该仓库包含一个 Flutter add-to-app 模块，其中包含用于显示弹出窗口以捕获用户反馈（“净推荐值”）的用户界面和逻辑。该模块旁边是三个新闻信息应用程序，分别用于 iOS、Android 和 Web，分别使用 SwiftUI、Kotlin 和 Angular 构建。

这些应用程序演示了如何导入 Flutter 模块并使用原生平台代码显示它。如果您想学习，例如，如何在 Swift 中连接 UI 元素以导航到 Flutter 显示的内容，iOS 新闻信息应用程序可以告诉您。

如果您想在自己的应用程序中试用 Flutter，可以从该仓库下载 Android、iOS 或 Web 的 Flutter 模块预构建副本，并按照下面的说明将其集成到您自己的应用程序中。请注意，您无需在开发机器上安装 Flutter SDK 即可使用这些！

下载和使用预编译的 Flutter 模块

iOS

有关将模块添加到现有 iOS 应用程序的完整说明，请参阅 flutter.dev 上的 add-to-app 文档，但您可以在下面找到 Swift 和 Objective-C 的简要版本。

将 Flutter 模块链接到您的应用程序

  • 从该仓库下载 Flutter 模块的最新框架构建。

  • 将存档解压缩到项目目录的根目录。它将在那里创建一个名为 flutter-framework 的目录，其中包含编译的 Flutter 模块。

  • 在 Xcode 中，打开 flutter-framework/Release 目录，并将 App.xcframework 和 Flutter.xcframework 拖到您的应用程序目标中的 **General > Frameworks, Libraries, and Embedded Content** 部分。

更新您的应用程序代码以显示 Flutter

一旦 Flutter 模块链接到您的应用程序，您就可以启动 Flutter 引擎实例并显示 Flutter 视图控制器了。

Swift

在 AppDelegate.swift 中，添加以下三行标记为“NEW”的代码：

import UIKit
import Flutter // NEW!

@UIApplicationMain
class AppDelegate: FlutterAppDelegate {
  lazy var flutterEngine = FlutterEngine(name: "my flutter engine")  // NEW!

  override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    flutterEngine.run();  // NEW!
    return super.application(application, didFinishLaunchingWithOptions: launchOptions);
  }
}

然后，在您应用程序中的某个 ViewController 类中，调用这三行代码以显示 Flutter 模块的用户界面。

let flutterEngine = (UIApplication.shared.delegate as! AppDelegate).flutterEngine
let flutterViewController =
    FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)
present(flutterViewController, animated: true, completion: nil)

作为演示，最好在响应 UI 事件（如按钮点击）时调用这些代码。一旦执行，净推荐值用户界面就会出现在您的应用程序中！

Objective-C

在 AppDelegate.h 中，添加此导入：

@import Flutter;

以及此属性到 AppDelegate 接口：

@property (nonatomic,strong) FlutterEngine *flutterEngine;

接下来，在 AppDelegate.m 中，将这两行添加到 didFinishLaunchingWithOptions：

  self.flutterEngine = [[FlutterEngine alloc] initWithName:@"my flutter engine"];
  [self.flutterEngine run];

然后，在您应用程序中的某个 UIViewController 类中，`@import Flutter` 并调用这些代码行：

FlutterEngine *flutterEngine =
    ((AppDelegate *)UIApplication.sharedApplication.delegate).flutterEngine;
FlutterViewController *flutterViewController =
    [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil];
[self presentViewController:flutterViewController animated:YES completion:nil];

作为演示，最好在响应 UI 事件（如按钮点击）时调用这些代码。一旦执行，净推荐值用户界面就会出现在您的应用程序中！

Android

有关将模块添加到现有 Android 应用程序的完整说明，请参阅 flutter.dev 上的 add-to-app 文档，但您可以在下面找到 Kotlin 和 Java 的简要版本。

将 Flutter 模块导入到您的应用程序代码库中

首先，从该仓库下载 Flutter 模块的最新 aar 构建。然后，在项目根目录中创建一个名为 flutter 的目录，并将存档解压缩到该目录中。

接下来，将以下条目添加到您 app/build.gradle 文件的 `repositories` 和 `dependencies` 部分：

repositories {
  // Add these two maven entries.
  maven {
    url '../flutter'
  }
  maven {
    url 'https://storage.googleapis.com/download.flutter.io'
  }
}

dependencies {
  // Add these three entries.
  debugImplementation 'com.example.flutter_module:flutter_debug:1.0'
  profileImplementation 'com.example.flutter_module:flutter_profile:1.0'
  releaseImplementation 'com.example.flutter_module:flutter_release:1.0'
}

更新您的应用程序代码以显示 Flutter

一旦 Flutter 模块链接到您的应用程序，您就可以启动 Flutter 引擎实例并显示 Flutter Activity 了。

Kotlin

在您应用程序的 Application 类中，添加一个 Flutter 引擎的属性：

lateinit var flutterEngine : FlutterEngine

在 onCreate 中，使用以下代码实例化并缓存一个正在运行的 Flutter 引擎：

// Instantiate a FlutterEngine.
flutterEngine = FlutterEngine(this)

// Start executing Dart code to pre-warm the FlutterEngine.
flutterEngine.dartExecutor.executeDartEntrypoint(
  DartExecutor.DartEntrypoint.createDefault()
)

// Cache the FlutterEngine to be used by FlutterActivity.
FlutterEngineCache
  .getInstance()
  .put("my_engine_id", flutterEngine)

然后，在您应用程序中的某个 Activity 类中，调用这四行代码以启动 Flutter 模块的用户界面：

startActivity(
  FlutterActivity
    .withCachedEngine("my_engine_id")
    .build(this)
)

作为演示，最好在响应 UI 事件（如按钮点击）时调用这些代码。一旦执行，净推荐值用户界面就会出现在您的应用程序中！

Java

在您应用程序的 Application 类中，添加一个 Flutter 引擎的属性：

public FlutterEngine flutterEngine;

在 onCreate 中，使用以下代码实例化并缓存一个正在运行的 Flutter 引擎：

// Instantiate a FlutterEngine.
flutterEngine = new FlutterEngine(this);

// Start executing Dart code to pre-warm the FlutterEngine.
flutterEngine.getDartExecutor().executeDartEntrypoint(
  DartEntrypoint.createDefault()
);

// Cache the FlutterEngine to be used by FlutterActivity.
FlutterEngineCache
    .getInstance()
    .put("my_engine_id", flutterEngine);

然后，在您应用程序中的某个 Activity 类中，调用这四行代码以启动 Flutter 模块的用户界面：

startActivity(
  FlutterActivity
    .withCachedEngine("my_engine_id")
    .build(currentActivity)
  );

作为演示，最好在响应 UI 事件（如按钮点击）时调用这些代码。一旦执行，净推荐值用户界面就会出现在您的应用程序中！

Web

构建网站的方式几乎与已发布的网站一样多，因此在一定程度上，将 Flutter 模块集成到您的网站中的“正确”方式将取决于您使用的特定客户端技术（Angular、React、Vue 等）以及您用来托管内容的服务器（Firebase Hosting、nginx 等）。

在此不可能涵盖所有可能性，但对于任何一种情况，基本方法都大致相同。

  • 从该仓库下载 Flutter 模块的最新 Web 构建。

  • 将存档解压缩到项目源树中的某个文件夹中，以便您使用的服务器技术（例如，Firebase Hosting 项目的“public”文件夹）可以访问并提供它。

  • 在您网站的其中一个页面中添加一个 iframe，并将其 src URL 设置为指向上一secutive 步骤解压缩存档时创建的 web-project-flutter 文件夹中的 index.html 文件。

  • 将客户端代码添加到同一页面，以便在响应方便的 UI 事件（例如按钮点击）时显示 iframe。

Angular

该仓库中的示例 Web 应用程序是用 Angular 构建的，可以作为 Web 集成的模型。如果您也使用 Angular，请按照以下步骤将模型集成到您的项目中。

首先，下载该仓库中最新的 Web 构建的 Flutter 模块，并将其解压缩到您项目的 src 目录中。

接下来，将 src/web-project-flutter/index.html 中的 <base href="/"> 更改为 <base href="./">。

然后更新 angular.json 以包含新文件：

"assets": [
    "src/favicon.ico",
    "src/assets",
    "src/web-project-flutter"
],

添加一个 iframe

<iframe src="./web-project-flutter/index.html"> </iframe>

移动到您的 Angular 项目目录并运行：

npm install 或 npm install --legacy-peed-deps，具体取决于您的 npm 依赖项。

最后，运行 ng serve 来启动应用程序。

GitHub

查看 Github