有手就行 | Flutter在VSCode（Visual Studio Code）中的安装与配置

一、前言

  安装配置Flutter的办法挺多的。可以在官网上下载，再在IDE中配置；也可以直接使用IDE下载并配置。之前的文章中已经讲到作者打算使用VSC（Visual Studio Code）进行开发。众所周知VSC是一个很方便的轻量级IDE，作者呢图方便就不在官网上下，直接使用VSC配置了。
  所以在安装Flutter之前呢，需要先装VSC，如果还没安装VSCode或不知道怎么安装配置，可以参考这个专栏的一篇文章：有手就行 | Visual Studio Code的安装及语言（简体中文）配置（Windows）；同时我们也会用到Git，可以参考这个专栏的另一篇文章：有手就行 | Git的下载安装及其环境变量配置（Windows）。
  这篇文章记录了在Windows系统中使用VSCode安装并配置Flutter框架，以及通过代理或镜像网站对相关配置问题的解决。按步骤来，有手就行。觉得有用的 | 点赞 | 收藏 | 关注 | 支持下~

二、资料参考

  记录几个可参考的网站：
  Flutter的官方中文文档：在中国网络环境下使用 Flutter
  VSCode安装与配置：有手就行 | Visual Studio Code的安装及语言（简体中文）配置（Windows）
  Git的安装与配置：有手就行 | Git的下载安装及其环境变量配置（Windows）
  其它可参考网站：
  Flutter 官方（英文）文档
  Flutter 官网
  Flutter 中文开发者网站
  Flutter 中文网

三、版本参考

  操作系统：Windows 11
  软件工具：Visual Studio Code x64 1.99.3
       Git 2.49.0
       Flutter 3.29.3
       Dart 3.7.2
       DevTools 2.42.3
  *注：主要参考VSCode、Git、Flutter就行了，其它的作者顺便记录下。

四、Flutter在Visual Studio Code中的安装与配置

（一）下载Flutter插件及SDK

  在扩展仓库中直接搜索“flutter”，选择并点击“安装”。

  点击“信赖发布者和安装”。

  点击上方搜索栏。

  直接点击“显示并运行命令”或者使用快捷键“Ctrl + Shift + P”。

  输入“flutter”并选择“flutter: New Poject”。

  由于此时Flutter的SDK还没下载，所以我们选择“Download SDK”。

  然后VSC会让你选一个下目录。在D盘创建一个文件夹，重命名为“Flutter”并选择，点击“Clone Flutter”。

  然后就开始下载了，浅等一会儿。

  耐心等待，它可能会弹出一些错误，但是没有影响。直到右下角弹出这样的弹窗。没看到的朋友点击右下角的“铃铛”图标，看看里面有没有。我们点击“Add SDK to PATH”。

  成功后会显示“The Flutter SDK was added to your PATH”。

（二）检查开发配置及问题解决

  重启VSCode，新建一个终端。

  输入flutter doctor并运行。如果是这样的（图源官方手册），它说! Doctor found issues in 2 categories.，那说明大佬您成功了：

  但如果是这样的，它说! Doctor found issues in 4 categories.，别担心，这是正常情况。

  这是因为Maven库我们国内是连不上的。两个解决方案：一个是通过代理解决，一个是通过阿里云的镜像Maven网站解决。
  建议还是通过代理解决，因为有些新的包镜像网站里没有，Flutter还是比较依赖Maven库的；另一个原因就是镜像网站治标不治本，使用代理是解决根本的网络问题，会影响到同样使用环境变量读取代理设置的程序，如命令行工具curl、git、pip等。

（1）通过代理解决

  打开CMD命令窗口，输入以下命令查看是不是已经配置了代理端口。

echo %HTTP_PROXY%
echo %HTTPS_PROXY%

  有的话，可以使用以下命令清理。

setx HTTP_PROXY ""
setx HTTPS_PROXY ""

  然后使用一下命令重新配置代理端口，一般端口为7890，最好查看下自己的端口号是多少。

setx HTTP_PROXY http://127.0.0.1:7890
setx HTTPS_PROXY http://127.0.0.1:7890
setx NO_PROXY "localhost,127.0.0.1,::1"

  然后重新启动CMD窗口，重新使用以下命令验证是否配置成功。

echo %HTTP_PROXY%
echo %HTTPS_PROXY%

  如果有输出了你配置的端口，如http://127.0.0.1:7890，就是可以了。当然那你也可以直接查看系统的环境变量是不是多了下面这个东西（因为刚才这波操作的本质就是给你调整了几个环境变量。

  之后你也可以在VSCode中的终端（Powershell）中查看环境变量是否已经配置完成。只是需要注意二者的语法差异（作者就是因为这里的语法被卡了好久。。。）。CMD使用%变量名%（如%PATH%），而Powershell使用$env:变量名（如&env:Path）。命令就会变成如下形式：

echo $env:HTTP_PROXY
echo &env:%HTTPS_PROXY

  同样，如果输出了如http://127.0.0.1:7890，就是可以了。如果不行的话，就重启下VSCode，或者重启下电脑。
  最后在Powershell中再次输入flutter doctor，输出如图就是成功了。

（2）通过镜像网站解决

  再次提醒：此方法固然方便，但治标不治本，兼容性差、维护困难，建议还是第一种办法。
  我们要修改Flutter SDK中的http_host_validator.dart，文件路径如下：

..\packages\flutter_tools\lib\src\http_host_validator.dart

  用记事本打开后，找到如下代码。

  把其中的const String kMaven = 'https://maven.google.com/';注释掉，替换为const String kMaven = ‘https://maven.aliyun.com/repository/google/’;，如下：

//const String kMaven = 'https://maven.google.com/';
const String kMaven = ‘https://maven.aliyun.com/repository/google/';

  找到目录..\flutter\bin中的cache文件，删除。

  回到VSCode中的Powershell，再次使用命令flutter doctor，输出如图就是成功了。

五、小结与后续

  这次配置的话作者自己也卡了几个地方，，主要还是搞代理那里，被语法卡了，，最后还是问了DeepSeek解决的下次注意。。。
  按照官方的文档看，这样就算已经在VSCode中配置好了。虽然还存在三个感叹号，但暂时也能用了。有空再出一期补充，对三个感叹号的问题的解决再详细说明。
  接下来应该正式开始进入到Flutter框架的学习了。应该先从Dart语言开始。另外作者还会出一期有关Cursor的配置，毕竟这个现在写代码实在太香太快了。