小白撸Flutter系列--(一)MAC环境搭建

这几天flutter发布了1.0,又听说flutter跨平台效率表现还不错,好奇心驱使下动手体验一下。

flutter中文网

https://flutterchina.club

 

**第一步:**根据中文网的介绍我们首先配置环境变量:

1MacBook-Pro:~ TommyHan$ export PUB_HOSTED_URL=https://pub.flutter-io.cn 2MacBook-Pro:~ TommyHan$ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn 3

注意: 此镜像为临时镜像,并不能保证一直可用,读者可以参考详情请参考 Using Flutter in China 以获得有关镜像服务器的最新动态。

**第二步:**从github下载flutter到自己的电脑

1MacBook-Pro:~ TommyHan$ git clone -b dev https://github.com/flutter/flutter.git 2

**第三步:**下载好flutter后配置环境变量,添加flutter相关工具到path中

1MacBook-Pro:~ TommyHan$ export PATH="/Users/TommyHan/flutter/bin:$PATH" 2

注意: Users/TommyHan是我flutter的安装路径。

**第四步:**进入flutter文件夹

1MacBook-Pro:~ TommyHan$ cd ./flutter 2

**第五步:**检查flutter依赖项是否安装完整

1MacBook-Pro:flutter TommyHan$ flutter doctor 2

 

以上步骤基本没有难度,但如果是新手,可能会对环境变量配置及flutter的安装路径存在疑问。

首先确定你的flutter安装路径是哪里:针对第三步export PATH=[你的flutter安装路径]/flutter/bin:$PATH

再一个就是第五步运行 flutter doctor, 以下是我安装的截图,注意 7是在flutter文件下运行的

如果环境变量配置的没有问题,那么就会出现“Welcome to Flutter!....”是不是很兴奋,以为可以使用了哈哈哈,还早着呢!

**第六步:解决依赖问题。**运行完flutter doctor后flutter会检查自己的依赖项是否完整,如果不完整,他会给出提示如下图。所以只要根据提示内容去操作基本就可以了,如果你遇到的是其他的错误,也不必慌张,可以根据提示的命令行运行,也可以找度娘问一下,基本你遇到的问题,大家都遇到过。下面针对每一个报错进行处理。

  1. android license status unknown证书授权问题,解决:稍后在下文。
  2. Brew安装问题,解决:根据提示运行
1MacBook-Pro:flutter TommyHan$ brew 2MacBook-Pro:flutter TommyHan$ brew update 3MacBook-Pro:flutter TommyHan$ brew install --HEAD libimobiledevice 4MacBook-Pro:flutter TommyHan$ pod setup 5

 

  1. ios-deploy安装问题,可以安装Brew后使用Brew进行安装,解决:
1MacBook-Pro:flutter TommyHan$ brew install ideviceinstaller ios-deploy cocoapods 2

 

  1. 4和5的问题应该是我的android studio版本低造成的,我升级到3.0以上,解决:去android studio中文社区下载3.0以上版本的android studio;如果遇到点击下载,页面无法打开,下载无法进行,请参考hosts更改变更自己的hosts文件。
  2. No devices available没有可用设备,解决:在flutter文件夹下运行open -a Simulator
1MacBook-Pro:flutter TommyHan$ brew install ideviceinstaller ios-deploy cocoapods 2

 

自认为修复完成,我们再次运行 flutter doctor(flutter doctor -v 这个命令查看的更加详细)检查依赖是否完整,如下图:

第一个报错与上一次第一个报错相同,使用flutter doctor -v给出了解决办法:需要运行如下命令,都选y,然后回车。

1MacBook-Pro:flutter TommyHan$ flutter doctor --android-licenses 2

 

第二个报错需要进入android studio安装dart和flutter插件。打开Android Studio -> Preference > Plugins 在搜索框中搜索 Flutter, 本地没有, 就联网查找,搜索到Flutter, 点击安装即可 Dart环境他自动会安装好。

 

再次运行flutter doctor -v,如下图,大功告成!

另外有一个VS Code安装也是这个道理,安装VScode,然后在插件里搜索flutter和draft插件,安装即可。

 

环境搭起来了很开心,下一篇记录我的第一个 flutter app,做个什么app好呢?

 

 

 

 

代码交流 2021