Flutter 与 iOS 原生项目混编配置

一、Flutter 安装 『中文网』

• 终端执行

  flutter doctor -v
  

• 如果安装成功会有如下打印：

  OwohAnserdeiMac:Supermakup_Swift pet$ flutter doctor
  Doctor summary (to see all details, run flutter doctor -v):
  [✓] Flutter (Channel stable, v1.17.1, on Mac OS X 10.15.5 19F101, locale zh-Hans-CN)
  
  [✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
  [✓] Xcode - develop for iOS and macOS (Xcode 11.3)
  [✓] Android Studio (version 3.6)
  [✓] VS Code (version 1.47.3)
  [✓] Connected device (1 available)
  
  • No issues found!
  

二、在iOS项目中集成Flutter SDK

• 1、iOS工程的Enable BitCode需要设置为NO，因为Flutter 混合开发不支持。

• 2、创建 flutter module:

  • cd 到项目文件的同级目录下；
  • 执行命令：(flutter_module: 文件名称，可自定义)

    flutter create -t module flutter_module
    

  • 如果输出如下错误：

    Got socket error trying to find package cupertino_icons at https://pub.dartlang.org.
    

  • 可执行以下命令解决：

    /// 配置镜像
    export PUB_HOSTED_URL=https://pub.flutter-io.cn
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
    

  • 若输出如下，表示成功，可在项目文件的同级目录看到新生成的文件（flutter_module）：

    OwohAnserdeiMac:Supermakup_Swift pet$ flutter create -t module myfluttermodule
    Creating project myfluttermodule...
    myfluttermodule/test/widget_test.dart (created)
    myfluttermodule/myfluttermodule.iml (created)
    myfluttermodule/.gitignore (created)
    myfluttermodule/.metadata (created)
    myfluttermodule/pubspec.yaml (created)
    myfluttermodule/README.md (created)
    myfluttermodule/lib/main.dart (created)
    myfluttermodule/myfluttermodule_android.iml (created)
    myfluttermodule/.idea/libraries/Flutter_for_Android.xml (created)
    myfluttermodule/.idea/libraries/Dart_SDK.xml (created)
    myfluttermodule/.idea/modules.xml (created)
    myfluttermodule/.idea/workspace.xml (created)
    Running "flutter pub get" in myfluttermodule...                     1.0s
    Wrote 12 files.
    
    All done!
    Your module code is in myfluttermodule/lib/main.dart.
    

• 3、通过cocoapods添加依赖

  • 在项目的Podfile文件中添加如下代码：

    #其中flutter_application_path为flutter模块相对于podfile文件的位置。
    flutter_application_path = './../flutter_module/'
    eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)
    

  • 更新pods

    pod install
    

• 4、添加脚本

  Xcode -> Target -> Build Phase -> New Run Script Phase;

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

• 5、编译项目

  • 编译成功，执行脚本后会在项目的根目录中生成一个Flutter文件，里面包含：

    Flutter.framework
    Flutter.podspec
    

  • 编译失败
    • 如果报如下错误：

      /bin/sh: /packages/flutter_tools/bin/xcode_backend.sh: No such file or directory
      

    • 需指定FLUTTER_ROOT路径，在 flutter_module/.ios(隐藏文件)/Flutter/Generated.xcconfig 路径下找到Generated.xcconfig 文件，打开可以看到：

      FLUTTER_ROOT=/Users/pet/Desktop/Flutter/flutter
      FLUTTER_APPLICATION_PATH=/Users/pet/Desktop/超级美/Supermakup_Swift/flutter_module
      FLUTTER_TARGET=lib/main.dart
      FLUTTER_BUILD_DIR=build
      SYMROOT=${SOURCE_ROOT}/../build/ios
      OTHER_LDFLAGS=$(inherited) -framework Flutter
      FLUTTER_BUILD_NAME=1.0.0
      FLUTTER_BUILD_NUMBER=1
      

    • 在xcode中添加如下配置:
      xcode -> target -> build setting - User-Defined 中添加：

      FLUTTER_ROOT=/Users/pet/Desktop/Flutter/flutter
      FLUTTER_APPLICATION_PATH=/Users/pet/Desktop/超级美/Supermakup_Swift/flutter_module
      

• 6、将Flutter添加到工程中

  • 将项目根目录下的Flutter文件添加到工程中，将Flutter.framework 添加到Xcode -> Target -> General -> Framewroks,Libraries,and Embeded Content 下。

• 7、引入Flutter SDK 头文件和使用

  #import 
  

三、入过的坑：

1. 第一次加载flutter页面显示ios启动图；

需要注意的是iOS原生跳转flutter时，第一次跳转会异步渲染flutter环境，因此，FlutterViewController实例有个splashScreenView属性，防止用户在打开flutter页面时会有一个中间的空档，如果我们没有设置此属性，iOS默认将app应用的LaunchStoryboard设置为此属性的值，默认可能设置成功也可能设置失败，取决于你APP的启动图片是否是用LaunchStoryboard来设置的，所以，没有特殊情况，最好手动设置一下此属性；

let vc = CJMFlutterViewController.init()
vc.splashScreenView = {
    let view = UIView.init(frame: UIScreen.main.bounds)
    view.backgroundColor = kBackgroundColor
    return view
}()

2. FlutterViewController 内存泄露

原因出在创建channel时，造成了循环引用，导致flutterViewController不释放。可以新建一个控制器继承FlutterViewController，然后重写 didMove(toParent parent: UIViewController?) 方法

override func didMove(toParent parent: UIViewController?) {
      super.didMove(toParent: parent)
      if parent == nil {
          DispatchQueue.main.async {
              self.engine?.viewController = nil     // 必须先释放 engine 持有的 flutterViewController，否则会crash
              self.engine?.destroyContext()         // 再销毁 engine
          }
      }
  }