mac + item2 配置flutter

简介

flutter是谷歌基于dart 推出的一款开源的开发移动应用的框架，性能比起native 也不遑多让。用起来也很有自己的特色。但开发flutter 需要在本地配置一些环境变量和下载sdk。在配置的过程中即便按照文档来也是有诸多小坑，所以这篇文章记录下再用 mac item2配置 flutter的时踩过的一些坑。

准备

Xcode用于开发ios的模拟器，以及打包ios应用，可在 app store 上下载最新版(如果开发安卓就需要 andrioid studio)
hoembrew： mac上非常好用的一个包管理工具详情见: https://brew.sh/
或者直接打开终端运行
```
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```
vscode：写代码的编译器，并下载 flutter 和 awesome flutter snippers 增加开发幸福指数。
~~4. Flutter SDK 下载这个sdk，国外的速度由于众所周知的原因速度很慢，建议在github上下载：[https://github.com/flutter/flutter/releases]~~
上述是中文文档中的步骤，不过会出现 "遇到坑"中的第一个问题，原因是这么做下载的zip包中少了git 信息，所以建议直接cd到希望存储的文件夹，然后直接使用git clone 的方式直接下载master分支上的代码即可。即：
```
git clone -b stable https://github.com/flutter/flutter.git
```
这样就可规避下面所提到的第一个坑
配置环境变量, 因为现在大部分开发者用的都是 item2，所以环境变量的配置在根目录下的 .zshrc, 可以使用vim 编辑，也可以直接打开文本编辑都一样即
```
	open ~/.zshrc
```
打开之后在文末追加如下配置
```
export PATH=/${sdkPath}/bin:$PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
```
其中 ${sdkPath}是你再第四步下载好sdk之后解压到mac上的某文件夹下的绝对路径比如我自己是的在如下如路径，那就将下面的路径替换$ {sdkPath}即可
这里说下如何获取当前路径的两种方式，
1. 一种是打开终端，直接把文件夹拖进来即可显示当前文件夹在mac上的绝对路径。
2. 另一种是在终端已近进来了那就直接敲一下 pwd 这个命令也可查看当前路径
  如下图：
  
  如果不是使用item2的同学那可以直接配置在 .bash_profile 文件中。
  顺别说下，配置好之后需要重新开起下item2的终端，如果是配置的 .bash_profile的话那就
```
	source ~/.bash_profile
```
  上述命令运行一下。以便新配置生效

遇到的坑

文档之所以是文档，就是你会神奇的发现，自己明明是按照文档一步步来的，可总会遇到一些莫名其妙的问题，而这些问题大部分文档是没有说明的，下面罗列了一下我在配置过程中是遇到哪些问题，以及是如何解决的

检测flutter sdk

sdk下载并解压好了，环境变量也配置了, 这时候再终端中跑一下
flutter doctor
检测一下结果发现报了如下错误:
在这里插入图片描述
解决方式是 cd 到刚刚解压flutter sdk 文件夹下我是把刚刚解压的文件都删除了，然后重新clone一下flutter sdk 的地址。这样本地多了个 .git的文件夹，包含了git 信息，就不会报这个错误。或者在上述第四步中直接使用 git 的方式也可以规避这个问题

处理完这个问题之后再运行一下 flutter doctor 检测一下，如果发现还需要有什么依赖的包会去下载如下图：
在这里插入图片描述
所需依赖下载完之后会出现如下界面

因为这里我只下载了 ios开发所需要的 Xcode，安卓的没有配置，所以报了一些安卓有关的错误，如果有需要可以下载 android studio 并配置一下，这里就以 ios Xcode举例了
如果都配置好了没问题可以运行下 flutter help 如果出现一些命令提示就说明 flutter sdk是配置好了，如下：
在这里插入图片描述

配置 flutter ios 的环境

如果希望flutter应用可以在 ios真机上运行，那就需要一些额外的工具，和一个apple的账户，依次执行下面的这些命令

brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

如果这些命令中的任何一个失败并出现错误，请运行brew doctor并按照说明解决问题.

如果只是在开发阶段不需要连接真机的话，也可以先跳过这个步骤，可以直接使用 Xcode上的模拟器来开发

open -a Simulator

上述命令可以直接打开Xcode上的模拟器

使用脚手架创建第一个 flutter 应用

使用 flutter create 脚手架命令来创建第一个应用，如下

sudo flutter create flutter_glaxy

在这里插入图片描述
这个时候先不要 flutter run 不然的话会报权限错误，如下图，因为在启动的时候会在该应用下读写一些文件，需要相应的权限

解决的办法是给刚刚创建好的 flutter 文件夹赋予权限，同时也最好给上述第四步 flutter sdk 所在的文件夹赋予相应的权限
主要是这一条命令

sudo chmod -R 777 *

sudo 是使用管理员权限， chmod 是关键字、 -R 表递归文件、*表匹配所有文件/文件夹
在这里插入图片描述
解决这个权限问题之后打开应用根目录下的ios/Runner.xcodeproj 文件，会自动调用Xcode打开这个flutter这个时候先选好模拟器然后 build 一下整个工程,

build success 之后会自动用所选的模拟器打开flutter 项目，如下图：
在这里插入图片描述
当然这里我是对文件做了一些修改。

切换 vscode 开发应用

使用Xcode build 完之后可以使用vscode 打开我们的项目代码，这时候注意一下在 vscode 的右下角有没有一个 ios 模拟器的名称，如下图：
在这里插入图片描述
如果有的话可以就表示模拟器和当期的vscode 连接到一起了，那我们就可以关掉Xcode直接在vscode中使用 flutter run 命令调用模拟器运行我们的代码了。
如果在开发过程中需要热更新的话可以在终端出输入R 这个页面就可以被 reload 了。