博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
一次关于Flutter的碰壁 | VSCode中搭建开发环境(插件 | 虚拟机 | 新建项目并运行) ...
阅读量:7172 次
发布时间:2019-06-29

本文共 1091 字,大约阅读时间需要 3 分钟。

本文摘要

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

flutter SDK的安装

进入,下载对应的版本:

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。

转载地址:http://zydzm.baihongyu.com/

你可能感兴趣的文章
压力测试工具JMeter入门教程
查看>>
MySQL 百万级分页优化 数据库优化
查看>>
np.concatenate 拼接
查看>>
PHP编译错误解决:Don't know how to define struct flock on this system, set --enable-opcache=no...
查看>>
Linux命令(6):more命令
查看>>
HTTPD配置文件MPM(非7.0以上版本)
查看>>
Upgrade GI/CRS 11.1.0.7 to 11.2.0.2. Rootupgrade.sh Hanging
查看>>
nginx的高级配置(5)——访问控制
查看>>
DG_Oracle DataGuard Switchover主备节点切换(案例)
查看>>
CentOS7系统常用命令
查看>>
10.2.0.1 db console启动失败问题一例
查看>>
linux下查看文件编码及修改编码
查看>>
VC中的延时
查看>>
算法与数据结构知识点
查看>>
在单位成功实验的PIX配置
查看>>
centos6.x使用dd命令制作u盘启动
查看>>
如何使用Wireshark抓包
查看>>
mysql 时间函数用法 集合
查看>>
技术宅男既要提升编程技术也要加强沟通能力
查看>>
开源计划--格瓦拉梦想(GUEVARA‘S DREAM)
查看>>