![5979ca1ae469cbf594a9bd9118291cf6.png](https://i-blog.csdnimg.cn/blog_migrate/2b1193c23c830001d348db8544e228da.jpeg)
前置准备:
- 一台不是太卡的Mac电脑:因为有可能要运行XCode,一个编辑器,有可能还有Android Studio,都特么很占内存
- 一个好用命令行工具,推荐iTerm2
- brew基础知识:因为要基于brew安装
- 科学上网:有的包或者服务都在他乡,你懂的,所以科学上网是王道
- 安装好XCode
- 安装好Android Studio
- 安装好VS Code
下载Flutter SDK包
打开官网:https://flutter.io/setup-macos/ 关于下载解压相关的文档说的很明白了
![d52014b152ea52426dac8bfcbfcebaf7.png](https://i-blog.csdnimg.cn/blog_migrate/03700e532713fdd050a70398e59f3768.jpeg)
点击下载,然后切换到你的工程目录(或者sdk存放目录),执行命令进行解压,上述命令如下(以我的真实目录为例):
cd $HOME/work/flutter_pro/flutter //你的sdk存放目录
unzip ~/Downloads/flutter_macos_v1.7.8+hotfix.4-stable.zip //你的下载sdk目录
配置环境变量
划重点:有的同学会看了别人的教程配了环境变量之后,在切换一个终端的窗口之后,提示
flutter doctor command not found
其实是你本地有两份配置文件,你只配置了一个,全局的没有生效,分别打开 ~/.zshrc和~/.bash_profile分别输入如下内容(vi命令自行百度)
export PATH=$HOME/work/flutter_pro/flutter/bin:$PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
保存后分别进行重新加载:
source ~/.bash_profile
source ~/.zshrc
完成这部以后,sdk的安装工作就算完成了,我们使用命令检测一下,看是否生效,执行
flutter -h
如果看到如下信息,说明成功
![fcec376e9598922915146b5b6af6993d.png](https://i-blog.csdnimg.cn/blog_migrate/3123fd43116de78d82c167decabb9a44.jpeg)
检查开发环境
到上边为止,我们安装好了Flutter,但是还不具备开发环境。开发还需要很多软件和插件的支持,那到底需要哪些插件和软件那?我们可以使用Flutter为我们提供的命令来进行检查:
flutter doctor
每个人的环境不同,可能检测的结果也不一致,不过大部分会如下:
![add3786bec5f4916fa921dff13ed2e5a.png](https://i-blog.csdnimg.cn/blog_migrate/12b08b2a43e9216a6a47f8d6c6b480c1.jpeg)
注意,划红框的部分(iOS tools)是我安装的时候遇到最多问题的地方,一会再说。使用flutter doctor好处是哪些需要做的都已经告诉你了,你只需按提示做下去就行了
首先解决android-licenses
在终端运行如下命令:
flutter doctor --android-licenses
然后让你输入Y/N的时候,一路Y就可以了。
其次解决iOS tools问题
![c9fa2f3db7b5c68e72585c360508f029.png](https://i-blog.csdnimg.cn/blog_migrate/93fe107b57c6730fef650477d7d2d3e3.jpeg)
按照命令是要依次执行如下命令的
brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
但是,我这电脑死活装不了,总是提示这个错误:
![b2372e3a045d55350034230d9af982a6.png](https://i-blog.csdnimg.cn/blog_migrate/4554bd3854c563000d90eef18dc597f4.jpeg)
google了很多,最终确定可能是本地的依赖有问题,执行如下命令清理依赖
rm -rf /usr/local/include/*
然后再执行
brew install --HEAD usbmuxd
就成功了
![d927d0c9da488da9c003455c556d7eee.png](https://i-blog.csdnimg.cn/blog_migrate/2da6a92ce77ab750ba37004b62d479da.jpeg)
如果提示
版本差异或者需要重新安装,请执行
brew reinstall usbmuxd
总之,跟着提示就行了,全部执行之后,iOS tools - develop for iOS devices前边的[!]才会变成[✓]
然后安装Android Studio开发所需要的插件
flutter
![ed24d00c30d33cf76b80314331e67ecb.png](https://i-blog.csdnimg.cn/blog_migrate/0f557d469d18b09fcbc8baa51ebe512d.jpeg)
dart
![v2-fd9b2b1eb32b5ef68917d0114e42dc09_b.jpg](http://img-01.proxy.5ce.com/view/image?&type=2&guid=3f01c45b-882e-eb11-8da9-e4434bdf6706&url=https://pic2.zhimg.com/v2-fd9b2b1eb32b5ef68917d0114e42dc09_b.jpg)
安装完成之后会提示重启,重启之后最大的区别就是可以创建基于Flutter的项目了:
![1d918f81f9d138ef41ee009693e9477c.png](https://i-blog.csdnimg.cn/blog_migrate/27620d0dc667ce56fcb164ba0bd53d69.jpeg)
这时候终端里Android Studio前边也已经显示完成
![5a04f795a60f8a773bef7c55d0507583.png](https://i-blog.csdnimg.cn/blog_migrate/205ee993d45f56e8afd878e3a03feab5.png)
继续安装VS Code插件
![594f21c8b649788f3dd87e073f95c7cd.png](https://i-blog.csdnimg.cn/blog_migrate/54ac0a242b0c865b1ae87b24ac0523fa.jpeg)
完成之后重启,就生效了,至此全部需要的依赖项都已安装完成
![a50aef5cc9d0f316537ecd23e26e40fd.png](https://i-blog.csdnimg.cn/blog_migrate/243e043d53538446868572df464501fb.jpeg)
最后一个Connected device是检测你是否连接了调试设备,你现在没连接,肯定检测不到,暂时忽略。
至此大功告成, Flutter的环境配置相对来说和RN有的一拼,都有点复杂,其中XCode和Android Studio的配置和RN类似,可以参考我之前文章 《在Mac系统上完成RN开发环境的搭建》
环境搭建完了,我们下一篇,让Flutter跑起来,敬请期待!