【手把手教学】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

• 下载地址：visualstudio.microsoft.com/zh-hans/dow... 【选择社区版】

• 安装指南：learn.microsoft.com/zh-cn/visua...

• 安装指南中的"第 4 步 - 选择工作负载"，勾选"c++ 桌面开发"
  

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

• CheckList: Cmd 执行【flutter doctor】

---

中场休息

截止上面的五个步骤，你的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:// )

• Flutter社区： pub.flutter-io.cn & storage.flutter-io.cn

• 清华大学TUNA协会： mirrors.tuna.tsinghua.edu.cn/dart-pub & mirrors.tuna.tsinghua.edu.cn/flutter

• CNNIC： mirrors.cnnic.cn/dart-pub & mirrors.cnnic.cn/flutter

• 腾讯云开源镜像站： mirrors.cloud.tencent.com/dart-pub & mirrors.cloud.tencent.com/flutter

• 上海交大Linux用户组： dart-pub.mirrors.sjtug.sjtu.edu.cn & mirrors.sjtug.sjtu.edu.cn

不安装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...