Flutter学习--Mac 电脑安装Flutter详细教程

一.前言

虽然说flutter环境搭建并不是很复杂,可能对于新手来说,或者阅读官方文档有些吃力的小伙伴来说还是会耽误点时间的,本文力求以最小白的视角来记录踩过的坑。

二.准备

我当前Mac 系统为 Version:10.14.6 ,
Android Studio---Version:3.2.1,
vscode---Version: 1.44.0,
xcode----Version:11.0
到官网下载flutter sdk:地址
有Windows,macOS,Linux 三种可选下载可能会花费点时间,我当时大概下载了两个小时。下载下来是一个压缩包

三.安装

1.解压sdk

压缩包解压出来是一个名为flutter的文件夹,我是在电脑根目录下创建了一个opt文件夹,然后将解压后的文件放到了opt文件里面,这个纯属个人爱好,没有特殊要求。


2.配置环境变量

因为Flutter 在运行的时候,需要去官方下载所需要的资源.所以我们需要更换镜像服务器。具体操作,首先执行在电脑根目录下执行vim /.bash_profile 。记住是根目录!!我当时就是在flutter和opt文件里面执行配置了很多遍一直不成功。(原谅一个iOSer,对这方面了解太少了)。

然后在写入

export PATH=${PATH}:/Users/wzr/opt/flutter/bin
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

其中第一bin文件路径,根据个人而定。

写好之后 :wq  保存退出。
此时可能不会直接生效,我是关闭终端之后,再打开才生效的。

3.检测

在终端输入 flutter doctor,可以检测环境安装情况。
我第一次执行的时候报了三个错误,好吧一个一个看。
前面两个是Android studio相关的,在Android studio中没有安装 flutter和dart插件

好吧,打开Android studio,在Preference->Plugins中分别搜索dart,Flutter插件下载安装就好了。

再次在终端输入flutter doctor,不出意料,只剩下一个错误了

根据描述可以看到是VS code中的Flutter插件没有安装好

打开VS code ,点击左边栏倒数第二个按钮,搜索Flutter,选择第一个安装。

再到终端执行 flutter doctor,果然,原来的三个问题都解决啦。
不过好像还有一个警告。看下描述原来是Android licenses not accept。
很简单上面写了解决办法 照做就行了

执行flutter doctor --android-licenses,中间会有几个选项,都选择yes就行了

最后在执行一遍flutter doctor,No issues found ! 大功告成。

终于可以开始愉快(tong ku)的flutter之旅啦。

(iOSer 表示这算是配过比较复杂的开发环境了,给自己一朵小发发)!

你可能感兴趣的:(Flutter学习--Mac 电脑安装Flutter详细教程)