windows + flutter + vscode 最详细的配置以及使用方法

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。flutter中文网

Windows上搭建Flutter开发环境(vscode)

(1)获取Flutter SDK
(2)安装Android Studio
(3)开发工具vscode 配置
正文
第一步:下载Flutter SDK,配置环境变量
在下载前先来个小插曲:因为众所周知的原因,国内访问Flutter同样受到限制,Flutter官方为中国开发者搭建了临时镜像,大家可以将如下环境变量加入到用户环境变量中(win系统上直接执行命令无效哦~手动添加如下图):

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

在这里插入图片描述
下载flutterSDK可以直接去flutter官网下载其最新可用的安装包,点击下载 ;也可以执行git命令下载

git clone -b master https://github.com/flutter/flutter.git

完成以上下载之后,Windows 环境变量Path中添加flutter的路径配置环境变量,格式如下:

PATH:   D:\flutterSDK\flutter\dev(根据自己的路径修改)

在这里插入图片描述

第二步下载安装Android Studio并进行相关配置
Flutter需要安装和配置Android Studio:
(1)点击去下载并安装 Android Studio.
(2)启动Android Studio,然后执行“Android Studio安装向导”。这将安装最新的Android SDK,Android SDK平台工具和Android SDK构建工具,这是Flutter为Android开发时所必需的。

第三步安装配置vscode
(1)默认大家已经安装好了vscode,安装完vscode之后再vscode的应用里安装flutter和dart这两个插件,一般先安装flutter之后dart也会已经自动安装。如图:
在这里插入图片描述
在这里插入图片描述
安装完成两个插件之后记得重启vscode,重启vscode!

(2)在vscode界面按下F1 或Ctrl+Shift+P: 打开命令面板。下拉找到这个点一下执行:
在这里插入图片描述
(3)此时你会发现,右下角弹出来一个东东:
在这里插入图片描述
此时点击Locate SDK,系统对话框弹出来选择刚刚下载好的flutterSDK,选择到flutterSDK主文件目录即可。之后就可以执行检查了:(如果第二项出现下图箭头指的这个东东,那咱们就根据提示执行以下这个命令,同时一路敲 y ,直到不出现为止)

在这里插入图片描述
执行命令如图:
在这里插入图片描述
此时再在vscode中重复一下刚才的检查,或者直接终端敲 flutter doctor 会发现第二项已经好了,如图:
在这里插入图片描述

至于第三项的插件这里的对号是已经安装配置好,!号是未配置好,✗号是未安装,因为使用了vscode,所以有叉号的插件在android studio里面我就不安装flutter插件了,如果使用android studio开发的话安装一下。

第四步创建项目
(1)可以新建一个文件夹打开命令终端 输入 flutter create myflutter,回车就可以创建一个myflutter项目,也可以在vscode中命令面板输入flutter ,选择新建项目之后输入项目名即可:
在这里插入图片描述
在这里插入图片描述
(2)下面就可以愉快的在vscode中开发flutter项目啦~
在这里插入图片描述
本文为原创,转载需要注明出处,刚入门flutter,不对的地方还请大神指出~

### 如何在 VSCode 中设置 Flutter 开发环境 #### 安装 Visual Studio Code 和 插件 确保已安装新版本的Visual Studio Code (VSCode)[^3]。 接下来,在VSCode中通过扩展管理器安装两个必要的插件:“Flutter”和“Dart”。这两个插件提供了对Flutter项目的全面支持,包括调试、代码补全等功能。 #### 配置 Flutter SDK 对于Windows用户来说,在安装完成后可以通过依次点击`View->Command Palette...`(或使用快捷键`Ctrl+Shift+P`) 来调用命令面板[^1];而对于Ubuntu用户,则建议新建一个文件夹并用VSCode打开它,接着可以在内置终端里运行`flutter doctor`检查当前系统的配置情况以及获取进一步指导[^2]。 #### 初始化新项目 当一切准备就绪后,同样是在命令面板内输入关键词`flutter`并按Enter键确认操作,按照提示选择保存位置及指定应用名即可快速建立一个新的Flutter工程。此时,IDE将会自动处理好所有必需的依赖项,比如下载对应版本的Dart SDK等资源。 #### 测试与验证 后一步是测试整个流程是否成功。这通常涉及到启动模拟器或者连接真实设备,并执行简单的应用程序来检验开发环境的有效性。如果遇到任何问题,“flutter doctor”工具能够提供详细的错误报告以便排查原因。 ```bash # 打开终端查看可用命令 flutter help # 查看医生诊断结果解决可能存在的问题 flutter doctor ```
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

你好!YOYO

你的鼓励

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

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

打赏作者

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

抵扣说明:

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

余额充值