且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2022-06-06 20:12:26

参考链接

本文摘要

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

flutter SDK的安装

进入flutter官网,下载对应的版本:

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

下载完:
一次关于Flutter的碰壁 | VSCode中搭建开发环境(插件 | 虚拟机 | 新建项目并运行)

配置环境变量

解压,


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

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


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

到桌面--右键“此电脑”--点击属性--高级系统设置--环境变量--系统变量栏--点击Path,新建一个环境变量,把刚刚复制的路径加进来--确定--确定--确定:
一次关于Flutter的碰壁 | VSCode中搭建开发环境(插件 | 虚拟机 | 新建项目并运行)

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

flutter

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


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

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

cmd命令行继续调试:

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

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

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

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

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

安装好了,点击
一次关于Flutter的碰壁 | VSCode中搭建开发环境(插件 | 虚拟机 | 新建项目并运行)

安装完成:
一次关于Flutter的碰壁 | VSCode中搭建开发环境(插件 | 虚拟机 | 新建项目并运行)

这里pick一下一个解决签证的方法:
一次关于Flutter的碰壁 | VSCode中搭建开发环境(插件 | 虚拟机 | 新建项目并运行)






在vscode中安装flutter和dart插件

打开VSCode,如下操作:
一次关于Flutter的碰壁 | VSCode中搭建开发环境(插件 | 虚拟机 | 新建项目并运行)

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


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

可以看到插件已经安装好了:
一次关于Flutter的碰壁 | VSCode中搭建开发环境(插件 | 虚拟机 | 新建项目并运行)

接下来点击左侧栏的第一个图标,进入文件界面,开始新建项目:
一次关于Flutter的碰壁 | VSCode中搭建开发环境(插件 | 虚拟机 | 新建项目并运行)

在vscode的终端中直接输入

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

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

如图,得到新建的项目:
一次关于Flutter的碰壁 | VSCode中搭建开发环境(插件 | 虚拟机 | 新建项目并运行)

进入demo001/lib/main.dart:
一次关于Flutter的碰壁 | VSCode中搭建开发环境(插件 | 虚拟机 | 新建项目并运行)

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

点击下图箭头指向处:
一次关于Flutter的碰壁 | VSCode中搭建开发环境(插件 | 虚拟机 | 新建项目并运行)

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


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

现在点击上图的第一个虚拟机,启动之:
一次关于Flutter的碰壁 | VSCode中搭建开发环境(插件 | 虚拟机 | 新建项目并运行)

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

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

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