Flutter与iOS原生混合开发

一、Flutter工程创建

Flutter有四种工程类型：

• Flutter Application：Flutter应用
  
• Flutter Module :Flutter与原生混合开发
• Flutter Plugin：Flutter插件
• Flutter Package：纯Dart组件
  

原生与混合开发需要创建Flutter Module工程；

1. Android Studio创建方式，Project type选择Module：

2. 命令行创建方式：

flutter create -t module --org com.example 工程名称

二、Xcode工程创建

直接创建Xcode App项目即可（文件夹最好和fluuter module项目文件夹路径保持一致，否则需要修改相对路径）

三、混合开发工程配置

主要是在已有原生iOS工程项目中，集成Flutter功能模块

方式一：

利用Cocoapods导入Flutter项目功能模块（开发者必须配置Flutter开发环境）

1. 初始化Pods

pod init

2. Podfile中新增如下（注意路径问题）

# Uncomment the next line to define a global platform for your project
platform :ios, '11.0'
flutter_application_path = '../fluttermodule'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
target 'NativeOCTest' do
  install_all_flutter_pods(flutter_application_path)
  use_frameworks!
end
post_install do |installer|
  flutter_post_install(installer) if defined?(flutter_post_install)
end

3.打开Xcode工程，使用如下代码调起Flutter页面，运行即可；

#import "ViewController.h"
#import <Flutter/Flutter.h>
@interface ViewController ()
@property(strong, nonatomic) FlutterViewController *flutterVC;
@property(strong, nonatomic) FlutterEngine *flutterEngine;
@end
@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
}
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    [self test];
}
- (void)test {
    self.flutterVC.modalPresentationStyle = UIModalPresentationFullScreen;
    [self presentViewController:self.flutterVC animated:YES completion:nil];
}
- (FlutterEngine *)flutterEngine {
    if (!_flutterEngine) {
        FlutterEngine *engine = [[FlutterEngine alloc] init];
        if (engine.run) {
            _flutterEngine = engine;
        }
    }
    return _flutterEngine;
}
- (FlutterViewController *)flutterVC {
    if (!_flutterVC) {
        _flutterVC = [[FlutterViewController alloc] initWithEngine:self.flutterEngine nibName:nil bundle:nil];
    }
    return _flutterVC;
}
@end

方式二：

利用framework集成到原生工程里面（原生开发工程师无需配置Flutter环境）1. 进入到Flutter module项目工程所在文件夹、执行以下命令：

flutter build ios-framework --output=../flutter_export

2. 在Flutter工程目录下会生成如下文件夹以及framework

3. 打开Xcode工程，选中Targets -> General -> Frameworks，Libraries，and Embedded Content，点击+号，然后点击Add Other -> Add Files，选中添加App.xcframework和Flutter.xcframework 4. 添加上述调起Flutter的代码即可正常运行；

方式三：

利用Cocoapods集成到原生工程里面（原生开发工程师无需配置Flutter环境）

1. 进入到Flutter module项目工程所在文件夹、执行以下命令：

flutter build ios-framework --cocoapods --output=../flutter_export

2. 在Flutter工程目录下会生成如下文件夹以及framework（与方式二的区别是没有了Flutter.xcframework） 3. 原生工程中集成Pods环境

platform :ios, '11.0'
target 'NativeOC' do
  use_frameworks!
  pod 'Flutter', :podspec => '../flutter_export/Debug/Flutter.podspec'
end

4. 打开Xcode工程，选中Targets -> General -> Frameworks，Libraries，and Embedded Content，点击+号，然后点击Add Other -> Add Files，选中添加App.xcframework

5. 添加上述调起Flutter代码即可正常运行；

方式四：

利用git自动化构建CI（原生开发工程师无需配置Flutter环境）

1. 新建git远程代码仓库并把原生代码和Flutter代码上传上去当前文件夹结构： 2. 点击Actions

3. 创建Action

自动化脚本相关代码

name: FlutterAction
on: [push]
jobs:
  check:
    name: Test on ${{ matrix.os }}
    runs-on: macos-latest
    steps:
      - uses: actions/checkout@v3
      - uses: subosito/flutter-action@v2
        with:
          flutter-version: '3.7.6'  
          channel: 'stable'
      - run: cd fluttermodule && flutter build ios-framework --cocoapods --output=../NativeOC/Flutter
      - run: |
         git add .
         git commit -m 'build flutter action framework' 
      - name: Push changes
        uses: ad-m/github-push-action@master
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}

注意仓库的设置，否则会提示没有权限

执行状态

运行成功Actions状态改变 git仓库中出现了一个Flutter文件夹

4. 拉取代码，并配置Pod内容，同方式三，注意路径问题

platform :ios, '11.0'
target 'NativeOC' do
  use_frameworks!
  pod 'Flutter', :podspec => 'Flutter/Debug/Flutter.podspec'
end

目录结构

5. 添加上述调起Flutter的代码即可正常运行，后续只需push代码即可同步更新Flutter内容；