Flutter 三端分离模式开发（先基于原有iOS项目开发，更新

2020-12-03 本文已影响0人 CarrySniper

2020年之前有些教程创建方式已经不适用，要么缺文件、要么原生项目运行报错，折腾几天半个月都不行，还是官方文档教程比较靠谱。

目前原生App和Flutter混合开发有两种模式：

统一管理模式：将原生工程作为Flutter工程的子工程，由Flutter进行统一管理。
三端分离模式：将Flutter工程作为原生工程的子模块，维持原有的原生工程管理方式不变。

一、基于原有iOS项目集成Flutter框架

前提要拥有CocoaPods和Flutter环境配置
Flutter官方文档

1.1、创建项目文件夹

新建总项目文件夹，存放三端项目文件如：carry_sniper

1.2、创建Flutter模块

在总项目文件夹内，创建Flutter模块工程如：flutter_module

cd xxx/carry_sniper 你的文件夹路径

flutter create --template module flutter_module

执行结果：

Creating project flutter_module...
  flutter_module/test/widget_test.dart (created)
  flutter_module/flutter_module.iml (created)
  flutter_module/.gitignore (created)
  flutter_module/.metadata (created)
  flutter_module/pubspec.yaml (created)
  flutter_module/README.md (created)
  flutter_module/lib/main.dart (created)
  flutter_module/flutter_module_android.iml (created)
  flutter_module/.idea/libraries/Dart_SDK.xml (created)
  flutter_module/.idea/modules.xml (created)
  flutter_module/.idea/workspace.xml (created)
Running "flutter pub get" in flutter_module...                      0.8s
Wrote 11 files.

All done!
Your module code is in flutter_module/lib/main.dart.

1.3、创建iOS项目工程

在总项目文件夹，使用Xcode创建iOS项目工程如：CarrySniperiOS

1.4、关联操作

1.4.1为iOS工程添加CocoaPods依赖，生成Proflie文件

终端指令执行：

cd xxx/carry_sniper/CarrySniperiOS 你的iOS工程项目路径

pod init

1.4.2打开Proflie文件添加、修改内容

主要2段3行代码，注意代码存放位置，和flutter_module名称一致

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

install_all_flutter_pods(flutter_application_path)

配置结果如下：

platform :ios, '11.0'
# 1、Flutter模块加入
flutter_application_path = '../flutter_module'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

target 'CarrySniperiOS' do
  use_frameworks!
  # 2、安装嵌入Flutter模块
  install_all_flutter_pods(flutter_application_path)

  # Pods for CarrySniperiOS

end

1.4.3执行指令，完成Flutter模块的添加和CocoaPods依赖

pod install

执行结果：
要看到Installing Flutter相关依赖的安装，否则运行报错
关闭当前Xcode项目，从此使用CarrySniperiOS.xcworkspac运行工程

/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/universal-darwin19/rbconfig.rb:229: warning: Insecure world writable dir /Users/Macbook/Documents/FlutterSDK/flutter/bin in PATH, mode 040777
Analyzing dependencies
Downloading dependencies
Installing Flutter (1.0.0)
Installing FlutterPluginRegistrant (0.0.1)
Installing flutter_module (0.0.1)
Generating Pods project
Integrating client project

[!] Please close any current Xcode sessions and use `CarrySniperiOS.xcworkspace` for this project from now on.
Pod installation complete! There are 3 dependencies from the Podfile and 3 total pods installed.

1.5、完成基础配置

可以直接打开项目运行，没问题就说明配置成功。部分目录如下：

carry_sniper/
├── CarrySniperiOS/
│   ├── CarrySniperiOS/
│   ├── Pods/
│   ├── Podfile
│   ├── Podfile.lock
│   ├── CarrySniperiOS.xcodeproj
│   └── CarrySniperiOS.xcworkspace
├── flutter_module/
│   ├── .android/
│   ├── .ios/
│   │    ├── Runner.xcworkspace
│   │    └── Flutter/podhelper.rb
│   ├── lib/
│       └── main.dart
│   ├── flutter_module_android.iml
│   ├── flutter_module.iml
│   ├── pubspec.lock
│   ├── test/
│   └── pubspec.yaml

二、原生iOS项目调用Flutter

根据官方Flutter文档，进行简单的原生app调用Flutter，列举2种方法，这里是Objective-C代码，文档有Swift代码。更高级的调用方法可以继续看文档。

2.1方式一：使用FlutterViewController

直接在ViewController.m文件编写代码，运行项目即可：

#import "ViewController.h"
#import <Flutter/Flutter.h>

@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];

    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button addTarget:self action:@selector(showFlutter)
     forControlEvents:UIControlEventTouchUpInside];
    [button setTitle:@"Show Flutter!" forState:UIControlStateNormal];
    button.backgroundColor = UIColor.blueColor;
    button.frame = CGRectMake(80.0, 210.0, 160.0, 40.0);
    [self.view addSubview:button];
}

- (void)showFlutter {
    FlutterViewController *flutterViewController = [[FlutterViewController alloc] initWithProject:nil nibName:nil bundle:nil];
    [self presentViewController:flutterViewController animated:YES completion:nil];
}

@end

2.2、方式二：使用FlutterEngine

2.1.1、依赖FlutterAppDelegate创建一个实体FlutterEngine

AppDelegate.h文件内容：

#import <UIKit/UIKit.h>
#import <Flutter/Flutter.h>

@interface AppDelegate : FlutterAppDelegate

@property (nonatomic,strong) FlutterEngine *flutterEngine;

@end

AppDelegate.m文件内容：

#import "AppDelegate.h"
#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h>

@interface AppDelegate ()
@end

@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    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 [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

2.2.2、使用FlutterEngine调用Flutter页面和传参

ViewController.m文件内容：

#import "ViewController.h"
#import "AppDelegate.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    // Make a button to call the showFlutter function when pressed.
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button addTarget:self action:@selector(showFlutter)
     forControlEvents:UIControlEventTouchUpInside];
    [button setTitle:@"Show 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];
}

@end

2.2.3、运行Xcode中的CarrySniperiOS项目

三、原生iOS项目也能使用热更新、热重载

官方文档：
要先安装homebrew，运行Xcode项目，保证原生App有安装到手机/模拟器上，然后在Android Studio的Flutter项目跟路径执行指令：

flutter attach

如果有多个设备（或者输入下标选择相应设备）:

flutter attach -d xxxxx设备id

如果有多个包名：

那么需要统一Android和iOS的包名后再试一遍

如果出现Waiting for a connection from Flutter on iPhone ...一直等待，

说明原生App没有启动，控制台连接不到设备应用运行。
需要手动到手机/模拟器点击运行App即可(只需运行Android Studio，不需要打开Xcode软件，Xcode会在Flutter下默默运行。当然不打开Xcode，就看不到控制台打印输出，但影响不大)。