Mac环境下 搭建 Flutter iOS环境以及让 Flutter 运行在 iOS设备上（超详细）

一、准备工作

1、升级 Macos 系统为最新系统
2、安装最新的 Xcode
3、电脑上面需要安装 brew https://brew.sh/（也可以用另外的一个源，安装方式在我的里有写，安装比较快）

二、下载 Flutter、配置 Flutter 环境变量、配 置 Flutter 镜像

1、下载 Flutter SDK
https://flutter.cn/docs/get-started/install/macos

2、把下载好的 Flutter SDK复制到你想安装 SDK的目录下：如
/Users/admin/flutter_mac/flutter

image.png

备注：电脑上直接下载下来就是解压过的，因此直接将下载的包复制过来即可（flutter_mac是自己又建了个文件夹。）

3、把 Flutter 安装目录的 bin 目录配置到环境变量，然后把 Flutter 国内镜像也配置到环境 变量里面

• 3.1打开终端，直接输入

vim ~/.bash_profile

• 3.2然后进入编辑模式，发现无法编辑，然后直接直接键盘输入i，进入编辑模式。

export PATH=/Users/admin/flutter_mac/flutter/bin:$PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

备注：第一条路径需要根据自己的环境配置，如果不知道怎么配置，就直接将flutter这个文件夹拖拽到终端，就可以显示路径。

• 3.3编辑完毕后，键盘esc，然后shift+:,回车，输入wq，就可以保存退出了。然后

source ~/.bash_profile 

以上操作完成之后，初步完成。另外需要检查一下是否安装成功。命令如下：

flutter -h

安装成功.png

三、运行 flutter doctor 命令检测环境

有的设备第一次运行 flutter doctor 的时候会提示下面错误，就进入四进行安装

出错结果.png

我的运行之后是下图：

image.png

我安装了VSCode，提醒我安装一个东西，将提示的地址复制到浏览器，会有一个install按钮，点击之后自动跳转到VSCode安装。

四、 配置 Flutter iOS环境

1、如果电脑上面没有安装 brew 的话首先第一步需要安装 brew
https://brew.sh/

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2、分别执行下面命令

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer 
brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice 
brew install ideviceinstaller ios-deploy cocoapods
pod setup

执行完成上面命令后然后重新运行: flutter doctor 如果出来下图表示 ios 的环境配置完成。（我还未安装安卓的环境，因为会有部分错误）

成功.png

五、命令行工具生成 Flutter 项目

进入自己的代码目录下，命令行创建项目

sudo flutter create flutterdemo

image.png

注意：上述代码现在是默认创建的swift项目了，如果需要创建oc代码，需要使用 flutter create -i objc 项目名

六、修改 Flutter Sdk 目录的权限以及项目的 权限

先cd到项目的文件夹，然后

sudo chmod -R 777 flutterdemo

顺便再修改一下flutter SDK的权限。

七、Xcode 打开 flutter 项目 模拟器运行项目

可以双击运行了.png

8.在 Vscode 中配置 开发 Flutter 项目

1、Vscode 中安装 Flutter 插件 Dart 插件。
2、Vscode 中打开 flutter 项目进行开发。

在这里进行搜索安装.png

image.png

等一会就可以运行成功了。

r 键：点击后热加载，也就算是重新加载吧。
p 键：显示网格，这个可以很好的掌握布局情况，工作中很有用。
o 键：切换 android 和 ios 的预览模式。
q 键：退出调试预览模式。