Flutter 开发（1）iOS 下超详细集成 Flutter

iOS 客户端接入 Flutter 实践

官方混编文档

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

背景

本篇文章是系列文章，会涉及到Flutter初步了解，Flutter组件化混编方案，Flutter实战开发，Flutter Native 交互等系列文章。
本篇主要是整理了目前如何集成Flutter的步骤和实践，还属于很初级的阶段，让大家了解下什么是Flutter，Flutter是如何集成的。

一、介绍

Flutter是一款移动应用程序SDK，一份代码可以同时生成iOS和Android两个高性能、高保真的应用程序。

Flutter目标是使开发人员能够交付在不同平台上都感觉自然流畅的高性能应用程序。

目前使用Flutter的APP并不算很多，相关资料并不丰富，介绍现有工程引入Flutter的相关文章也比较少。

Flutter架构

二、搭建 Flutter-iOS 开发环境

1. 获取 Flutter 工程

克隆 Flutter 到本地

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

2. 配置 Flutter 环境变量

（1）说明

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

（2）添加环境变量（确保路径指向没问题）

执行命令 open ~/.bash_profile 在底部添加环境变量。

然后生效环境变量，终端执行 source ~/.bash_profile

（3）注意

如果你使用的是zsh，终端启动时 ~/.bash_profile 将不会被加载，解决办法就是修改 ~/.zshrc ，在其中添加：source ~/.bash_profile，执行命令 open ～/.zshrc，底部添加如下：

3. 配置基本环境依赖

4. flutter doctor 检测本机环境

1. 说明

因为flutter依赖的东西比较多，如果我们想要保证flutter环境没问题，需要执行 flutter doctor 检测确保当前环境。
在终端中执行 flutter doctor 命令，如下图：

2. flutter doctor 检查失败原因

flutter doctor 检测失败的原因会有很多，例如以下

没有安装 Android Studio。 Android Studio 配置有问题。 Android Studio 没有安装Flutter插件。没有安装Xcode，或Xcode版本过低。没有安装CocoaPods 没有安装 libimobiledevice 没有安装 ideviceinstaller 没有安装 ios-deploy

一步一步按照提示进行修复问题

安装或修改需要的地方，直到 flutter doctor 没有错误提示为止。

3. 安卓SDK相关环境变量设置

这是作者本机的环境变量，如果遇到问题，可对比一下区别。

三、iOS现有项目接入flutter

（1）说明

Flutter的工程结构比较特殊，由Flutter目录再分别包含Native工程的目录（即 iOS 和Android 两个目录）组成。
默认情况下，引入了 Flutter 的 Native 工程无法脱离父目录进行独立构建和运行，因为它会反向依赖于 Flutter 相关的库和资源。
如果已经现有工程，那么我们需要在同级目录创建flutter模块。

（2）创建Flutter模块

假设当前工程是 Flutter_iOS ，那么 cd到项目同级目录，执行flutter命令创建。

（3）创建iOS项目的 Config 文件

Config文件（管理Xcode工程的配置衔接文件）里面包含分别创建 Flutter.xcconfig、Debug.xcconfig、Release.xcconfig 三个配置文件。
其中Flutter.xcconfig是指向外目录flutter module的Generated.xcconfig文件路径引用文件，其他两个代表Xcode的环境配置文件。