Flutter混合开发-集成到iOS项目中

1，创建一个flutter模块儿

创建Flutter Module

flutter create --template module my_flutter

创建完成后，该模块和普通的Flutter项目可以通过Android Studio或VSCode打开、运行；

2，创建一个iOS项目

创建一个工程名称为 mix_flutter 的iOS项目，使用 CocoaPods 依赖管理和已安装的 Flutter SDK

1) 将项目加入CocoaPods进行管理

CD到项目根目录，然后依次执行

初始化CocoaPods：pod init

安装CocoaPods的依赖：pod install

编译Podfile文件：

# Uncomment the next line to define a global platform for your project

# platform :ios, '9.0'


# 添加模块儿所在路径

flutter_application_path = '../my_flutter'

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


target 'mix_flutter' do

  # Comment the next line if you don't want to use dynamic frameworks

  use_frameworks!

  

  #安装 Flutter 模块儿

  install_all_flutter_pods(flutter_application_path)


  # Pods for mix_flutter


  target 'mix_flutterTests' do

    inherit! :search_paths

    # Pods for testing

  end


  target 'mix_flutterUITests' do

    # Pods for testing

  end


end

2) 在iOS项目编写代码展示Flutter页面

为了在既有的iOS应用中展示Flutter页面，需要启动 Flutter Engine和 FlutterViewController。

Appdelegate.h 代码

#import <UIKit/UIKit.h>

@import Flutter;

@interface AppDelegate : FlutterAppDelegate

@property (nonatomic,strong) FlutterEngine *flutterEngine;

@end

Appdelegate.m 代码

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

    

    // 1.创建一个FlutterEngine对象

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

    // 2.启动flutterEngine

    [self.flutterEngine  run];

    [GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine];
    

    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

    self.window.backgroundColor = UIColor.whiteColor;

    ViewController *vc = [[ViewController alloc] init];

    self.window.rootViewController = vc;

    [self.window makeKeyAndVisible];

    return [super application:application didFinishLaunchingWithOptions:launchOptions];

}

ViewController.m 代码

- (void)viewDidLoad {

    [super viewDidLoad];

    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];

    [button addTarget:self

              action:@selector(showFlutter)

    forControlEvents:UIControlEventTouchUpInside];

    [button setTitle:@"Hello Flutter!" forState:UIControlStateNormal];

    button.backgroundColor = UIColor.blueColor;

    button.frame = CGRectMake(80.0, 210.0, 160.0, 40.0);

    [self.view addSubview:button];
}

- (void)showFlutter {

    FlutterEngine *flutterEngine =

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

    FlutterViewController *flutterViewController =

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

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

}

通过 Xocde 运行项目即可

3，让 Flutter 模块儿通过Android Studio在iOS模拟器，hot reload, hot restart

由于在 XCode 调试项目每次修改都需要运行项目，所以最好能通过 Android Studio 来调试Flutter模块儿

1） 注意：首先使用Xcode运行 mix_flutter 项目，并保持

2） 在 Android Studio 打开Flutter 模块儿，然后打开终端,执行命令flutter attach

由于我同时连接了我的手机，和打开了模拟器，所以有多个选项，所以我们需要选一个设备，

mqingiMac:my_flutter tiansifang$ flutter attach
Multiple devices found:
iPhoneMQ (mobile)  • 00008030-001C04D21E89802E            • ios • iOS 13.4 17E255
iPhone 13 (mobile) • DE390EED-B28A-4D7E-8C2A-EA9EF2637000 • ios • com.apple.CoreSimulator.SimRuntime.iOS-15-0 (simulator)
[1]: iPhoneMQ (00008030-001C04D21E89802E)
[2]: iPhone 13 (DE390EED-B28A-4D7E-8C2A-EA9EF2637000)
Please choose one (To quit, press "q/Q"): 

输入 2 来选中模拟器,出现如下错误

Please choose one (To quit, press "q/Q"): 2
There are multiple observatory ports available.
Rerun this command with one of the following passed in as the appId:

  flutter attach --app-id com.example.myFlutter
  flutter attach --app-id com.example.myFlutter (2)
  flutter attach --app-id com.mingqing.mix-flutter

然后执行 flutter attach --app-id com.mingqing.mix-flutter 又出现如下错误

mqingiMac:my_flutter tiansifang$ flutter attach --app-id com.mingqing.mix-flutter
Multiple devices found:
iPhoneMQ (mobile)  • 00008030-001C04D21E89802E            • ios • iOS 13.4 17E255
iPhone 13 (mobile) • DE390EED-B28A-4D7E-8C2A-EA9EF2637000 • ios • com.apple.CoreSimulator.SimRuntime.iOS-15-0 (simulator)
[1]: iPhoneMQ (00008030-001C04D21E89802E)
[2]: iPhone 13 (DE390EED-B28A-4D7E-8C2A-EA9EF2637000)
Please choose one (To quit, press "q/Q"): 

再次输入 2 来选中模拟器，成功了，然后通过Android Studio 修改flutter 模块儿代码， 通过命令提示 (如下r Hot reload. 🔥🔥🔥R Hot restart.) 来热更新界面

Please choose one (To quit, press "q/Q"): 2
Syncing files to device iPhone 13...                                6.3s

Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h List all available interactive commands.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).

💪 Running with sound null safety 💪

An Observatory debugger and profiler on iPhone 13 is available at: http://127.0.0.1:51772/O29OVOaScrA=/
The Flutter DevTools debugger and profiler on iPhone 13 is available at: http://127.0.0.1:9101?uri=http://127.0.0.1:51772/O29OVOaScrA=/

1. 总结 flutter attach 命令 最开始直接使用命令选中模拟器和iOS工程

flutter attach -d DE390EED-B28A-4D7E-8C2A-EA9EF2637000 --app-id com.mingqing.mix-flutter