学习Flutter-Windows搭建环境

79 阅读2分钟

记录下自己安装Fluter 环境流程

安装包的准备工作

image.png

  1. 第一步先安装java sdk,这个安装一直下一步就行,安装完成后记得在系统的Path环境变量进行配置,并在cmd 运行java查看安装是否成功

image.png

image.png

2 安装 android-studio, 在安装的时候会有SDK进行安装,用📂单独保存起来,也不要放在C盘

image.png

在android-studio安装完成后,安装下Dart 和 Flutter插件,重启下android-studio,

image.png

这样就可以看见有创建Flutter项目选项了

image.png

  1. 安装flutter sdk,只需要将flutter_windows_3.24.5-stable.zip压缩文件夹就行,并且在Path配置好对应的环境变量

image.png image.png

配置flutter国内镜像,一样在环境变量中新建变量进行设置
PUB_HOSTED_URL :  https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL : https://storage.flutter-io.cn

image.png image.png

4.运行 flutter doctor 检测flutter环境

image.png

注意点

image.png

Android的都环境出现 cmdline-tools component is missing错误时,在android-studio 把下面红圈的sdk下载一下就行

image.png

flutter config --android-sdk E:\AndroidSdk   

错误问题解决参考

5.flutter doctor 执行检测时出现下面情况并且你也需要Windows 桌面开发的话,出现下面这个只需要安装下Visual Studio

image.png image.png

在安装时我只需要安装C++ 桌面开发选项,以及自己对应的系统sdk版本,W11的就选W11最新版本,W10也是一样不要串版本了,勾选完直接安装就行,同样最好不要安装到C盘,最好自己单独📂进行保存

image.png

这时我们再去运行 flutter doctor 命令时,flutter环境应该全都是正确的

image.png

6.然后我们就可以去android-studio 中去创建我们的项目了

image.png

image.png

image.png

基本的flutter项目目录 ,但是我们使用android-studio 重新打开这个项目下的android 进行开发,不在这个项目的根目录进行开发

image.png image.png

这里再打开android 目录后,android-studio 会下载 Gradle 过程有点慢,等它下载完成

image.png

只有它下载完成,才会有调试的功能,没有下载完成时,这些按钮都是灰色的

image.png image.png

使用 VS code 开发,插件下载

image.png

image.png

image.png