一次关于Flutter的碰壁 | VSCode中搭建开发环境（插件 | 虚拟机 | 新建项目并运行）

参考链接

本文摘要

• flutter SDK的安装
• 在vscode中安装flutter和dart插件
• vscode中如何安装和启动虚拟机
• vscode中新建flutter项目并运行

flutter SDK的安装

进入flutter官网，下载对应的版本：

下载完：

配置环境变量

解压，

进入解压好的文件夹中的bin目录，点击地址栏，复制路径，待会儿用于配置环境变量：

到桌面--右键“此电脑”--点击属性--高级系统设置--环境变量--系统变量栏--点击Path，新建一个环境变量，把刚刚复制的路径加进来--确定--确定--确定：

确定之后便配置完成，接下来进行测试： Windows+R--输入cmd进入命令行窗口--窗口输入

flutter

之后回车--如果能看到如下诸多输出信息则表明配置环境变量成功也表明我们的flutter安装好了：

cmd命令行继续调试：

flutter doctor

该命令用于检测flutter环境的相关搭建情况， 总共有红色、绿色、黄色三种输出信息；

Android Studio 安装插件（这里仅做步骤参考，实际应该用AS3.0+进行操作）

安装好了，点击

安装完成:

这里pick一下一个解决签证的方法：

在vscode中安装flutter和dart插件

打开VSCode，如下操作：

点击flutter的install按钮之后会出现如下界面，dart插件也会同时安装好，此时点击reload，

可以看到插件已经安装好了：

接下来点击左侧栏的第一个图标，进入文件界面，开始新建项目：

在vscode的终端中直接输入

flutter create [项目|文件夹名(这里用的是demo001)]

回车：

如图，得到新建的项目：

进入demo001/lib/main.dart:

有时候刚刚新建的项目可能会像下面这些图片中的代码所示各种爆红报错： 把鼠标移到首行的import处，还会显示如下报错： [dart] Target of URI doesn't exist: 'package:flutter/material.dart'. [uri_does_not_exist] 对于这种情况其实很好解决， 重启VSCode即可。

点击下图箭头指向处：

会弹出在AS创建过的虚拟机（也建议在AS中创建虚拟机，而不是在VSCode这里创建虚拟机，因为这里新建虚拟机是不会有选项的，而AS不一样，有诸多选项可选）：

现在点击上图的第一个虚拟机，启动之：

运行程序：

我觉得终究啊，还是要用3.0以上的gradle才能正正经经地把flutter给跑起来。 无论是AS还是VSCode。