Flutter混合开发 - 源码集成 & framework集成

[官方集成文档: https://flutter.dev/docs/development/add-to-app/ios/project-setup]

两种集成方式对比:

集成方案对比.png

一.源码集成
1.新建flutter_module项目 和 iOS native项目 (两个项目最好在同一个目录下)

2.png

1.1 使用命令:flutter create -t module flutter_module 或者 Android studio(File > New > New Flutter Project > Flutter Module) 创建 module项目
1.2 创建的flutter_module项目中有隐藏文件夹 .ios 和 .android, 修改iOS中证书配置就可以在真机上运行该项目(在模拟器上运行不用配置证书)
1.3 创建iOS native项目
1.4 native项目集成flutter

1.4.1.创建Podfile (pod init)
1.4.2.编辑Podfile 文件, 如下

target 'NativeiOS' do
  use_frameworks!

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

  install_all_flutter_pods(flutter_application_path)
end

1.4.3.安装依赖, pod install
1.4.4.bitcode 设置为NO, flutter不支持bitcode
1.4.5.添加Run Script, 内容为

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed

至此, 集成配置已经完成, 在原生项目中可以显示flutter内容了

2.原生项目显示flutter界面

#import <Flutter/Flutter.h>

- (void)showFlutter {
  FlutterViewController *flutterVC = [[FlutterViewController alloc] init];
  flutterVC.modalPresentationStyle = UIModalPresentationFullScreen;
  [self presentViewController:flutterVC animated:true completion:nil];
//    [self.navigationController pushViewController:flutterVC animated:true];
  
}

默认显示的flutter项目的首页, 如果需要显示不同的界面, 可以使用 InitialRoute 来控制

[flutterVC setInitialRoute:@"FirstPage"];

在flutter项目中, 使用 window.defaultRouteName 获取到 InitialRoute的值, 来显示不同的 flutter界面, 如果需要传值, 可以使用json字符串

3.dismiss flutter界面
可以使用 MethodChannel 进行通信, 在原生代码中 dismiss flutterVC

FlutterMethodChannel *methodChannel = [FlutterMethodChannel methodChannelWithName:@"app/dismiss" binaryMessenger:flutterVC.binaryMessenger];
[methodChannel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult  _Nonnull result) {
    if ([call.method isEqualToString:@"dismiss"]) {
        [flutterVC dismissViewControllerAnimated:true completion:nil];
    }
}];

在flutter代码中, 调用 dismiss方法

MethodChannel("app/dismiss").invokeMethod("dismiss");

4.原生与flutter通信
MethodChannel

二. framework集成, 将flutter打包成framework, 原生项目直接集成framework, 不用配置flutter环境

1. 新建 Flutter Module项目 (同上)
2. 打包framework: flutter build ios-framework
3. 上面的命令会打出 Debug/Profile/Release 模式的framework, 可以

4. 将 App.framework 和 Flutter.framework 拖入需要集成的项目, 并设置为 Embed & Sign

   
   屏幕快照 2020-10-28 下午2.14.47.png

集成遇到的问题

1. 编译时出现: /packages/flutter_tools/bin/xcode_backend.sh: No such file or directory 错误
   解决: 勾选 Run Script 下的 Run script only when installing

   
   屏幕快照 2020-10-28 上午10.47.13.png

屏幕快照 2020-10-28 下午2.03.16.png