Mac电脑搭建Flutter ios环境以及让Flutter运行在ios设备上

Flutter入门实践成功！
现整理笔记，欢迎尝试使用[呲牙]

零、扫盲
一、 准备工作
二、 下载 Flutter、配置 Flutter 环境变量、配置 Flutter 镜像
三、 运行 flutter doctor 命令检测环境
四、 配置 Flutter Ios 环境
五、 命令行工具生成 Flutter 项目
六、 修改 Flutter Sdk 目录的权限以及项目的权限.
七、 Xcode 打开 flutter 项目 模拟器运行项目
八、 在 Vscode 中配置 开发 Flutter 项目

零、扫盲

Flutter是谷歌公司基于Dart语言开发的一款开源、免费的移动UI框架，可以让我们快速的在Android和Ios上构建高质量App，它最大的特点就是跨平台、以及高性能。它针对的开发者是全部开发者，它的性能相比RN、Ionic这样的框架要好一些。

Flutter 基于谷歌的 Dart 语言，如果没有任何 Dart 语言的基础，不建议直接学习 Flutter。建议先学习 Dart 语言的基本语法。然后再进入 Flutter 的学习。

一、准备工作

1. 升级 Macos 系统为最新系统
2. 安装最新的 Xcode
3. 电脑上面需要安装 brew https://brew.sh/

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

1、下载 Flutter SDK

2、安装Flutter Sdk 的目录

把下载好的 Flutter SDK 随便解压到你想安装 Sdk 的目录,这里我安装的是：/Users/zhangli/Documents/Flutter_mac/flutter

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

在终端输入以下命令进行编辑文件

vim ~/.bash_profile

查看是否有以下配置环境变量，没有的话按键盘字母i进行编辑。

// 路径要使用你上面放置Sdk的目录路径
export PATH=/Users/zhangli/Documents/Flutter_mac/flutter/bin:$PATH

路径是根据你放置下载文件的路径来写的，所以自己要清楚路径才行。如果不能使用梯子的还需要在环境变量里配置一下Pub源，不然无法使用，可以直接接着下面增加两行配置

export PUB_HOSTED_URL=https://pub.flutter-io.cn

export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

编辑完成后，按esc,接着输入：wq进行保存文件退出。

查看编辑成功后，可按esc,接着输入：q直接退出。

或者使用该命令打开直接修改编辑。

open ~/.bash_profile

输入以下命令使其配置环境变量更新成功

source ~/.bash_profile

flutter -h （获取帮助信息）如果能出来一些命令说明 flutter sdk 配置成功。

注意如果配置完成后输入 flutter -h 告诉你 flutter 不是内置命令之类的错误的话，可能 sdk没有配置成功，也可能 sdk 下载的时候没有下载全

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

第一次运行 flutter doctor 的时候会提示下面错误

✗ libimobiledevice and ideviceinstaller are not installed. To install with Brew, run:
brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice brew install ideviceinstaller
✗ ios-deploy not installed. To install: brew install ios-deploy
✗ CocoaPods not installed.
CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
For more info, see https://flutter.dev/platform-plugins
To install:
brew install cocoapods pod setup

四、 配置 Flutter Ios 环境

我这里之前学习Dart基础语言时，已经安装过brew，如果我们已经安装过brew的话，运行: flutter doctor 如果出来下图表示 ios 的环境配置完成
[图片上传失败...(image-8d37d0-1584612652365)]

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
brew install ios-deploy
brew install cocoapods
pod setup

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

注意:如果运行命令失败请运行brew doctor 并按照说明解决问题。

执行完成上面命令后然后重新运行: flutter doctor 如果出来下图表示 ios 的环境配置完成

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

sudo flutter create flutterdemo

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

// 777表示设置可读可写可执行 *代表所以文件
sudo chmod -R 777 *
sudo chmod -R 777 flutter_app01

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

注意:打开项目之前一定要修改权限

运行flutter run时，如若提醒未支持设备连接，要手动连接手机，或者打开Xcode里的模拟器就解决了。
此时再输入flutter doctor命令时，则会显示你所连接设备成功[✓] Connected device
如下图所示：

八、在 Vscode 中配置 开发 Flutter 项目

1、Vscode 中安装 Flutter 插件 和 Dart 插件。

2、Vscode 中打开 flutter 项目进行开发

选择文件File-->Open··选择你的项目

3、运行 Flutter 项目

flutter run

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