VS Code + Flutter 搭建环境（Win）

今天药忘吃喽~ 2021-12-19 02:27 758阅读 0赞

# VS Code + Flutter 搭建环境（Win） #

### 文章目录 ###

*  VS Code + Flutter 搭建环境（Win）
 *   *  安装 Android Studio
     *   *  下载 Android Studio
         *  安装 Android Studio
         *  添加模拟器
     *  安装与配置 Flutter
     *  VS Code 配置
     *  参考

## 安装 Android Studio ##

### 下载 Android Studio ###

由于官网需要翻墙，这里建议没有梯子的朋友选择镜像网站下载（[https://www.androiddevtools.cn/），我下载的是][https_www.androiddevtools.cn] 3.4.1 正式版本。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU5MDUx_size_16_color_FFFFFF_t_70]

### 安装 Android Studio ###

完成下载后运行安装软件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU5MDUx_size_16_color_FFFFFF_t_70 1]

安装时需要选择安装路径，习惯使然，我安装到 **D:\\Application\\Android Studio** 目录下。

安装完成后启动 IDE。第一次启动会让你导入配置文件，如果没有该需求，选中 **“Do not import settings”**，点 OK。此时会弹出 `Unable to access Android SDK add-on list`，点击 Cancel 取消。一路 Next ，最后 Finish。接着会自动下载 Android SDK，结束以后 Finish，来到下面这个界面。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU5MDUx_size_16_color_FFFFFF_t_70 2]

点击右下角 Configure，选中 AVD Manager（这里据说可能报错，原因是 HAXM 没有安装。详见可看：[https://blog.csdn.net/qq\_33505204/article/details/78452286）。][https_blog.csdn.net_qq_33505204_article_details_78452286]

### 添加模拟器 ###

添加模拟器关键步骤如下所示：

*  点击 **Create Virtual Device**：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU5MDUx_size_16_color_FFFFFF_t_70 3]
 *  按需选中机型：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU5MDUx_size_16_color_FFFFFF_t_70 4]
 *  按需下载，Name 旁边显示蓝色 Download 表示没有下载。它们间的区别在右边显示：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU5MDUx_size_16_color_FFFFFF_t_70 5]
 *  大功告成后显示如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU5MDUx_size_16_color_FFFFFF_t_70 6]

## 安装与配置 Flutter ##

官网下载 Flutter ：[https://flutter.dev/docs/development/tools/sdk/releases?tab=windows。我选择了][https_flutter.dev_docs_development_tools_sdk_releases_tab_windows] 1.5 稳定版。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU5MDUx_size_16_color_FFFFFF_t_70 7]

开始相关的环境配置：

*  添加用户变量：**控制面板 -> 用户账户 -> 用户账户 -> 更改我的环境变量**

FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU5MDUx_size_16_color_FFFFFF_t_70 8]

同理设置 PUB\_HOSTED\_URL：

PUB_HOSTED_URL=https://pub.flutter-io.cn

*  解压 Flutter，将其目录下的 bin 目录路径追加到用户变量 Path 中。如果没有这个变量，可以新建一个，操作同上。

## VS Code 配置 ##

打开 VS Code，`Ctrl + Shift + X`，搜索 flutter，安装扩展。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU5MDUx_size_16_color_FFFFFF_t_70 9]

安装完成后重启 VS Code，`Ctrl + Shift + P`，键入 **Flutter New Project**，创建一个 Flutter 项目。输入项目名，选择文件夹，等待初始化完成。  
![在这里插入图片描述][20190702094936118.png]

看 VS Code 右下角状态栏，应该显示的是 **“No Devices”**，这是因为我们没有设置模拟器。点击该状态，设置模拟器。  
![在这里插入图片描述][20190702094943489.png]  
![在这里插入图片描述][20190702095003450.png]

为调试方便，将模拟器置顶是个不错选择。设置方法如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU5MDUx_size_16_color_FFFFFF_t_70 10]

添加调试的配置文件。`Ctrl + Shift + D` ，选择 Add Configuration，然后点击旁边的绿色运行按钮。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU5MDUx_size_16_color_FFFFFF_t_70 11]

继续等待，第一次耗费时间较长，一切就绪后便可以开始 Flutter 之旅啦。`Ctrl + S` 保存代码后会触发热加载，不需要重启项目也能达到更新代码的目的。  
![在这里插入图片描述][20190702095051541.gif]

## 参考 ##

*  感谢极客时间陈航老师的[《Flutter核心技术与实战：从0开始搭建Flutter工程环境》][Flutter_0_Flutter]
 *  感谢 IT创客 的 [Android Studio 模拟器的选择和安装][Android Studio]

[https_www.androiddevtools.cn]: https://www.androiddevtools.cn/%EF%BC%89%EF%BC%8C%E6%88%91%E4%B8%8B%E8%BD%BD%E7%9A%84%E6%98%AF
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU5MDUx_size_16_color_FFFFFF_t_70]: /images/20211219/3f2e79bba5c04042aae35f7e1be0f8e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU5MDUx_size_16_color_FFFFFF_t_70 1]: /images/20211219/fb5045c7a3934f2bba61d7640885a3b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU5MDUx_size_16_color_FFFFFF_t_70 2]: /images/20211219/b6418c89ac3e474e9fe413eed3a04a92.png
[https_blog.csdn.net_qq_33505204_article_details_78452286]: https://blog.csdn.net/qq_33505204/article/details/78452286%EF%BC%89%E3%80%82
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU5MDUx_size_16_color_FFFFFF_t_70 3]: /images/20211219/6b3693251c004a5a8efa8868d03f3b54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU5MDUx_size_16_color_FFFFFF_t_70 4]: /images/20211219/f169feba4d2f48d7bc850ec1ed169e72.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU5MDUx_size_16_color_FFFFFF_t_70 5]: /images/20211219/ad54ef1dc9194e72bbf561bc32eb7ed6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU5MDUx_size_16_color_FFFFFF_t_70 6]: /images/20211219/bffce91a8cf04559847fe1b1e27e5e6a.png
[https_flutter.dev_docs_development_tools_sdk_releases_tab_windows]: https://flutter.dev/docs/development/tools/sdk/releases?tab=windows%E3%80%82%E6%88%91%E9%80%89%E6%8B%A9%E4%BA%86
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU5MDUx_size_16_color_FFFFFF_t_70 7]: /images/20211219/34a1719d6fe049329530faaab3ad2a0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU5MDUx_size_16_color_FFFFFF_t_70 8]: /images/20211219/57fe8a50c1a14c87b0aec60ca84c2d2b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU5MDUx_size_16_color_FFFFFF_t_70 9]: /images/20211219/355f7b31f26e45eaaf7823a8e6460c9b.png
[20190702094936118.png]: /images/20211219/59c588d1bd0540559c2485bacb6a5106.png
[20190702094943489.png]: /images/20211219/65920f190c05402fb8008404b03d7a80.png
[20190702095003450.png]: /images/20211219/70f0ae49a13d425db5df8f68a337d159.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU5MDUx_size_16_color_FFFFFF_t_70 10]: /images/20211219/5dcab6edf8784022a069a4d4c9590b51.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzU5MDUx_size_16_color_FFFFFF_t_70 11]: /images/20211219/ab026a8436de420ca622d41cb0918a7d.png
[20190702095051541.gif]: /images/20211219/9774bfe964494a5c86a1f8bb1b356bd4.png
[Flutter_0_Flutter]: https://time.geekbang.org/column/article/104051
[Android Studio]: https://blog.csdn.net/qq_33505204/article/details/78452286