Flutter 集成到现有iOS工程

前沿

由于我司已经有自己的App，flutter属于技术引进的一部分，也不太可能重新启动一个项目，因此目前我们是将flutter模块形式注入我们的App之中。即：将flutter模块集成到现在有iOS工程之中。

目录

1. 创建flutter模块工程
2. 使用pod 将flutter 模块工程添加到现有工程之中
3. code 执行flutter 工程
4. 运行热更新

1. 创建flutter模块工程

我这里是使用Android Studio 创建flutter工程，如下：

当然也可以使用flutter命令行进行创建，命令如下：

$ cd some/path/
$ flutter create -t module my_flutter

工程结构 和我们的iOS 工程保持相对目录，结构如下：

some/path/
  my_flutter/
    lib/main.dart
    .ios/
  MyApp/
    MyApp/
      AppDelegate.h
      AppDelegate.m (or swift)
      :

2. 使用pod 将flutter 模块工程添加到现有工程之中

2.1 podfile 文件之中引入 flutter模块工程

####Flutter###
flutter_application_path = '../my_flutter' //目录结构按照具体我们存储的路径进行
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)

2.2 然后执行pod install

2.3 ENABLE_BITCODE  设置为NO

2.4 Build Phares 添加 以下脚本（+ 号添加一个新的脚本，然后复制下面的内容）

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

执行编译即可

 最新版本集成 (最新版本已经优化了很多东西，不需要配置sh)

####Flutter###
flutter_application_path = 'somepath/flutter_rokid'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

target 'App' do

install_all_flutter_pods(flutter_application_path)

....

end

3.code 执行flutter 工程

1. AppDelete.h 配置

import FlutterPluginRegistrant // Only if you have Flutter Plugins.

@UIApplicationMain

class AppDelegate: FlutterAppDelegate {
　　...

        self.flutterEngine = FlutterEngine(name: "xxx.flutter", project: nil);

self.flutterEngine?.run(withEntrypoint: nil);

GeneratedPluginRegistrant.register(with: self.flutterEngine);

   ...
}
    

2. 业务方调用

import Foundation
import Flutter

class RKFlutterDemo : UIViewController {
    override func viewDidLoad() {
        title = "flutter "
        var button = UIButton(type:UIButtonType.custom)
        button.addTarget(self, action: #selector(handleButtonAction), for: .touchUpInside)
        button.setTitle("Press me", for: UIControlState.normal)
        button.frame = CGRect(x: 80.0, y: 210.0, width: 160.0, height: 40.0)
        button.backgroundColor = UIColor.blue
        self.view.addSubview(button)

        button = UIButton(type:UIButtonType.custom)
        button.addTarget(self, action: #selector(handleButtonAction1), for: .touchUpInside)
        button.setTitle("Press me v1", for: UIControlState.normal)
        button.frame = CGRect(x: 80.0, y: 270.0, width: 160.0, height: 40.0)
        button.backgroundColor = UIColor.blue
        self.view.addSubview(button)

        button = UIButton(type:UIButtonType.custom)
        button.addTarget(self, action: #selector(handleButtonAction2), for: .touchUpInside)
        button.setTitle("Press me v2", for: UIControlState.normal)
        button.frame = CGRect(x: 80.0, y: 330.0, width: 160.0, height: 40.0)
        button.backgroundColor = UIColor.blue
        self.view.addSubview(button)

    }
    
　　//全局生命周期，即便是 VC 退出页面下次打开还是会 停留在上一次操作结果（所以适合全局性页面）
    @objc func handleButtonAction() {
        let flutterEngine = (UIApplication.shared.delegate as? AppDelegate)?.flutterEngine;
        let flutterViewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)!;
        self.navigationController?.pushViewController(flutterViewController, animated: true)
    }
    
     //每次都会创建实例
    @objc func handleButtonAction1(){
        let flutterViewController = FlutterViewController();
        self.navigationController?.pushViewController(flutterViewController, animated: true)
    }
    
     //如果一个模块有多个 页面导航，则需要设置路由进行跳转
    @objc func handleButtonAction2(){
        let flutterViewController = FlutterViewController();
        flutterViewController.setInitialRoute("router1") //跳转到路由
        self.navigationController?.pushViewController(flutterViewController, animated: true)
    }

}

4. 运行热更新

其实在我们App 集成完成之后，我们还是可以在flutter工程之中直接运行到我们自己的工程之中

4.1  使用Xcode运行我们的App  Command+R 运行

4.2 cd 到 在flutter 工程下 执行命令行：

flutter attach

这样我们直接编写 ，然后在 命令行中 按住 r 就可以 直接更新 App 中的页面了

备注：在3的打开方式之中 只能以下模式的页面可以更新

   @objc func handleButtonAction() {
        let flutterEngine = (UIApplication.shared.delegate as? AppDelegate)?.flutterEngine;
        let flutterViewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)!;
        self.navigationController?.pushViewController(flutterViewController, animated: true)
    }

参考文献

https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps#experiment-turn-the-flutter-project-into-a-module