开发者社区> 李蔚蓬> 正文

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

简介: 参考链接 本文摘要 flutter SDK的安装 在vscode中安装flutter和dart插件 vscode中如何安装和启动虚拟机 vscode中新建flutter项目并运行 flutter SDK的安装 进入flutter官网,下载对应的版本...
+关注继续查看

参考链接

本文摘要

  • 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。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
在 Xcode 项目中使用 swift package fetch
本文讲的是在 Xcode 项目中使用 swift package fetch,到目前为止,Cocoa with Love 的 git 仓库都使用“git subtrees”来管理相关依赖,所有的依赖都被拷贝并静态存放于依赖方目录下。我希望能找到一种更动态地依赖管理方式来代替现有的方案
1501 0
理解C语言——从小菜到大神的晋级之路(2)——开发环境的选择和HelloWorld程序
视频观看:点击这里 一、常用系统及IDE简介        常言道,工欲善其事必先利其器。除了少数奇葩之外,大部分人应不会去使用记事本或者Word文档去编程吧?几乎所有编程语言都需要一个高效易用的开发环境,C语言也不例外。
1499 0
基于云服务器的环境搭建和项目部署学习
本文章主要用于记录使用阿里云服务器进行环境搭建和项目部署期间的所思所学,水平有限,不吝赐教。
37 0
我的mqtt协议和emqttd开源项目个人理解(19) - emq软件版本升级之后,因插件版本不对而引发的问题
我的mqtt协议和emqttd开源项目个人理解(19) - emq软件版本升级之后,因插件版本不对而引发的问题
55 0
一小时内在本地搭建 SAP Commerce Cloud(电商云)的前后台运行环境
一小时内在本地搭建 SAP Commerce Cloud(电商云)的前后台运行环境
14 0
5.Maven和Eclipse整合(两种方式进行插件的安装),Maven相关设置,Eclipse下创建Maven项目
 1  第一种方式是:在连网的情况下,通过在helpàInstall下安装。 新的地址是:http://download.eclipse.org/technology/m2e/releases 2  第二中方式是: 通过插件配置的方式进行安装插件。 A  将maven所需的插件放到maven的安装目录下,截图如下: B 在Eclips
1271 0
+关注
李蔚蓬
有两年Android开发经验,具备一定的Web基础,接触过matlab数字图像处理,ARM/ROS开发的基础知识
100
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载