当前位置：首页 > news >正文

在已有的原生 App 里嵌入 Flutter 页面的方法

news 来源：原创 2025/9/10 12:04:26

在原生 App 中嵌入 Flutter 页面，通常使用 Flutter 提供的**平台通道（Platform Channels）**来实现原生代码与 Flutter 之间的交互。具体实现方式依赖于原生 App 的平台（如 Android 或 iOS），下面是两种常见的方法：

1. 使用 Flutter 插件（Flutter Module）

这种方法通过将 Flutter 作为一个模块嵌入到现有的原生应用中。这样可以让你在现有的原生应用里调用 Flutter 页面。

步骤：

创建 Flutter 模块： 首先，你需要创建一个 Flutter 模块，这样就可以将 Flutter 页面嵌入到现有的原生应用中。

你可以通过以下命令来创建 Flutter 模块：
```
flutter create --template module my_flutter
```
这样会创建一个 Flutter 模块，目录结构类似：
```
my_flutter/
├── .ios/
├── .android/
└── lib/
```

将 Flutter 模块添加到现有的原生 App 中：

对于 Android：

在原生项目的 settings.gradle 中包含 Flutter 模块：

include ':app', ':my_flutter'
setProjectDir(':my_flutter', file('path_to_flutter_module'))

在 app/build.gradle 中添加对 Flutter 的依赖：

dependencies {implementation project(':my_flutter')
}

在原生代码中启动 Flutter 页面：

import io.flutter.embedding.android.FlutterActivity;// 启动 Flutter 页面
startActivity(FlutterActivity.createDefaultIntent(this)
);

对于 iOS：

在原生 iOS 项目的 Podfile 中添加 Flutter 模块依赖：

flutter_application_path = 'path_to_flutter_module'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

在原生代码中启动 Flutter 页面：

import Flutterlet flutterEngine = FlutterEngine(name: "my flutter engine")
flutterEngine.run()let flutterViewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)
self.present(flutterViewController, animated: true, completion: nil)

2. 使用 `FlutterFragment` 或 `FlutterViewController`（更细粒度的控制）

如果你想在原生应用中嵌入一个 Flutter 页面而不是整个 Flutter 模块，可以使用 FlutterFragment（Android）或 FlutterViewController（iOS）来嵌入单个 Flutter 页面。

Android:

你可以通过 FlutterFragment 来嵌入 Flutter 页面：

import io.flutter.embedding.android.FlutterFragment;FlutterFragment flutterFragment = FlutterFragment.withNewEngine().build();
getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container, flutterFragment).commit();

iOS:

你可以通过 FlutterViewController 来嵌入 Flutter 页面：

import Flutterlet flutterViewController = FlutterViewController()
self.navigationController?.pushViewController(flutterViewController, animated: true)

3. 使用平台通道与原生代码通信

在嵌入 Flutter 页面后，如果需要在 Flutter 与原生代码之间进行通信，可以使用平台通道（Platform Channels）。这允许你在 Flutter 页面与原生应用之间传递数据和调用方法。

Flutter 端：

import 'package:flutter/services.dart';static const platform = MethodChannel('com.example.myapp/channel');Future<void> _callNative() async {try {final result = await platform.invokeMethod('nativeMethod');print(result);} on PlatformException catch (e) {print("Failed to call native method: '${e.message}'.");}
}

Android 端：

import io.flutter.plugin.common.MethodChannel;
import io.flutter.plugin.common.MethodChannel.MethodCallHandler;
import io.flutter.plugin.common.MethodChannel.Result;new MethodChannel(getFlutterEngine().getDartExecutor(), "com.example.myapp/channel").setMethodCallHandler((call, result) -> {if (call.method.equals("nativeMethod")) {result.success("Hello from Android");} else {result.notImplemented();}});

iOS 端：

import Flutterlet channel = FlutterMethodChannel(name: "com.example.myapp/channel", binaryMessenger: flutterViewController.binaryMessenger)channel.setMethodCallHandler { (call, result) inif call.method == "nativeMethod" {result("Hello from iOS")} else {result(FlutterMethodNotImplemented)}
}

这样，你就可以在原生 App 中嵌入 Flutter 页面，并与原生功能进行交互了。

1. 使用 Flutter 插件（Flutter Module）

步骤：

2. 使用 FlutterFragment 或 FlutterViewController（更细粒度的控制）

Android:

iOS:

3. 使用平台通道与原生代码通信

相关文章：

2. 使用 `FlutterFragment` 或 `FlutterViewController`（更细粒度的控制）