OC 项目添加 Flutter

一、由 Xcode 创建的新项目

1、删除 SceneDelegate.h 和 SceneDelegate.m 文件

文件位置如下图所示:

2、删除 AppDelegate.m 中的 UISceneSession 的两个方法

要删除的两个方法是:

3、在项目的 TARGETS 下的项目中的 info 模块下删除 Application Scene Manifest 字典

删除 Application Scene Manifest 如下图所示:

4、在 AppDelegate.h 中添加 window

在 AppDelegate.h中window 添加如下图所示：

5、在 AppDelegate.m 中添加一个窗口，并项目运行起来

创建的窗口位置和代码如下图所示：

二、添加 Flutter 模块

1、在项目的同级目录添加Flutter的模块

例如：

• 使用终端执行 cd 指令进入项目一级目录，如下图所示：
  

• 在执行 $flutter create --template module xxx 或 $flutter create -t module xxx 或 $flutter create app 指令，如下图所示:
  

  

  注意: xxx 命名不能有大写字母，否则会报 "flutterLib" is not a valid Dart package name. 的错误。

• 经过上一步成功后的目录结构如下图所示:

  
  

三、Flutter 和 OC 项目添加依赖

• 原始项目是使用 CocoaPods 进行管理的添加依赖

  • 1、没有 CocoaPods 的,执行 pod init 进行增加(<font color=red>否则，直接跳过</font>)，如下图所示:
    

    

  • 2、打开项目通过 pod init 成的 Podfile 文件,增加相关代码，增加代码是：

    // 顶部添加路径
    flutter_application_path = "../flutterlib/"
    load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
    
    // 每个某块添加 module
    install_all_flutter_pods(flutter_application_path)
    

    添加结果如下图所示：
    

    

  • 3、由于 Flutter 不支持 Bitcode ，需要在 Xcode 的 TARGETS --> Build Settings 模块下，在右侧搜索框内输入 Bitcode，然后会显示如下图所示：
    

    

    然后，我们将 Build Options 下的 Enable Bitcode 的 YES 更改为 NO,如下图所示:
    

    

  • 4、执行 CocoaPods 的 pod install 指令添加依赖成功。如下图所示:
    

    

四、原生项目里添加一个 Flutter的屏幕

1、在 AppDelegate.h中导入 Flutter模块(@import Flutter)，并创建 FlutterEngine 属性。

如下图所示：

2、在 AppDelegate.m 中进行的修改，主要有引入插件头文件、创建 FlutterEngine 引擎、注册引擎到插件中

如下图所示：

3、在 ViewController 中添加按钮，并实现模态出 Flutter 页面

代码实现如下图所示:

4、在 ViewController 中添加按钮，并实PUSH出 Flutter 页面

代码实现如下图所示:

注意：上述可在模拟器上直接运行，如果要在真机上运行需要执行下面步骤。

• 1、打开项目的Flutter模块的目录，如下图所示：
  

  

  然后，进行 Shift + command + . 显示出隐藏文件，如下图所示:
  

  

• 2、打开 .ios 文件下的 Runner.xcworkspace 文件，在项目的 TARGETS的 Signing & Capabilities 模块下进行项目的 Signing 下的配置。如下图所示：
  

  

• 3、使用 VsCode 打开 Flutter模块的项目，使用$flutter run 进行第一次运行编译成功，如下图所示：
  

  

注意:OC 原始项目也需要设置 Signing & Capabilities 模块下进行项目的 Signing 下的配置。