Flutter项目与XCode iOS项目混编与踩坑记录

381 阅读1分钟

同Android项目一样,我们先创建一个iOS项目

image.png

  • 安装Cocoapods,不再赘述
  • 安装好Cocoapods之后在iOS项目下执行
pod init 
pod install
  • 之后运行FlutterHybirdiOS.xcworkspace没问题即可

指定flutter_module

  • 在podfile中添加以下代码关联Flutter
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'FlutterHybirdiOS' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

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

  target 'FlutterHybirdiOSTests' do
    inherit! :search_paths
    # Pods for testing
    install_all_flutter_pods(flutter_application_path)
  end

  target 'FlutterHybirdiOSUITests' do
    # Pods for testing
    install_all_flutter_pods(flutter_application_path)
  end

post_install do |installer|
  flutter_post_install(installer) if defined?(flutter_post_install)
end


end

  • 然后 pod install 即可

  • 注意:Flutter项目中以后如果依赖了什么其他插件,除了flutter packages get 以外,还需要执行 pod install

  • 禁用Bitcode

image.png

  • 添加build phase 来构建 Dart 代码

image.png

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed
  • 加号之后是这个样子

image.png

  • 编译iOS项目,然后报错如下:

xcode_backend.sh No such file or directory #17234

原因是我们没有添加 FLUTTER_ROOT 以及 FLUTTER_APPLICATION_PATH,添加即可

  • 参考下图,添加你的FlutterSDK的路径以及flutter项目路径即可

image.png

参考文章:

github.com/flutter/flu…

www.jianshu.com/p/6db66a782…

  • 接下来,pod install 然后继续编译
  • 编译成功~

OC调用Flutter代码

  • 方法一
FlutterViewController *flutterViewController = [FlutterViewController new];

    [flutterViewController setInitialRoute:@"{name:'devio', datalist:['aa', 'bb', 'cc']}"];

    [**self** presentViewController:flutterViewController animated:**YES** completion:**nil**];
    
  • 方法二
#import "AppDelegate.h"

//#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h>

  


**@interface** AppDelegate ()

  


**@end**

  


**@implementation** AppDelegate

  


  


- (**BOOL**)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

    // Override point for customization after application launch.

    

    // 此处初始化FlutterEngine

    **self**.flutterEngine = [[FlutterEngine alloc] initWithName:@"my flutter engine"];

      // Runs the default Dart entrypoint with a default Flutter route.

      [**self**.flutterEngine run];

      // Used to connect plugins (only if you have plugins with iOS platform code).

//    [GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine];

    **return** **YES**;

}
// 使用FlutterEngine打开Flutter页面

    FlutterEngine *flutterEngine =

            ((AppDelegate *)UIApplication.sharedApplication.delegate).flutterEngine;

        FlutterViewController *flutterViewController =

            [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:**nil** bundle:**nil**];

        [**self** presentViewController:flutterViewController animated:**YES** completion:**nil**];
        

调试与发布

  • 热加载和热重启
  • 进入到flutter_module目录下,执行以下命令即可
flutter attach
  • 然后r即可热重载
  • R热重启
  • q退出
  • 如果连接了多个设备则 flutter attach -d '设备ID' 即可