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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

李蔚蓬 2019-01-11 01:52:00 浏览3058
展开阅读全文

参考链接

本文摘要

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

flutter SDK的安装

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

img_eb9d0ee500dd8cc636ebeae6009354dc.png

下载完:
img_188ebeaa84f6a189b2d7d289f22fff76.png

配置环境变量

解压,


img_9de9fa9141c1ca2b147631038e70e2d3.png

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


img_63b9c3b76962c979cb9454f454d1453a.png

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

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

flutter

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


img_0966b37074ffd8521f58de6b0e833dbf.png

img_711fe944e61013a58de7fef4d8f5c5f9.png

cmd命令行继续调试:

flutter doctor
img_c8b16d30ba3da0fbc7e236cad721acad.png

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

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

img_37da5ab0c5e3e0ab7f418e1c0c0f23ef.png

img_89b8c05e4d87561ee1e689afd2727008.png

安装好了,点击
img_a1407b2fe7670f9da5e3f73433f2124c.png

安装完成:
img_458e9d6bee30cd520953b4f8a51ca9bc.png

这里pick一下一个解决签证的方法:
img_8d82019cbe13a991a5246a25450fafa2.png






在vscode中安装flutter和dart插件

打开VSCode,如下操作:
img_8db224b6400b8bd3484b490441f74c4b.png

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


img_90983a600fc333191ae703f82812066a.png

可以看到插件已经安装好了:
img_1822f2e2f163922e01b44853a308c816.png

接下来点击左侧栏的第一个图标,进入文件界面,开始新建项目:
img_24900f2d31c4d0e439c36401aebdf9b7.png

在vscode的终端中直接输入

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

回车:
img_e7f857ab0dbe0788a576d666b3f28cd2.png

如图,得到新建的项目:
img_3c5c6b87f2647774ec22fa20abc3d927.png

进入demo001/lib/main.dart:
img_2fd77b63ebb13475b9b0d8a099de39a1.png

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

点击下图箭头指向处:
img_8330eddabc339b16673f64e00fa63ca0.png

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


img_60ecc2e5ff031ac3a65cc0fb424589c6.png

现在点击上图的第一个虚拟机,启动之:
img_37fc7cf69fb2c614e67ec79078ff30e9.png

运行程序:
img_a50c2065ae69f15fe207fc6974a1a8c1.png

img_b0a4b49b42cb194a458eae4e3b65a375.png

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

网友评论

登录后评论
0/500
评论
李蔚蓬
+ 关注