明水县网站建设网站建设 常州

1.参考文档

Mac端Flutter的环境配置看这一篇就够了
flutter的中文官方文档

2. 本人环境搭建的背景

本人的电脑的是Mac的，iOS开发，所以iOS开发环境本身是可用的；外加Mac电脑本身就会配置Java的环境。所以，后面剩下的就是，下载Flutter的SDK 和 Android studio 以及下载VS Code 工具。

3. flutter SDK的下载

因为我电脑没有VPN，用git下载SDK失败，所以就看官方文档的这个步骤：
下载下来后，直接去“下载”列表，解压，解压后，就是“flutter”的文件夹，将整个文件夹拖到根目录下，如下图：

4. flutter 环境的配置

这一步，参考的是这个文档:Mac端Flutter的环境配置看这一篇就够了。

4.1 打开命令行，进入根目录下：

cd /Users/zhuzhu 

注意 /Users/zhuzhu 是我的根目录，参考者应该替换成自己电脑的根目录，格式如下：/Users/你电脑名字

4.2 打开文件夹，进入根目录下，如下图：

如果没有看到隐藏文件，就用快捷键cmd + shift + . 来显示隐藏文件，如果找到隐藏文件.bash_profile, 如下图：

4.3 编辑.bash_profile文件，配置flutter的环境，在.bash_profile文件中，添加如下的代码：

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

注意/Users/zhuzhu/flutter/bin:$PATH 这个路径是我flutter的路径，应该换成你电脑本地的flutter的路径, 前文我说了，把flutter的文件夹直接拖入到根目录下，如果你也这么干的话，那么路径应该是 /Users/你电脑名字/flutter/bin:$PATH

4.4 执行.bash_profile文件，让修改生效。在命令行中，执行如下的代码：

source ~/.bash_profile

4.5 验证是否flutter的配置生效，在命令行中，执行如下的代码：

flutter -h 

如果出现如下的打印，说明flutter SDK 已经完成了：

5. 配置安卓环境

5.1 下载 Android studio

从这个网站下载 Android studio, 我根据我电脑的配置，下载的是这个，各位应该根据自己电脑的配置，自行选择：

下载完后，就解压，按照安装的流程，操作就行了。

5.2 配置 cmdline-tools

如果不走这一步，当执行flutter doctor时，会出现cmdline-tools component is missing 错误的错误，处理方式：

1. 打开 Android studio
   
   在命令中，执行如下的代码：

flutter doctor --android-licenses

命令行，会提醒，选择y：

然后命令行，会提醒，是否Accept， 选择y：

最后，如果出现这个提示，就表示安卓环境配置好了：

6. 安装Visual Studio Code

6.1 下载 VS Code 工具

这个是用来开发flutter的工具，简称VS Code， 下载路径：https://code.visualstudio.com/docs?dv=osx，

下载完成，就正常的解压，安装就行。

6.2 安装插件

打开 VS Code， 在搜索框中flutter 然后点击安装，如下：


这样 VS Code 也可以了。

7.验证flutter的环境配置

在命令行中，输入flutter doctor 来查看环境配置的如何，如下图：

如果是这样，基本上就差不多了，如果有什么问题，各位就自行百度吧。这个文档，也只是我的回忆录，没有很详细，只是作为一个备忘录，有些细节可能也忘记了。

另外，记录我这边的一个问题：每次重启命令行，都需要执行source ~/.bash_profile 才能用flutter，我也不知道为什么，先记录着吧。