使用 VS Code 进行 flutter 项目创建以及调试

更新

通过学习 优达学院的课程 发现最好还是使用 Google 官网推荐的 Android Studio 较好，因为有 Flutter Inspector 这个很好的内置功能，未来 VS Code 可能也会支持的吧 2019.3.11

效果 gif 图

• 新建项目

flutter新建项目.gif

• 调试项目

编辑器启动模拟器进行调试.gif

准备工作

1. 本机安装 flutter windows系统安装，来自技术胖的视频教学 、VS Code 官网安装地址 和 Android Stadio 官网安装地址 （为了方便下载 Android 模拟器）
2. 在 VS Code(下面所说的编辑器都指的是这个) 中安装相关扩展 Flutter 和 Dart（自动随着 Flutter 安装的）

安装方法：打开编辑器 -> 选择最左侧的 【扩展】（快捷键 ctrl + shift + x）菜单 -> 输入 "Flutter" ，点击右侧插件详情中的【安装】按钮，即可自动安装这两个扩展插件

3. 安装安卓模拟器

正文

1. 在编辑器中新建项目

# 使用快捷键打开命令面板
ctrl + shift + p

# 输入 "flutter"

# 选择 "New Project"

# 等待几分钟时间(具体依据电脑性能)

# 之后输入项目的名称(自定义即可) -> 回车

# 之后会出现 选择将项目文件夹放置目录的 弹窗，这里我选择到桌面上

# 等待项目自动创建的过程，之后会自动在编辑器中打开该项目文件夹，并打开 `main.dart` 文件

2. 调试项目

1. 首先按 F5，之后编辑器的顶部会出现如下图所示的选择 "模拟器" 的弹窗

选择 "模拟器" 的弹窗

• 因为我有装模拟器，所以才会有第一个选项，也就是我的模拟器的名称，如果没有安装过的话，需要使用 Android Stadio 编辑器进行安装，具体方法如下图所示：

安装模拟器.gif

我这里选择安装的是默认选中的 Nexus 5X -> Pie -> 点击 "Download"

• 装完模拟器之后才可以在 VS Code 中进行调试噢~

2. 接着在编辑器中进行调试

• F5 之后选中安装好的模拟器 "Nexus 5X"，之后编辑器下方如果报如下所示的错误：

Failed to launch emulator: PANIC: Cannot find AVD system path. Please define ANDROID_SDK_ROOT

• 如上报错表示为定义 ANDROID_SDK_ROOT 环境变量，接下来便需要给电脑配置环境变量：

配置ANDROID_SDK_ROOT环境变量.gif

"ANDROID_SDK_ROOT" 是固定的变量名，"D:\AndriodSDk" 是我的电脑安装的 android SDK 的文件夹路径

• 之后重复之前的操作：F5 -> Nexus 5X，便会自动的进行模拟器的启动过程了，启动过程会需要几分钟左右。
• 综上所述已经可以启动项目，即可在模拟器中进行实时预览视图（这个需要将该项目安装到模拟器中所以会需要一些时间）