Windows 安装 Flutter 开发环境_vscode编辑器配置启动Flutter项目

此文档参照 Flutter 官网，并对配置过程中可能遇到的坑提供解决方案。

1 开发前准备

---

1.1 系统要求

• 操作系统：Windows 7 或更高版本 (64-bit)
• 磁盘空间：400 MB (不包括Android Studio的磁盘空间).
• 工具：Flutter 依赖 Git 命令行工具 Git for Windows 

1.2 获取 Flutter SDK

• 下载安装包：（吐槽，下载太慢了，解压太慢了，克隆太慢了。。。请看不到我，以免影响您对flutter的好感）

渠道1：官网下载最新 Flutter 安装包， 点击下载 

渠道2：Flutter github 项目中下载，下载安装包 

渠道3：想要更快速下载？推荐 gitee， 点击下载 

• 安装

将安装包 zip 解压到你想安装 Flutter SDK 的路径（如：D:\programs\flutter；注意，不要 将 flutter 安装到需要一些高权限的路径如 C:\Program Files\）

在安装目录下找到 flutter_console.bat，双击运行并启动 flutter命令行，接下来，就可以在 Flutter 命令行使用 flutter 命令了。

若电脑有保护程序，点击 更多信息 > 仍要运行 即可

1.3 添加环境变量

控制面板 > 用户账户 > 用户账户 > 更改我环境变量

① 为 Path 追加 flutter\bin 的全路径 (; 分隔符)

② 由于一些  flutter命令需要联网获取数据，如果在国内访问，很可能不会成功，所以还需要配置镜像

PUB_HOSTED_URL=https://pub.flutter-io.cn

FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

注意：此镜像为临时镜像，并不能保证一直可用，请参考 Using Flutter in China 获得有关镜像服务器的最新动态。

查看环境变量是否新建成功

打开 cmd，输入 echo %变量名%

重启 Windows 以应用此更改

运行 flutter doctor 查看是否安装成功

打开 cmd （Flutter 暂不支持第三方 shell（例 Git Bash ））并运行以下命令以查看是否需要安装任何依赖项来完成安装：

 flutter doctor

哈哈，你以为费了这么大劲之后肯定会运行成功吗？错了，本人就没有运行成功

不要灰心，不要气馁，把之前的安装包删掉，运行下面提供的 git clone 即可 ~

Error: The Flutter directory is not a clone of the GitHub project.
       The flutter tool requires Git in order to operate properly;
       to set up Flutter, run the following command:
       git clone -b stable https://github.com/flutter/flutter.git

然后再 flutter doctor，成功了 伙计 ~

该命令检查您的环境并在终端窗口中显示报告。

Dart SDK 已经在捆绑在 Flutter 里了，没有必要单独安装 Dart。

仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务

第一次运行任意一个 flutter 命令（如flutter doctor）时，都会自动下载所需依赖项并自行编译。以后再运行就会快得多。

你会看到在 flutter doctor 输出中， 如果你选择使用 IDE，官方提供了 IntelliJ IDEA，Android Studio 和 VS Code 的插件

（ 我用的是 VS Code 开发，所以可忽略 没有 Android Studio 的错误提示。下面详细介绍）

若安装了缺失的依赖，需要再次运行 flutter doctor 命令来验证依赖是否安装成功。

flutter 统计信息和崩溃报告会匿名上传，用于改进 Flutter 工具，我们可以在发送任何数据之前退出分析

flutter config --no-analytics并显示当前设置

然后执行 flutter config。 （请参阅 Google的隐私政策）

1.4 编辑器配置

我习惯使用 VS Code ，并且官方也提供了插件，还是很方便的。

Android Studio 的 Flutter Inspector 功能非常优秀，但是资源消耗太能了，自己衡量吧 ~

• 安装 VS Code  点击下载 VS Code，然后安装 Flutter 插件。

• 安装完成后重启 VS Code

2 创建第一个 Flutter 项目

---

2.1 创建一个名为 myapp 的应用

先运行 flutter_console.bat （若不运行，在创建项目时，会报找不到 Flutter SDK 的错误）

打开View>Command Palette命令面板 （快捷键 Ctrl+shift  P ），输入 flutter ，选择 Flutter: New Project （步骤如下）

1. 输入 flutter，然后选择 ‘Flutter: New Project’
2. 输入 Project 名称 myapp， 然后按回车键
3. 指定放置项目的位置，然后按蓝边框的 select a folder to creat the project in 按钮
4. 等待项目创建，并显示 main.dart 文件
5. 创建成功，并显示一个 Material 组件 的简单的演示应用程序

在项目目录中，您的应用程序的代码位于 lib/main.dart

2.2 运行应用程序

1. 确保在 VS Code 的右下角选择了目标设备
2. 按 F5 键或调用 Debug>Start Debugging，然后选择一个模拟器（在这里需要说一下，电脑若没安装模拟器，是没有可选项的，需要安一个 ）( flutter run 启动命令 )
3. 等待应用程序启动
4. 如果一切正常，在应用程序建成功后，您应该在您的设备或模拟器上看到应用程序:

2.3 体验热重载

开启 debug 模式

简单的对代码进行更改，然后 ctrl + s 或者 点击 小闪电 Hot Reload 按钮，即可在你的设备或模拟器上看到更改。

（代码格式化：右键单击并选择 Format Document （快捷键 ctrl + alt + F ））

（补充一个小技能，在终端 press `r` 可以热加载，press `R` 可以热重启）

'You have pushed the button this many times:'
// 更改为
'counts:'

愿你在这里有所收获 ~