设置与试用 | Flutter 框架

了解如何使用 VS Code 设置您的 Flutter 开发环境并试用 Flutter 的开发者体验。

本页上的说明已配置为涵盖在 Windows 设备上安装和试用 Flutter。

如果你想遵循其他操作系统的说明，请选择以下之一。

为获得最顺畅的 Flutter 设置体验，请先安装以下工具。

设置 Linux 支持
如果你之前未在 Chromebook 上设置 Linux 支持，请开启 Linux 支持。
如果你已经开启了 Linux 支持，请按照解决 Linux 问题的说明进行更新。
下载并安装先决软件包
使用 apt-get 或你喜欢的安装机制，安装以下软件包的最新版本
- curl
- git
- unzip
- xz-utils
- zip
- libglu1-mesa
如果你想使用 apt-get，请使用以下命令安装这些软件包
```
sudo apt-get update -y && sudo apt-get upgrade -y
sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa
```
下载并安装 Visual Studio Code
要快速安装 Flutter，然后编辑和调试您的应用，请安装并设置 Visual Studio Code。

安装 Xcode 命令行工具
下载 Xcode 命令行工具以访问 Flutter 依赖的命令行工具，包括 Git。
要下载这些工具，请在你喜欢的终端中运行以下命令
```
xcode-select --install
```
如果你尚未安装这些工具，将弹出一个对话框，确认你是否要安装它们。单击安装，安装完成后，单击完成。
下载并安装 Visual Studio Code
要快速安装 Flutter，然后编辑和调试您的应用，请安装并设置 Visual Studio Code。

安装适用于 Windows 的 Git
下载并安装最新版适用于 Windows 的 Git。
有关安装或故障排除 Git 的帮助，请参阅 Git 文档。
下载并安装 Visual Studio Code
要快速安装 Flutter，然后编辑和调试您的应用，请安装并设置 Visual Studio Code。

下载并安装先决软件包
使用你偏好的包管理器或机制，安装以下软件包的最新版本
- curl
- git
- unzip
- xz-utils
- zip
- libglu1-mesa
在基于 Debian 的发行版（如 Ubuntu）上，使用 apt-get，请使用以下命令安装这些软件包
```
sudo apt-get update -y && sudo apt-get upgrade -y
sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa
```
下载并安装 Visual Studio Code
要快速安装 Flutter，然后编辑和调试您的应用，请安装并设置 Visual Studio Code。

现在您已安装 Git 和 VS Code，请按照以下步骤使用 VS Code 安装和设置 Flutter。

启动 VS Code
如果 VS Code 未打开，请通过 Spotlight 搜索或从安装目录手动打开它来打开 VS Code。
将 Flutter 扩展添加到 VS Code
要将 Dart 和 Flutter 扩展添加到 VS Code，请访问Flutter 扩展的市场页面，然后点击安装。如果浏览器提示您，请允许它打开 VS Code。
使用 VS Code 安装 Flutter
1. 在 VS Code 中打开命令面板。
  转到视图>命令面板或按Cmd/Ctrl + Shift + P。
2. 在命令面板中，键入 flutter。
3. 选择Flutter: 新建项目。
4. VS Code 会提示您在计算机上定位 Flutter SDK。选择下载 SDK。
5. 当显示选择 Flutter SDK 文件夹对话框时，选择你想要安装 Flutter 的位置。
6. 点击克隆 Flutter。
  在下载 Flutter 时，VS Code 会显示此弹出通知
```
Downloading the Flutter SDK. This may take a few minutes.
```
  此下载需要几分钟时间。如果您怀疑下载已卡住，请点击取消，然后重新开始安装。
7. 点击添加 SDK 到 PATH。
  成功时，会显示通知
```
The Flutter SDK was added to your PATH
```
8. VS Code 可能会显示 Google Analytics 通知。
  如果你同意，点击确定。
9. 确保 Flutter 在所有终端中都可用
  1. 关闭，然后重新打开所有终端窗口。
  2. 重新启动 VS Code。
验证您的设置
要确保您已正确安装 Flutter，请在您偏好的终端中运行 flutter doctor -v。
如果命令未找到或出现错误，请查看Flutter 安装疑难解答。

现在您已设置好 VS Code 和 Flutter，是时候创建一个应用并试用 Flutter 开发了！

创建一个新的 Flutter 应用
1. 在 VS Code 中打开命令面板。
  转到视图>命令面板或按Cmd/Ctrl + Shift + P。
2. 在命令面板中，开始键入 flutter:。
  VS Code 应该会显示来自 Flutter 插件的命令。
3. 选择 Flutter: New Project 命令。
  您的操作系统或 VS Code 可能会请求访问您的文档，请同意以继续下一步。
4. 选择 Application 模板。
  VS Code 应该会提示您选择哪个 Flutter 模板？。选择Application 来引导一个简单的计数器应用。
5. 为新应用文件夹创建或选择父目录。
  应该会出现一个文件对话框。
  1. 选择或创建您想要创建项目的父目录。
  2. 要确认您的选择，请点击选择一个文件夹来创建项目。
6. 为您的应用输入名称。
  VS Code 应该会提示您输入新应用的名称。输入 trying_flutter 或类似的 小写_带下划线 名称。要确认您的选择，请按 Enter。
7. 等待项目初始化完成。
  任务进度通常会显示在右下角的通知中，也可以从Output面板访问。
8. 打开 lib 目录，然后打开 main.dart 文件。
  如果您想知道代码的每个部分的作用，请查看文件中前面的注释。
在 Web 上运行您的应用
虽然 Flutter 应用可以在许多平台上运行，但请尝试在 Web 上运行您的新应用。
1. 在 VS Code 中打开命令面板。
  转到视图>命令面板或按Cmd/Ctrl + Shift + P。
2. 在命令面板中，开始键入 flutter:。
  VS Code 应该会显示来自 Flutter 插件的命令。
3. 选择 Flutter: Select Device 命令。
4. 在Select Device提示中，选择Chrome。
5. 运行或开始调试您的应用。
  转到Run > Start Debugging 或按 F5。
  flutter run 用于构建和启动您的应用，然后会打开一个新的 Chrome 实例并开始运行您新创建的应用。
尝试热重载
Flutter 提供了一个快速的开发周期，具有有状态热重载功能，可以在不重新启动或丢失应用状态的情况下重新加载实时运行的应用的代码。
您可以更改应用的源代码，在 VS Code 中运行热重载命令，然后在运行的应用中看到更改。
1. 在运行的应用中，尝试通过单击按钮来多次增加计数器。
2. 在应用仍在运行时，对 lib/main.dart 文件进行更改。
  将 _incrementCounter 方法中的 _counter++ 行更改为递减 _counter 字段。
  dart
```
setState(() {
  // ...
  _counter++;
  _counter--;
});
```
3. 保存您的更改（File > Save All）或点击Hot Reload 按钮。
  Flutter 在不丢失任何现有状态的情况下更新运行的应用。请注意，现有值保持不变。
4. 再次尝试单击按钮。请注意，值会递减而不是递增。
探索 Flutter 侧边栏
Flutter 插件为 VS Code 添加了一个专用的侧边栏，用于管理 Flutter 调试会话和设备，查看代码和 widget 的大纲，以及访问 Dart 和 Flutter DevTools。
1. 如果您的应用未运行，请重新开始调试。
  转到Run > Start Debugging 或按 F5。
2. 在 VS Code 中打开 Flutter 侧边栏。
  可以通过 VS Code 侧边栏中的 Flutter 按钮打开它，或者通过命令面板运行 Flutter: Focus on Flutter Sidebar View 命令来打开它。
3. 如果您的应用未运行，请重新开始调试。
  转到Run > Start Debugging 或按 F5。
4. 在 Flutter 侧边栏的 DevTools 下，点击 Flutter Inspector 按钮。
  VS Code 中应该会打开一个单独的Widget Inspector面板。
  在 widget 检查器中，您可以查看应用的小部件树，查看每个小部件的属性和布局，等等。
5. 在 widget 检查器中，尝试点击顶层的 MyHomePage widget。
  它应该会打开其属性和布局的视图，并且 VS Code 编辑器应该会导航并聚焦到包含该 widget 的行。
6. 探索并尝试 widget 检查器和 Flutter 侧边栏中的其他功能。