Flutter环境搭建（VS Code和Android Studio）

目录

• [1 下载Flutter SDK](#1 下载Flutter SDK)
• [2 配置环境变量](#2 配置环境变量)
• [3 工具配置](#3 工具配置)
• • [3.1 Android SDK工具配置](#3.1 Android SDK工具配置)
  • [3.2 Visual Studio组件配置](#3.2 Visual Studio组件配置)
• [4 VS Code环境配置](#4 VS Code环境配置)
• • [4.1 安装扩展程序](#4.1 安装扩展程序)
  • [4.2 新建Flutter项目](#4.2 新建Flutter项目)
  • [4.3 启动程序](#4.3 启动程序)
  • • [4.3.1 在安卓虚拟机运行](#4.3.1 在安卓虚拟机运行)
• [5 使用 Android Studio 作为IDE](#5 使用 Android Studio 作为IDE)
• • [5.1 安装扩展程序](#5.1 安装扩展程序)
  • [5.2 新建Flutter项目](#5.2 新建Flutter项目)
  • [5.3 启动程序](#5.3 启动程序)
  • • [5.3.1 在安卓虚拟机运行](#5.3.1 在安卓虚拟机运行)
• 附：安卓程序首次编译速度慢的解决方法

1 下载Flutter SDK

3.38.7版本下载地址：storage.googleapis.com

可以从国内镜像站下载对应的版本：NJU

下载后，解压到本地文件夹中。

2 配置环境变量

将解压后的bin路径添加到Path中

验证环境变量配置：

终端执行

flutter --version
dart --version

可以看到版本信息，则环境变量配置完成

3 工具配置

如果需要生成安卓或者Windows平台的程序，还需要配置对应的工具。

执行flutter doctor检查本机环境配置

由于网络原因，Network Resources这一项也可能出现错误，可以忽略，不影响目标生成。

我这里提示缺少Android Studio和Visual Studio的一些配置，接下来逐个配置。

3.1 Android SDK工具配置

因为此前已经安装过Android Studio，所以在Android Studio中下载缺少的工具即可。打开设置，勾选安装Android SDK Command-line Tools (latest)即可

然后执行flutter doctor --android-licenses，按y回车，同意许可证。

再次执行flutter doctor检查本机环境配置，可以看到Android toolchain配置完成。

3.2 Visual Studio组件配置

如果没有安装Visual Studio Installer，可以从官网下载：适用于 Windows、Mac 和 Linux 的 Visual Studio 和 VS Code 下载

然后安装"使用C++的桌面开发"组件

安装完成后，所有环境配置检查通过

4 VS Code环境配置

4.1 安装扩展程序

在VS Code中安装flutter扩展程序即可，会自动安装Dart扩展程序

4.2 新建Flutter项目

按下快捷键ctrl+shift+p打开命令窗口，执行Flutter New Project

选择Application

然后选择项目保存位置。创建完成后，会自动打开项目。

4.3 启动程序

打开Flutter扩展界面，选择目标设备（这里选择的是Chrome），点击Run即可运行示例程序。

浏览器将显示一个计数器程序

如果安装了Visual Studio "使用C++的桌面开发"组件，也可以生成Windows程序

4.3.1 在安卓虚拟机运行

前提：Android Studio中配置了虚拟机。

在安卓虚拟机中运行，首先点击右下角选择设备，然后选择启动模拟器即可

等待项目编译完成，即可在虚拟机窗口看到运行结果。

5 使用 Android Studio 作为IDE

使用Android Studio作为IDE，代码补全功能比VS Code更加强大。

当然也可以使用其他支持的JetBrains IDE（Android Studio、IntelliJ IDEA Ultimate、GoLand、WebStorm），参见Dart官方文档

5.1 安装扩展程序

安装Flutter插件，还会自动安装Dart插件。

5.2 新建Flutter项目

打开Android Studio的欢迎页面，选择新建Flutter项目

选择Flutter SDK路径

配置项目名称和模块名称，设置需要的平台

项目创建完成，右边会显示Flutter插件面板

这时候打开面板可能会出现错误

点击Retry installation尝试安装，若还错误，可以更换网络环境再次尝试。安装完成后，可以正常显示扩展页面，如图

5.3 启动程序

选择对应平台即可。

Web

Windows

5.3.1 在安卓虚拟机运行

首先在Android Studio的device manager中启动虚拟机，然后就能在目标设备中选择对应虚拟机了

等待编译完成即可

附：安卓程序首次编译速度慢的解决方法

新项目首次编译需要下载gradle依赖，速度较慢，在版本不变的情况下，后续编译速度就很快了。玩过Android Studio原生安卓开发的应该都很熟悉了

解决方法：

1. 打开项目中android/gradle/wrapper/gradle-wrapper.properties文件，记下gradle文件版本
   
2. 打开NJU Gradle镜像站，下载对应的压缩包文件
3. 打开路径C:\Users\用户名\.gradle\wrapper\dists\gradle-版本\很长的字符，将压缩包放到该文件夹即可（无需解压）
   

---

参考
Install Flutter manually
Set up and test drive Flutter