Flutter 专题02 图解 Mac 环境下安装配置环境 #yyds干货盘点#

Posted 2021-11-21 阿策小和尚

      小菜前两天整理了一篇 Flutter 01:图解 Windows 环境下安装配置环境，今天整理一下在 Mac 环境下安装配置 Flutter。实际操作一边之后才会觉得，环境配置是最基础的，用心注意一下还是很容易解决的。
      参考资料：Flutter 中文网

系统环境

1. Flutter 建议 Mac 环境在 64 位 macOS (64-bit)；
2. 磁盘空间要超过 700M，但不包括 Xcode 和 android Studio 的空间；
3. 电脑已安装 Git；

   安装图解

4. 终端 -> git clone -b beta https://github.com/flutter/flutter.git，如图：

2. 正常情况下会 clone 成功，但小菜电脑没有装 XCode，提示如下：

   xcrun: error: invalid active developer path (/Library/Developer/
   CommandLineTools), missing xcrun at: /Library/Developer/
   CommandLineTools/usr/bin/xcrun

3. 已安装好 XCode 的请跳过此步骤，安装 XCode，终端 -> xcode-select --install，大概 2-3 分钟安装成功，如图：

4. 在国内同样需要添加 PUB_HOSTED_URL 和 FLUTTER_STORAGE_BASE_URL，并设置 PATH 将 Flutter 添加到路径中，如下：

   
   export PUB_HOSTED_URL=https://pub.flutter-io.cn
   export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
   export PATH=`pwd`/flutter/bin:$PATH

export PATH=$HOME/flutter/bin:$PATH
echo $PATH

      **Tips:** 每台计算机上的文件路径和文件名可能不同，所以要添加 ```export PATH=$HOME/flutter/bin:$PATH```，并刷新当前窗口。

![配置 PATH](https://s4.51cto.com/images/blog/202111/07112249_6187468957f4197493.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)

5. 终端中 -> **Flutter doctor**，之后便一切顺利，如图：

![](https://s4.51cto.com/images/blog/202111/07112249_618746891947329409.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)

![](https://s4.51cto.com/images/blog/202111/07112250_6187468a05dc720814.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)

      至此，**Flutter** 环境安装配置成功，这样结合上一篇博客，**Windows** 和 **Mac** 环境都搭建好了，万里长征第一步算是完成了，接下来就该多多尝试和研究了！
***
      **Tips:** 如果想要查询 Mac 中 Git 路径，可终端 -> **which git**，如图：

![git 路径](https://s4.51cto.com/images/blog/202111/07112249_61874689baee528912.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)

***

> 来源：阿策小和尚