Flutter 跨平台工程落地：混合开发项目集成实践

混合开发是大型项目中逐步迁移到 Flutter 的常见方案，核心是在现有原生工程（Android/iOS）中嵌入 Flutter Module。以下是关键实践步骤：

1. 创建 Flutter Module

# 在原生项目同级目录创建 module
flutter create --template module my_flutter_module

目录结构示例：

my_app/
├── android/      # 原生 Android 工程
├── ios/          # 原生 iOS 工程
└── my_flutter_module/  # Flutter 模块
    ├── lib/
    ├── pubspec.yaml

2. Android 集成

步骤：

1. 在 settings.gradle 添加：

setBinding(new Binding([gradle: this]))
evaluate(new File(settingsDir, '../my_flutter_module/.android/include_flutter.groovy'))

1. 在 app/build.gradle 添加依赖：

dependencies {
    implementation project(':flutter')
}

1. 在 Activity 嵌入 FlutterView：

val flutterFragment = FlutterFragment.createDefault()
supportFragmentManager
    .beginTransaction()
    .add(R.id.fragment_container, flutterFragment)
    .commit()

3. iOS 集成

步骤：

1. 在 Podfile 添加：

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

1. 执行安装：

pod install

1. 在 ViewController 嵌入：

let flutterEngine = FlutterEngine(name: "my_engine")
flutterEngine.run()
let flutterVC = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)
self.addChild(flutterVC)
view.addSubview(flutterVC.view)

4. 通信机制

使用 MethodChannel 实现双向通信：

// Flutter 端
const channel = MethodChannel('com.example/bridge');
channel.invokeMethod('getNativeData');

// Android 端
MethodChannel(flutterEngine.dartExecutor, "com.example/bridge").setMethodCallHandler { call, result -> 
    if (call.method == "getNativeData") { 
        result.success("Data from Android") 
    }
}

// iOS 端
let channel = FlutterMethodChannel(name: "com.example/bridge", binaryMessenger: flutterVC.binaryMessenger)
channel.setMethodCallHandler { call, result in
    if call.method == "getNativeData" {
        result("Data from iOS")
    }
}

5. **资源与路由管理

• 资源复用：通过 PlatformAssetBundle 访问原生资源
• 路由协调：使用 FlutterBoost 等库实现统一导航栈
• 状态同步：通过 EventChannel 传递全局状态变更

6. **调试优化

• 热重载：flutter attach 连接混合工程
• 性能检测：Dart DevTools 分析内存/渲染
• 包体积控制：
  • 启用代码混淆 flutter build --obfuscate
  • 拆分 AOT 产物（Android App Bundle / iOS Bitcode）

7. **持续集成

graph LR
A[代码提交] --> B[构建 Android 原生包]
A --> C[构建 iOS 原生包]
A --> D[构建 Flutter 产物]
D --> E[合并到 Android 工程]
D --> F[合并到 iOS 工程]

注意事项：

1. 版本对齐：确保 Flutter SDK 与原生构建工具兼容
2. 内存管理：iOS 需手动处理 FlutterEngine 生命周期
3. 平台差异：通过 dart:io 的 Platform.isAndroid/iOS 处理平台逻辑
4. 混合渲染：避免原生控件与 Flutter Widget 重叠导致的 z-index 冲突

实践案例：某电商 App 在保留原生支付/地图模块的同时，将商品详情页迁移至 Flutter，页面加载速度提升 40%，双端代码复用率达 89%。