Flutter在MAC安装实践

背景介绍

一直做iOS的，最近Flutter比较火，团队也决定尝试，所以就开始看相关文档。相对来说，移动开发还是用Mac好一点，Windows确实有点跟不上时代了。所以，这里只尝试Mac相关的部分。

• Xcode已经安装，目前一直是iOS原生开发，动态部分就用H5，传统的“混合开发”模式
• Android Studio也已经安装了，虽然没有实际做，不过也开始了解了。
• git相关的工具也已经安装了，毕竟是目前最好用的版本控制工具，实际工作中要用到。
• VS Code也已经安装，看到H5团队都用这个，就顺手装了一个。
• Android Studio和VS Code的flutter插件，很简单，直接搜名字就能找到。

使用Git安装

官网有专门的下载页面Flutter SDK releases
Mac部分使用git克隆，在最后面

image.png

下载Flutter

flutter在GitHub上，还是可以正常访问和下载的。
打开终端工具，输入克隆地址，就开始下载

git clone -b master https://github.com/flutter/flutter.git

如果不切换目录，就会在/user/xxx/下面创建flutter目录，这是用户根目录。
内容有点多，需要一些时间下载，要多等一会儿。

image.png

下载完后可以看到目录下的相关文件：

image.png

安装Dart

Dart在谷歌官网上，国内不能访问，需要配置镜像。
在终端输入命令，就可以安装。

./flutter/bin/flutter --version

但是由于网络不通，会得到以下提示。

image.png

提示的镜像页面

配置镜像：

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

image.png

配置完镜像之后，再输入命令./flutter/bin/flutter --version，就正常了。

image.png

配置环境变量

要使用flutter命令，需要先配置环境变量。在用户目录下，新建一个名叫.bash_profile的隐藏文件。

• 获取HOME目录的地址:

cd ~
pwd

• 显示隐藏文件快捷键：command + shift + .

image.png

• 用编辑器，比如sublime text打开，并添加如下内容并保存：

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn 
export PATH=[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin:$PATH

注意： [PATH_TO_FLUTTER_GIT_DIRECTORY]是flutter的目录地址

image.png

环境检查

打开终端，可以使用如下flutter命令检查环境是否安装正确。

flutter doctor

如果有问题，会有一个小的感叹号，按照提示修改就可以了。

image.png

有些问题不管其实是没问题的，比如VS Code的Flutter插件不装等等，关系不大。当然，能弄成全部是绿色的勾那就更好了。

image.png

小结

上面是实际的实践过程。总结一下，感觉顺序需要稍微变一下。

step1 配置环境变量

1. 通过Find的前往，切换到用户Home目录。如果不知道Home`目录的具体位置，可以打开一个终端，输入以下命令得到。

cd ~/
pwd

2. • 显示隐藏文件快捷键：command + shift + .；如果环境配置文件.bash_profile已经存在，那么打开，如果不存在，就新建一个。vim和Mac自带的记事本都不好用，还是像sublime text这样的工具好用。

3. 添加镜像，国内访问谷歌有困难，所以要改为访问镜像。所以，要在环境配置文件.bash_profile中添加如下两句：

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

4. 配置flutter的PATH。从gitHub下载下来的flutter的bin目录下有个名字叫flutter可执行文件。需要为它配置PATH参数，那么就可以在打开的终端中使用flutter开头的命令了。

image.png

在环境配置文件.bash_profile中添加下面这句：

export PATH=/Users/zxs/flutter/bin:$PATH

这里的/Users/zxs是用户Home目录，建议直接将flutter直接放在用户Home目录下。当然也可以放其他地方，只是这里的目录要对应。

保存完后，再次按快捷键：command + shift + .；隐藏文件。

Step2 从GitHub下载Flutter

打开终端，输入以下命令就可以了。当然git工具要提前安装好。

git clone -b master https://github.com/flutter/flutter.git

因为已经配置了镜像，所以应该能够正常下载，终端会有信息反馈，稍微等一会就可以了。

Step3 升级

这样clone过来的flutter有可能不是最新的，终端窗口会有提示。升级命令也会在终端提示出来

flutter upgrade

像Dart SDK之类flutter命令所需要的组件，它自己就会先下载，不需要操心。另外，镜像已经配置过，应该能够正常下载和升级。

Step4 环境检查

在打开的终端中输入以下命令就可以了:

flutter doctor

检查内容包括Flutter软件本身，Xcode，Android Studio，VS Code等工具是否安装等等，根据反馈做相应调整就可以了。

image.png

参考文章

Configuring Flutter to use a mirror site

Flutter SDK releases

MacOS上安装Flutter

Flutter初体验--MAC系统Flutter安装使用