Flutter-VSCode安装和配置

第一步:安装Flutter

window下Flutter官网下载链接:https://flutter.dev/docs/development/tools/sdk/releases#windows

​ 下载完Flutter后,解压到自己的本地的安装路径。随后进入flutter安装路径,运行该目录下的flutter_console.bat文件,接下来就可以来测试Flutter安装成功,可以在该安装目录下打开PowerShell,执行flutter doctor命令行来进行检测。运行后的正确结果见下图:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cq0wrABj-1667907984640)(https://img.onephantom.cn/UTOOLS1574441480993.png)]

上图中的Android toolchain需要后面来配置,下面也会讲解。

注:window7自带的powerShell版本比较低,无法执行flutter doctor命令行,会出现结果为Unblock File错误。可以下载5.0版本以上的Power Shell。

第二步:配置全局Flutter

  1. 右击我的电脑,进入属性 (我的电脑 => 属性)
  2. 进行高级系统设置,开始配置环境变量
  3. 在系统变量中找到Path变量,将“flutter安装路径\bin”加入进去,若是win7,前面得加‘ ; ’作为分隔。
  4. 确定退出
  5. 打开cmd,运行flutter doctor.

第三步:安装和配置android sdk

前去 Android SDK官网,下载window版本的sdk tools。

在这里插入图片描述

下载完成解压后,运行该目录下的SDKManager.exe,

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f2u3vEOZ-1638267145255)

注册过程中,我们需要耐心的等待一段时间。插件注册完成后,就可以开始配置全局adb了。与配置flutter差不多,进入高级系统变量界面后,新建一个ANDROID_HOME的变量,变量值android sdk的安装目录。点开系统变量中的Path值,将**%ANDROID_HOME%\tools%ANDROID_HOME%\platform-tools这两个值添加到里面。
然后打开cmd运行窗口,执行
adb version**查看,运行结果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LVEFPT56-1638267145256)

flutter和adb连接错误

  1. adb配置完成后,再一次的运行flutter doctor命令,可能会出现 Android license status unknown. 这个错误可以进行执行flutter doctor --android-licenses命令来解决该问题。
  2. flutter doctor --android-licenses命令可能会出现sdk的版本过低,而导致android-licenses出现错误,所以需要升级android sdk的版本,进入sdk的安装目录,将tools文件夹进行一下重命名(除了该目录下的文件名,什么都行)。接下来便进入这个文件夹下的bin文件夹中。执行**.\sdkmanager.bat --update命令对sdk版本更新。更新过程需要等待一段时间。更新后,再一次的执行flutter doctor --android-licenses**命令。

这样flutter就可以开始使用adb的一些功能了。

第四步:VSCode的安装和配置

VScode安装包下载地址: https://code.visualstudio.com/

安装完成后,便开始针对flutter进行配置。安装的插件主要就是:flutter,之后重启VSCode,按住Ctrl+Shift+P打开Command Platetter(命令平台),输入Flutter,选择Run Flutter Doctor,查看OutPut输出控制台中的输出内容。

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在VS Code中配置Flutter,可以按照以下步骤进行操作: 1. 安装Flutter SDK:首先,需要在你的计算机上安装Flutter SDK。你可以从Flutter官方网站(https://flutter.dev)下载适用于你操作系统的SDK版本,并将其解压到一个目录下。 2. 配置环境变量:将Flutter SDK的路径添加到系统的环境变量中。在Windows上,可以在系统的"高级系统设置"中进行配置;在Mac和Linux上,可以编辑.bashrc或.zshrc文件来配置。将Flutter SDK路径添加到PATH变量中。 3. 安装Dart插件:在VS Code中,打开扩展面板(使用快捷键Ctrl+Shift+X),搜索并安装Dart插件。这个插件提供了Dart语言的支持,是Flutter的依赖。 4. 安装Flutter插件:同样在扩展面板中搜索并安装Flutter插件。该插件提供了对Flutter框架的支持,包括创建、运行和调试Flutter应用程序。 5. 创建Flutter项目:在VS Code中,选择一个目录作为你的项目根目录,然后打开终端(使用快捷键Ctrl+`)。运行命令`flutter create <project_name>`来创建一个新的Flutter项目。 6. 启动模拟器或连接设备:在运行Flutter应用程序之前,你需要启动一个模拟器或连接一个真实的设备。你可以使用Android Studio AVD Manager来启动Android模拟器,或者使用Xcode来启动iOS模拟器。 7. 运行Flutter应用程序:在VS Code中,打开你创建的Flutter项目文件夹。然后,按下F5键或点击VS Code的调试按钮来启动调试会话并运行你的Flutter应用程序。 这些步骤应该能够帮助你在VS Code中成功配置和运行Flutter应用程序。如果你遇到任何问题,可以参考Flutter官方文档(https://flutter.dev/docs)或在开发者社区中寻求帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值