利用VScode搭建Flutter环境开发

Flutter 同时被 2 个专栏收录
47 篇文章 4 订阅
2 篇文章 0 订阅

作为一名前端程序员,为了这么个框架去下载个AndroidStudio实在是太费功夫太费时间了,所以决定在Vscode上面去搭建Flutter所需要的开发环境,搭建环境主要分为以下几点

  • java环境
  • flutter安装
  • Android环境
  • Android证书安装
  • Dart环境
  • 模拟器配置

Java环境配置

https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
在里面选择要安装的java环境版本,现在Oracle想要下载安装,需要先注册Oracle用户,这个很快就完事了,一路默认安装之后,可以Windows + R 进入命令行,输入java查看结果,如果出现下图这种,证明安装完成,如果出现:不是内部命令一类的,可以百度一下jdk的环境配置,这里就不详细介绍了
在这里插入图片描述

flutter安装

Flutter的安装首先要通过这个地址
https://flutter.io/sdk-archive/#windows
去下载Flutter的SDK,下载好后打开,会出现下图的这些文件
在这里插入图片描述
这时我们打开flutter_console.bat 这么个文件,可以自动打开命令行提示框,不过这个提示框是基于Flutter环境的一个提示框。
记得配置一下Flutter 的系统环境变量,将flutter中的文件夹bin的路径复制下来放到path环境变量中
在这里插入图片描述
到这一步已经将Flutter的环境搭配好了,这里,我们可以利用一行命令去检验一下,还是在这个Flutter的命令行中,输入flutter doctor ,就可以检测Flutter的环境了
在这里插入图片描述
从图中可以看到我们的环境要求有4种,第一为Flutter的环境变量,我们已经成功,而二三四则分别为Android的环境、AndroidStudio开发工具、device(AVD模拟器)。现在我们已经解决了第一条,接下来就是安装Android环境的步骤了(在这里我的SDK环境已经安装好了,但是没有安装证书)

Android环境

安装Android的SDK环境可以去这两个地方
网盘地址:
链接:https://pan.baidu.com/s/1-1rIxptyNF2hzzLrfIyDPA
提取码:3bgt
网站地址:
https://www.androiddevtools.cn/
在这里插入图片描述
如果是程序安装的话,可以直接点击最后一步的start AndroidToolSDK

网站安装的方法不管是哪个都可以,安装好后,打开文件夹的内容是这些
在这里插入图片描述
打开SDK Manager,选择自己需要安装的Android包,选择完毕后,点击install就会下载了,在这里需要等一会了,感觉翻墙安装下载应该会更快一些~

在这里插入图片描述

在这里我们可以在命令行内输入android 命令去检验一下环境是否安装成功

坑!!!!

这里需要注意了,从这里开始有许多需要配置的地方,请注意每一个地方

首先就是android环境的检验, 当你在命令行输入android命令时,系统会告诉你,“该命令不是内部命令”

解决办法

在这里插入图片描述
在这里插入图片描述

创建系统变量:
变量名:ANDROID_HOME
变量值:AndroidSDK的路径,我是放到了D盘
在这里插入图片描述
添加path变量
在这里插入图片描述
这个变量的路径是你的AndroidSDK文件夹中的tools文件夹路径。
在这里还要注意一下的是我们还需要配置 adb 命令的环境变量,虽然说我现在也不知道用不用得上,但是我看他的作用模拟器方面应该是能用上的

ADB概述
Android Debug Bridge,Android调试桥接器,简称adb,是用于管理模拟器或真机状态的万能工具,采用了客户端-服务器模型

和上面的流程一样我们在Path后面再添加一个变量
在这里插入图片描述
该值为你的AndroidSDK中的platform-tools文件夹的路径

在这里插入图片描述
abd命令 --------成功!
在这里插入图片描述

android命令 ------- 成功!

Android证书

在flutter的命令行中输入:

flutter doctor --android-licenses

有的人会直接安装证书, 如果安装的话,就一路选择Y就可以了,如果没有安装而是报错,如下图在这里插入图片描述
这是因为我们的Android的SDK版本不对,所以我们按照系统所告诉我们的运行升级SDK的命令

D:\Android\tools\bin\sdkmanager --update

在运行这条命令的时候,又会出现错误:
在这里插入图片描述
Warning: An error occurred during installation: Failed to move away or delete existing target file: D:\Android\tools Move it away manually and try again..

解决办法:

打开AndroidSDK文件夹,修改tools文件名为自己任意的一个名字,我修改为了tool,修改好后,再次运行这个命令,在这里注意修改命令中的tools改为tool
在这里会有警告出现,可以不用去管,时间会有点小长,可以去做点别的事情,升级完成后,会出现一个done
在这里插入图片描述

随后再次运行证书命令,一路y之后,再次利用flutter doctor命令去检测
在这里插入图片描述
可以发现我们的AndroidSDK环境已经配置完毕了,

Dart环境安装

http://www.gekorm.com/dart-windows/

在这里插入图片描述
第一个为稳定版,第二个为开发版,可以自主选择安装,安装完成后,系统会自动配置好变量,不需要我们再次去配置了。

AVD模拟器配置

在Vscode中打开flutter项目,右下角会有个No devices 点击之后,上方弹出create Decvices,点击就行,但是我每次创建都会失败,所以我还没有办法单独配置AVD模拟器,只能在AndroidStudio中创建,问题是在AndroidStudio中创建那不就白做前面的那些了嘛~~,所以 请有办法的朋友一定要联系我,谢谢你了~


还有一种办法就是下载个安卓模拟器,浏览器上搜一些夜神模拟器,逍遥模拟器 安装好后, 打开VScode,查看右下角是不是能够识别出来
这是未识别的情况!!!
在这里插入图片描述

当你的模拟器正常运行的话,就能够识别到了
在这里插入图片描述

  • 4
    点赞
  • 5
    评论
  • 35
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页

打赏作者

磐石BedRock

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值