【手把手教学】Flutter Desktop 环境配置 (windows & vscode)

前言

flutter 开发配置比较复杂,与node环境相比,安装的东西要很多。

作为入坑flutter第一步,我选择了更熟手的编辑器vscode。

Step1: 下载Flutter & Dart

  • docs.flutter.dev/get-started...

  • 阅读&按照官方文档:下载zip,解压&配置系统环境变量Path

  • PS: 官方提醒【Warning: Do not install Flutter in a directory like C:\Program Files that requires elevated privileges.】

  • CheckList: Cmd 执行【where flutter dart

  • 踩坑:配置完环境变量,要关闭所有的cmd再执行CheckList;如果还不行,查看官方的Warning

Step2: 下载Android Studio

  • developer.android.com/studio?hl=z...
  • 选择exe文件下载,安装中不需要额外特殊的配置
  • PS:【科学上网,全局代理】安装过程中会下载很多sdk&tools,时长可能会很久,取决于你的节点速度
  • CheckList: Cmd 执行【flutter doctor

Step3: 解决 cmdline-tools component is missing

    • developer.android.com/studio/intr...

    • 按照官方文档,从 Android Studio 打开 SDK 管理器

    • 选择"SDK Tools",勾选"Android SDK Command-line Tools ",右下角选择"OK"

    • PS:【科学上网,全局代理】

    • CheckList: Cmd 执行【flutter doctor

Step4: 解决 Android licenses not accepted

  • Cmd 执行【flutter doctor --android-licenses】,同意协议

  • PS: 执行这个命令,Cmd 需要提权,用管理员身份来运行

  • CheckList: Cmd 执行【flutter doctor

Step5: 安装 Visual Studio


中场休息

截止上面的五个步骤,你的flutter 环境就已经搭建好了;


接下来我们用vscode 运行一个 flutter desktop demo,并完善 vscode 的flutter配置。

Step6: 新增一个Flutter 项目

  • 打开vscode,安装拓展"Flutter"

  • 按照官方教程,创建项目:codelabs.developers.google.com/codelabs/fl...

  • PS: 项目名称只能由"小写字母&数字&下划线"组合

  • PS: 命令行创建项目也可以【flutter create --platform=windows】如果不指定platform选项,默认所有系统都将会被创建

  • CheckList: 项目结构(这里没有指定platform, 所有系统都将会被创建)

Step7: 解决项目报错

  • 完成step6,我们应该"git init",记录我们的变更操作

  • 报错:main.dart 中告诉我们有两个依赖无法识别

  • 依赖命令指南:docs.flutter.dev/packages-an...

  • 运行 【flutter pub add english_words provider】

  • CheckList: 运行【flutter analyze】(其实这个操作vscode会自动执行,你的代码行没有标红则表示没有问题)

Step8: 运行my_first_flutter

  • codelabs.developers.google.com/codelabs/fl...

  • vscode 打开main.dart 文件

  • 【F5】执行dart,等待30s左右

  • 恭喜你!你的flutter desktop成功运行

  • PS: 首次启动时间较久,但热更新很快(200ms左右)

  • CheckList:

写在最后

写flutter 开发者大多数都是由原生移动端(Android/Swift)转过来的,所以一些flutter 的技术文档

补充事项

配置Flutter 依赖镜像源【解决下载缓慢问题】

  • PUB_HOSTED_URL → Dart依赖包地址

  • FLUTTER_STORAGE_BASE_URL → Flutter依赖文件地址

一些国内镜像地址 (记得在前面加上https:// )

不安装Android Studio 配置Flutter环境

Android Studio体积还挺大(包含安卓虚拟机),搞桌面端可以不安装AS,直接下载配置下 Command line tools(developer.android.google.cn/studio

创建一个类似于这样的目录层级 D:\Coding\sdk\cmdline-tools\latest\bin,把解压后的文件全复制到里面去。接着新建 ANDROID_HOME 环境变量,值:D:\Coding\sdk,修改 PATH 环境变量,新增下述三个路径:

  • %ANDROID_HOME%\cmdline-tools
  • %ANDROID_HOME%\build-tools
  • %ANDROID_HOME%\platform-tools

保存后,新开一个命令输入 sdkmanager.bat --list 可以查看都有哪些包及版本:

直接下 build-tools;30.0.2 + platform-tools,命令行键入:sdkmanager.bat build-tools;30.0.2 platform-tools,等待安装完成,然后运行 flutter doctor 验证。

对于小白的flutter技术文档

  1. 官方first教程 codelabs.developers.google.com/codelabs/fl...

  2. vscode 插件推荐 juejin.cn/post/723663...

  3. 国内flutter开源组织 github.com/leanflutter

  4. flutter 中文文档 flutter.cn/about

  5. Learning Dart as a JavaScript developer dart.cn/guides/lang...

  6. 官方flutter desktop demo github.com/flutter/sam...

  7. Flutter Windows Desktop从Create到Run详解 juejin.cn/post/707604...

相关推荐
一斤代码8 分钟前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子11 分钟前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年13 分钟前
从前端转go开发的学习路线
前端·学习·golang
中微子43 分钟前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina1 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路2 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说2 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409192 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding2 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜2 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui