近日在看Google的Flutter，打算尝试一下混合开发，下面我们就看一下在原生的iOS项目中是怎样集成Flutter的。

Flutter安装及环境配置

Flutter SDK下载

  首先我们先去官网把Flutter的SDK下载下来,这里也有详细的教程，感兴趣的同学可以去看一下。

Flutter配置环境

  下载下来SDK以后我们可以把它解压到我们需要安装的文件夹中（因为压缩包是Zip格式的，所以可以直接双击解压），当然我们也可以按照官方所说的进行解压（个人觉得有点繁琐），下面是官方给出的解压方式：

cd ~/development  
unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip

注：development为你要要安装的目录
解压完以后我们需要配置相关环境

 export PATH=`pwd`/flutter/bin:$PATH

注：pwd为你上面的安装目录“~/development”，路径不对，下面的执行是不通过的
当然你也可以直接编辑.bash_profile文件：

open ~/.bash_profile

执行上面的语句可以直接在文本编辑器中打开.bash_profile文件，打开.bash_profile文件后将下面语句添加到最下面即可：

 export PATH=`pwd`/flutter/bin:$PATH  

注：pwd为你上面的安装目录“~/development”
然后保存并关闭，不管你用第一种方法还是第二种方法，最后都要运行以下命令进行更新：

source ~/.bash_profile

更新完以后我们再执行以下语句检验：

flutter doctor

Flutter检验配置环境
由于我做的是iOS开发，电脑上本身就安装了Xcode,所以在这就不介绍Xcode的安装了，没有安装的同学可以去App Store进行下载安装。上图中我们看到，前面有小绿色箭头的为配置成功，有红色叉号的我们可以根据提示进行相关配置。我们在初次安装Flutter是会提示让我们去更新brew，我们只要把iOS下面关于brew的语句挨个执行一遍即可。

将Flutter集成到已有的iOS项目中

创建Flutter项目

现在我们的环境配置好了，下面就是集成到已有的iOS项目中去了。
假设我们现在已有的工程为FlutterTest，下面我们创建Flutter：

flutter create -t module my_flutter

注：my_flutter的创建路径应和工程FlutterTest为平级状态，而不是在工程FlutterTest下面创建。

创建好后我们可以看到我们的目录下面多了一个名为my_flutter的文件夹，里面的目录结构为：

my_flutter的目录结构

导入到现有iOS工程项目

下面我们用CocoaPods将my_flutter导入到项目中，没用过或者没安装过CocoaPods可以看这里查看安装。
打开我们的Podfile文件，将以下代码拷贝到Podfile的最下方即可，

flutter_application_path = '../my_flutter'
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)
//my_flutter为我们上面创建的`Flutter`项目

具体如图所示：

Podfile

然后我们执行

pod install

我们就会看到我们的项目中多了一些目录：

工程目录

以上我们的Flutter就导入成功了。

项目工程配置

关闭Bitcode

Flutter导入成功后，接下来就是我们的项目配置了，由于目前Flutter混合开发还不支持bit code，所以在iOS工程里关闭：

关闭Bitcode

添加配置执行Flutter脚本

上面关闭Bitcode后我们再添加脚本：

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build

首先选中你的target项目，然后添加Run Script，将上面脚本拷贝到里面即可

脚本配置

配置好后你就可以build一下你的工程了，Build Successed...OK，已经可以跑了，现在你就可以进行混合开发了。

代码测试

我们可以进行测试一下：

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

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button addTarget:self action:@selector(clickAction:) forControlEvents:UIControlEventTouchUpInside];
    [button setTitle:@"Click" forState:UIControlStateNormal];
    [button setBackgroundColor:[UIColor blueColor]];
    button.frame = CGRectMake(80.0, 210.0, 100, 100);
    [self.view addSubview:button];

}
- (void)clickAction:(UIButton *)sender {
    FlutterViewController* flutterViewController = [[FlutterViewController alloc] init];
    flutterViewController.view.frame = [UIScreen mainScreen].bounds;
    [self presentViewController:flutterViewController animated:NO completion:nil];
}

@end

小结

  由于我们使用Flutter会涉及到多人混合开发，因此我们在集成的时候选择的是用CocoaPods的方式进行集成，而并没有直接将Flutter项目添加到工程中，这样有利于我们后期的开发和维护。
  这次的Flutter集成开发就到这里，小伙伴们赶紧去尝试一下混合开发吧。还有哦，Xcode并不支持开发Flutter，因此我们还需要下载专门的开发工具，具体的开发工具我们可以到这里去查看并使用。

参考：
Flutter中文网