Flutter在MAC安装实践

背景介绍

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

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

使用Git安装

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

Flutter在MAC安装实践_第1张图片
image.png

下载Flutter

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

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

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

Flutter在MAC安装实践_第2张图片
image.png

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

Flutter在MAC安装实践_第3张图片
image.png

安装Dart

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

./flutter/bin/flutter --version

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

Flutter在MAC安装实践_第4张图片
image.png

提示的镜像页面

配置镜像:

 export PUB_HOSTED_URL=https://pub.flutter-io.cn
 export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
Flutter在MAC安装实践_第5张图片
image.png

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

Flutter在MAC安装实践_第6张图片
image.png

配置环境变量

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

  • 获取HOME目录的地址:
cd ~
pwd
  • 显示隐藏文件快捷键:command + shift + .
Flutter在MAC安装实践_第7张图片
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的目录地址

Flutter在MAC安装实践_第8张图片
image.png

环境检查

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

flutter doctor

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

Flutter在MAC安装实践_第9张图片
image.png

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

Flutter在MAC安装实践_第10张图片
image.png

小结

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

step1 配置环境变量

  1. 通过Find的前往,切换到用户Home目录。如果不知道Home`目录的具体位置,可以打开一个终端,输入以下命令得到。
cd ~/
pwd
    • 显示隐藏文件快捷键:command + shift + .;如果环境配置文件.bash_profile已经存在,那么打开,如果不存在,就新建一个。vim和Mac自带的记事本都不好用,还是像sublime text这样的工具好用。
  1. 添加镜像,国内访问谷歌有困难,所以要改为访问镜像。所以,要在环境配置文件.bash_profile中添加如下两句:

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
  1. 配置flutterPATH。从gitHub下载下来的flutter的bin目录下有个名字叫flutter可执行文件。需要为它配置PATH参数,那么就可以在打开的终端中使用flutter开头的命令了。
Flutter在MAC安装实践_第11张图片
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等工具是否安装等等,根据反馈做相应调整就可以了。

Flutter在MAC安装实践_第12张图片
image.png

参考文章

Configuring Flutter to use a mirror site

Flutter SDK releases

MacOS上安装Flutter

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

你可能感兴趣的:(Flutter在MAC安装实践)