iOS中集成flutter和趟坑小结

官方混编文档

https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps#ios

目录

  • Flutter架构
  • 配置Flutter开发环境(Mac 为例)
  • iOS现有项目接入flutter
  • flutter切换依赖的iOS工程

一、Flutter架构

iOS中集成flutter和趟坑小结_第1张图片
790890-8cc7de95aa2763b4.png

二、配置Flutter开发环境

1. 获取 Flutter 工程

我们可以将Flutter克隆到本地

  • sudo git clone -b beta https://github.com/flutter/flutter.git $HOME/flutter

2. 在bash_profile文件中配置 Flutter 环境变量

由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,可以把镜像地址添加到环境变量中,为了方便后续使用,需要将项目根目录下bin路径加入环境变量PATH中,打开~/.bash_profile文件,修改环境变量即可

  • 如果已有bash_profile则 执行命令 open -e ~/.bash_profile 在底部添加环境变量,如无bash_profile 则执行命令touch ~/.bash_profile添加环境变量
export ANDROID_HOME=/Users/wsh/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
export PUB_HOSTED_URL=https://pub.flutter-io.cn 
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn 
export PATH=/Users/wsh/flutter/bin:$PATH
  • 然后生效环境变量,终端 执行 source ~/.bash_profile

3. flutter doctor 检测本机环境

因为flutter依赖的东西比较多,如果我们想要保证flutter环境没问题,需要执行 flutter doctor 检测确保当前环境。
在终端中执行 flutter doctor 命令,查看有哪些没安装成功的,最好按照提示安装成功

三、iOS现有项目接入flutter

1.创建Flutter模块

  • cd到项目同级目录,执行flutter命令创建
cd /Users/wsh/Desktop/youpin
flutter create -t module flutter_library

2.设置 Flutter 的脚本

  • 点击project--->target--->build phases,点击+增加Run Script 项,并添加下面两行脚本命令
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed

3.在info.plist添加配置

添加io.flutter.embedded_views_preview为YES

4.我们用cocopods集成了flutter

  • 在Podfile最后面添加下面这段
flutter_application_path = '../BI_Client_Flutter'
eval(File.read(File.join(flutter_application_path, 'Flutter_ios', 'podhelper.rb')), binding)
  • 上面这个路径少了一个子路径 .ios ,这个是因为后面flutter项目中我们依赖的iOS工程换成了我们自己现有的
    iOS中集成flutter和趟坑小结_第2张图片
    系统默认的路径.png
iOS中集成flutter和趟坑小结_第3张图片
我们定义的路径.png
  • 这个podhelper.rb也改了路径,如下图改成了下下图的样子:
iOS中集成flutter和趟坑小结_第4张图片
屏幕快照 2019-05-31 下午3.42.59.png
iOS中集成flutter和趟坑小结_第5张图片
屏幕快照 2019-05-31 下午3.42.46.png
  • 注意上面的Generated.xcconfig其实是.ios/Flutter目录下Generated.xcconfig的替身,这是因为这个文件是系统生成的,如果自己生成里面的路径是绝对的

  • 后续改造在第四部分继续

5.给flutter工程一个原生的容器

  • 我创建了一个继承FlutterViewController的容器
#import 
#import 

@interface ViewController : FlutterViewController
@end
@interface ViewController ()
@property (nonatomic, strong) UIButton *loginBtn;
@property (nonatomic, strong) FlutterEngine *flutterEngine;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    [GeneratedPluginRegistrant registerWithRegistry:[self pluginRegistry]];
    
    __weak __typeof(self) weakSelf = self;
    // 要与main.dart中一致
    NSString *channelName = @"com.123";
    FlutterMethodChannel *messageChannel = [FlutterMethodChannel methodChannelWithName:channelName binaryMessenger:self];
    [messageChannel setMethodCallHandler:^(FlutterMethodCall* _Nonnull call, FlutterResult  _Nonnull result) {
        // call.method 获取 flutter 给回到的方法名,要匹配到 channelName 对应的多个 发送方法名,一般需要判断区分
        // call.arguments 获取到 flutter 给到的参数,(比如跳转到另一个页面所需要参数)
        // result 是给flutter的回调, 该回调只能使用一次
        NSLog(@"flutter 给到我:\nmethod=%@ \narguments = %@",call.method,call.arguments);
        
        if([call.method isEqualToString:@"iOSFlutter"]) {
            UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"flutter回调" message:[NSString stringWithFormat:@"%@",call.arguments] delegate:self cancelButtonTitle:@"确定"otherButtonTitles:nil];
            [alertView show];
            // 回调给flutter
            if (result) {
                result(@1000);
            }
        } else {
            result(FlutterMethodNotImplemented);
        }
    }];
}

@end
  • 这个 [GeneratedPluginRegistrant registerWithRegistry:[self pluginRegistry]]; 我们遇到过坑
* 1.我们引入 flutter_webview_plugin,其实我们需要注册plugins.flutter.io/webview,我们需要创建GeneratedPluginRegistrant,并在里面注册,不然一直报错

6.工程的名字需要修改成Runner,不然会报错

7.打包编译的时候可能

iOS Archive-> Could not find an option named "track-widget-creation"

需要我们在flutter的根目录下执行 flutter build ios

四、Flutter切换依赖的iOS工程

  • 如果我们想在flutter中flutter run运行项目,我们将我们自己iOS工程制作了替身放到了flutter工程目录下以此替换.ios目录下的iOS工程


    iOS中集成flutter和趟坑小结_第6张图片
    屏幕快照 2019-05-31 下午3.48.23.png

你可能感兴趣的:(iOS中集成flutter和趟坑小结)