Flutter混合开发指南_现有APP嵌入Flutter模块

如何在现有原生APP中嵌入Flutter模块？具体需要哪些步骤和配置？

在混合开发过程中，Flutter模块与原生的通信机制应该如何实现？有没有推荐的方案或最佳实践？

嵌入Flutter模块后，对原生APP的性能和包体积会有多大影响？如何优化？

有没有实际案例或代码示例可以参考？特别是在处理原生导航与Flutter路由共存时的解决方案？

在Android和iOS平台上，集成Flutter模块时有哪些需要注意的差异或常见坑？

3 回复

要在现有App中嵌入Flutter模块，首先确保环境已配置好（如安装Flutter SDK）。接着创建一个Flutter module：flutter create --org com.example --template module my_flutter。将生成的module作为依赖添加到原生项目中。

Android上，通过settings.gradle包含module，并在原生Activity中初始化FlutterEngine，使用FlutterView加载页面。例如：

FlutterEngine engine = new FlutterEngine(this);
TaskRunnable task = new TaskRunnable("route");
engine.getNavigationChannel().setInitialRoute("route");
engine.getNavigationChannel().invokeMethod("method", "params", task);

iOS则需集成Pods，然后在ViewController中创建FlutterViewController实例。例如：

FlutterViewController *controller = [[FlutterViewController alloc] init];
[self presentViewController:controller animated:YES completion:nil];

记得处理平台特定的生命周期事件，保证与Flutter引擎同步。这样就能成功嵌入并运行Flutter模块了。

更多关于Flutter混合开发指南_现有APP嵌入Flutter模块的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


对于已有原生App想嵌入Flutter模块的情况，首先确保Flutter环境配置完成。Android项目中，在需要嵌入的Activity里初始化FlutterEngine，使用FlutterEngineCache缓存引擎以便复用。例如：

FlutterEngine engine = new FlutterEngine(this);
engine.getImplicitAnimationsRunner().start();
engine.getDartExecutor().executeDartEntrypoint(
    DartExecutor.DartEntrypoint.createDefault()
);
FlutterEngineCache.getInstance().put("my_engine_id", engine);

// 创建FlutterView并加载页面
FlutterView flutterView = new FlutterView(this);
flutterView.setKeyEventChannel(engine.getDartExecutor());
flutterView.setSystemChannel(engine.getDartExecutor());
flutterView.setBinaryMessenger(engine.getDartExecutor().getBinaryMessenger());
flutterView.setChildActivityContainer(...);

iOS端则通过创建FlutterViewController实现，记得导入Flutter.framework并设置相关Delegate。这样就可以在原生界面中嵌入动态更新的Flutter页面了。

Flutter混合开发指南：现有APP嵌入Flutter模块

要在现有原生APP中嵌入Flutter模块，主要有两种方式：

方案一：Flutter作为库集成（推荐）

  1. 创建Flutter模块
flutter create -t module --org com.example my_flutter_module
  1. 原生项目配置

Android端：

  • 在settings.gradle中添加：
setBinding(new Binding([gradle: this]))
evaluate(new File(settingsDir.parentFile, 'my_flutter_module/.android/include_flutter.groovy'))
  • 在build.gradle中添加依赖：
dependencies {
    implementation project(':flutter')
}

iOS端：

  • 在Podfile中添加：
flutter_application_path = '../my_flutter_module/'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
  1. 使用FlutterView

Android:

FlutterFragment flutterFragment = FlutterFragment.createDefault();
getSupportFragmentManager().beginTransaction()
    .add(R.id.fragment_container, flutterFragment)
    .commit();

iOS:

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

方案二：Flutter Boost集成（复杂场景）

适用于需要多个Flutter页面与原生页面混合导航的场景：

  1. 添加依赖：flutter_boost
  2. 配置路由表
  3. 实现原生与Flutter页面跳转

通信机制

  1. MethodChannel：双向通信
  2. EventChannel：事件流通信
  3. BasicMessageChannel：简单消息传递

注意事项：

  • 需要保持Flutter模块与主项目的Dart/Flutter版本一致
  • 调试时需同时运行原生项目和Flutter模块
  • 打包发布时需要包含Flutter产物

这种混合开发模式允许你逐步迁移现有APP，或在特定功能中使用Flutter。

回到顶部