MacOS Flutter环境配置和安装

8,722 阅读3分钟

这是我参与8月更文挑战的第5天,活动详情查看:8月更文挑战

由于本人是一名iOS开发,所以本文主要讲的就是在MacOS环境下Flutter的安装流程,中间也踩了一部分坑,现在把我亲身来配置的步骤贴出来 ​

1. 下载Flutter SDK包

直接打开官网iOS下载地址,找到这个下载,我下载的版本是macos_2.2.3 image.png

2.解压SDK

我是下载下来之后直接解压,没有用命令,感觉双击一下就能解决的问题,搞这么复杂,奇奇怪怪。我双击解压之后直接拖到我的用户下面。当然啦,有的确实喜欢用命令行,使用命令的话, 可以直接复制。

cd /Users/DaGongRen
unzip ~/Downloads/flutter_macos_2.2.3-stable.zip

3.配置环境变量

刚开始的时候我是按照教程一步步来的。首先打开终端,进入存放Flutter的路径

cd /Users/DaGongRen/flutter
vim ~/.bash_profile

使用vim打开这个.bash_profile的文件,在这个文件里面添加配置,这个文件其实是个隐藏文件,我们可以使用shift + command + .打开隐藏文件,我的flutter放在和这个.bash_profile在同一级目录之下。 image.png

我是不太喜欢使用命令行,我就直接打开这个文件,在这个文件里面添加上PATH

export PATH=/Users/DaGongRen/flutter/bin:$PATH
export PATH=/Users/DaGongRen/flutter/bin/cache/dart-sdk/bin:$PATH

然后关闭,接着重新打开终端

cd /Users/DaGongRen/flutter
flutter -h

接着出现如下界面,说明环境配置成功了。 image.png

4.检查是否安装成功

打开终端,检查是否安装成功

cd /Users/DaGongRen/flutter
flutter --version

如果显示如下,则表明安装成功 image.png

我这里是提示:command not found,最后怎么解决的呢?最后我是在.zshrc这个隐藏文件中配置的PATH 而不是步骤3的.bash_profile文件

image.png

接着,来验证下是否所有的依赖都已经安装完毕! ​

5.安装诊断

通过运行flutter doctor命令来诊断是否存在未安装或者未安装成功的Flutter开发所需要的依赖选项。

image.png

运行我们可以看到Unable to locate Android SDK.那我们就去下载吧Android Studio 下载地址,温馨提示下载完成之后打开,然后会提示你下载一堆资源,你要选择同意,内容比较大,需要等待一段时间。 完了之后,继续flutter doctor

image.png

报红的地方意思说的是没有Java运行环境,接续下载java 下载地址 下载完成之后,继续flutter doctor

image.png

按照提示的要求继续flutter doctor --android-licenses,接下来就出现了好多次这个提示,直接输入y

image.png

一顿操作之后继续flutter doctor继续提示我

image.png

我又接着继续flutter doctor --android-licenses结果出现了这个玩意

image.png

最后找到了一个大佬的回答直达大佬的心底 步骤我借花献佛贴一下,大致是,首先打开Android Studio找到Preferences,把这个选项勾选上应用,然后会下载,需要等待一会时间,下载完成之后关闭。

image.png

接着最后来执行一次flutter doctor,ok,终于搞定了。

image.png