# 设置并试跑 Flutter
> 在你的设备上使用基于 Code OSS 的编辑器（例如 VS Code）配置 Flutter，并开始开发你的第一个多平台应用！
Learn how to use any Code OSS-based editor, such as VS Code,
to set up your Flutter development environment and
test drive Flutter's developer experience.
了解如何使用基于 Code OSS 的编辑器（例如 VS Code）
配置 Flutter 开发环境并
试跑 Flutter 的开发体验。
If you've developed with Flutter before,
or you prefer to use a different editor or IDE,
you can follow the [custom setup instructions][] instead.
若你此前已使用 Flutter 开发过，
或你更倾向使用其他编辑器或 IDE，
可改为按照 [自定义配置说明][custom setup instructions] 操作。
:::note 你将达成的目标
- Install the software prerequisites for Flutter.
安装 Flutter 的软件必备项。
- Use VS Code to download and install Flutter.
使用 VS Code 下载并安装 Flutter。
- Create a new Flutter app from a sample template.
从示例模板创建新的 Flutter 应用。
- Try out Flutter development features like stateful hot reload.
体验 Flutter 开发功能，例如 stateful hot reload。
:::
[custom setup instructions]: /install/custom
## Confirm your development platform {: #dev-platform}
## 确认你的开发平台
The instructions on this page are configured to cover
installing and trying out Flutter on a **Windows**{:.selected-os-text} device.
本页说明默认针对在 **Windows**{:.selected-os-text} 设备上安装并试跑 Flutter。
If you'd like to follow the instructions for a different OS,
please select one of the following.
若要查看其他操作系统的说明，
请选择以下选项之一。
## Download prerequisite software {: #download-prerequisites}
## 下载必备软件
For the smoothest Flutter setup,
first install the following tools.
为了最顺畅地完成 Flutter 配置，
请先安装以下工具。
1. Set up Linux support
配置 Linux 支持
If you haven't set up Linux support on your Chromebook before,
[Turn on Linux support][chromeos-linux].
若你此前未在 Chromebook 上配置 Linux 支持，
请参阅 [开启 Linux 支持][chromeos-linux]。
If you've already turned on Linux support,
ensure it's up to date following the
[Fix problems with Linux][chromeos-linux-update] instructions.
若你已开启 Linux 支持，
请按照 [修复 Linux 相关问题][chromeos-linux-update] 的说明确保其为最新状态。
1. Download and install prerequisite packages
下载并安装必备 package
Using `apt-get` or your preferred installation mechanism,
install the latest versions of the following packages:
使用 `apt-get` 或你偏好的安装方式，
安装以下 package 的最新版本：
- `curl`
- `git`
- `unzip`
- `xz-utils`
- `zip`
- `libglu1-mesa`
If you want to use `apt-get`,
install these packages using the following commands:
若要使用 `apt-get`，
请使用以下命令安装这些 package：
```console
$ sudo apt-get update -y && sudo apt-get upgrade -y
$ sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa
```
1. Download and install Visual Studio Code
下载并安装 Visual Studio Code
To quickly install Flutter, then edit and debug your apps,
[install and set up Visual Studio Code][vscode-install].
要快速安装 Flutter 并编辑、调试你的应用，
请 [安装并配置 Visual Studio Code][vscode-install]。
You can instead install and use any other Code OSS-based editor
that supports VS Code extensions.
If you choose to do so, for the rest of this article,
assume VS Code refers to the editor of your choice.
你也可以安装并使用任何其他支持 VS Code 扩展的
基于 Code OSS 的编辑器。
若你选择这样做，本文余下部分中的 VS Code
均指你所选的编辑器。
{: .steps .chromeos-only}
1. Install git
安装 git
**If you already have git installed, skip to the next
step: Download and install Visual Studio Code.**
**若你已安装 git，请跳至下一步：下载并安装 Visual Studio Code。**
There are a few ways to install git on your Mac,
but the way we recommend is by using XCode.
This will be important when you target your
builds for iOS or macOS.
在 Mac 上安装 git 有多种方式，
但我们推荐使用 XCode。
当你面向 iOS 或 macOS 构建时，这一点很重要。
```console
$ xcode-select --install
```
If you haven't installed the tools already,
a dialog should open that confirms you'd like to install them.
Click **Install**, then once the installation is complete, click **Done**.
若你尚未安装这些工具，
应会弹出对话框确认你是否要安装。
点击 **Install**，安装完成后点击 **Done**。
1. Download and install Visual Studio Code
下载并安装 Visual Studio Code
To quickly install Flutter, then edit and debug your apps,
[install and set up Visual Studio Code][vscode-install].
要快速安装 Flutter 并编辑、调试你的应用，
请 [安装并配置 Visual Studio Code][vscode-install]。
You can instead install and use any other Code OSS-based editor
that supports VS Code extensions.
If you choose to do so, for the rest of this article,
assume VS Code refers to the editor of your choice.
你也可以安装并使用任何其他支持 VS Code 扩展的
基于 Code OSS 的编辑器。
若你选择这样做，本文余下部分中的 VS Code
均指你所选的编辑器。
{: .steps .macos-only}
1. Install Git for Windows
为 Windows 安装 Git
Download and install the latest version of [Git for Windows][].
下载并安装最新版本的 [Git for Windows][]。
For help installing or troubleshooting Git,
reference the [Git documentation][git-install].
有关安装或排查 Git 问题的帮助，
请参阅 [Git 文档][git-install]。
1. Download and install Visual Studio Code
下载并安装 Visual Studio Code
To quickly install Flutter, then edit and debug your apps,
[install and set up Visual Studio Code][vscode-install].
要快速安装 Flutter 并编辑、调试你的应用，
请 [安装并配置 Visual Studio Code][vscode-install]。
You can instead install and use any other Code OSS-based editor
that supports VS Code extensions.
If you choose to do so, for the rest of this article,
assume VS Code refers to the editor of your choice.
你也可以安装并使用任何其他支持 VS Code 扩展的
基于 Code OSS 的编辑器。
若你选择这样做，本文余下部分中的 VS Code
均指你所选的编辑器。
{: .steps .windows-only}
1. Download and install prerequisite packages
下载并安装必备 package
Using your preferred package manager or mechanism,
install the latest versions of the following packages:
使用你偏好的 package 管理器或安装方式，
安装以下 package 的最新版本：
- `curl`
- `git`
- `unzip`
- `xz-utils`
- `zip`
- `libglu1-mesa`
On Debian-based distros with `apt-get`, such as Ubuntu,
install these packages using the following commands:
在基于 Debian 且使用 `apt-get` 的发行版（例如 Ubuntu）上，
请使用以下命令安装这些 package：
```console
$ sudo apt-get update -y && sudo apt-get upgrade -y
$ sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa
```
1. Download and install Visual Studio Code
下载并安装 Visual Studio Code
To quickly install Flutter, then edit and debug your apps,
[install and set up Visual Studio Code][vscode-install].
要快速安装 Flutter 并编辑、调试你的应用，
请 [安装并配置 Visual Studio Code][vscode-install]。
You can instead install and use any other Code OSS-based editor
that supports VS Code extensions.
If you choose to do so, for the rest of this article,
assume VS Code refers to the editor of your choice.
你也可以安装并使用任何其他支持 VS Code 扩展的
基于 Code OSS 的编辑器。
若你选择这样做，本文余下部分中的 VS Code
均指你所选的编辑器。
{: .steps .linux-only}
[chromeos-linux]: https://support.google.com/chromebook/answer/9145439
[chromeos-linux-update]: https://support.google.com/chromebook/answer/9145439?hl=en#:~:text=Fix%20problems%20with%20Linux
[Git for Windows]: https://git-scm.com/downloads/win
[git-install]: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
[vscode-install]: https://code.visualstudio.com/docs/setup/setup-overview
## Install and set up Flutter {: #install}
## 安装并配置 Flutter
Now that you've installed Git and VS Code,
follow these steps to use VS Code to install and set up Flutter.
现在你已经安装了 Git 和 VS Code，
请按照以下步骤使用 VS Code 安装并配置 Flutter。
:::note 手动下载
If you prefer to manually install Flutter,
follow the instructions in [Install Flutter manually][].
若你更倾向手动安装 Flutter，
请按照 [手动安装 Flutter][Install Flutter manually] 中的说明操作。
:::
1. Launch VS Code
启动 VS Code
If not already open, open VS Code by searching for it with Spotlight
or opening it manually from the directory where it's installed.
若尚未打开，可通过 Spotlight 搜索或从安装目录手动打开 VS Code。
1. Add the Flutter extension to VS Code
向 VS Code 添加 Flutter 扩展
To add the Dart and Flutter extensions to VS Code,
visit the [Flutter extension's marketplace page][flutter-vscode],
then click **Install**.
If prompted by your browser, allow it to open VS Code.
要向 VS Code 添加 Dart 和 Flutter 扩展，
请访问 [Flutter 扩展的市场页面][flutter-vscode]，
然后点击 **Install**。
若浏览器提示，请允许其打开 VS Code。
1. Install Flutter with VS Code
使用 VS Code 安装 Flutter
1. Open the command palette in VS Code.
在 VS Code 中打开命令面板。
Go to **View** > **Command Palette**
or press Cmd/Ctrl +
Shift + P.
依次选择 **View** > **Command Palette**，
或按 Cmd/Ctrl +
Shift + P。
1. In the command palette, type `flutter`.
在命令面板中输入 `flutter`。
1. Select **Flutter: New Project**.
选择 **Flutter: New Project**。
1. VS Code prompts you to locate the Flutter SDK on your computer.
Select **Download SDK**.
VS Code 会提示你在计算机上定位 Flutter SDK。
选择 **Download SDK**。
1. When the **Select Folder for Flutter SDK** dialog displays,
choose where you want to install Flutter.
当 **Select Folder for Flutter SDK** 对话框显示时，
选择你希望安装 Flutter 的位置。
1. Click **Clone Flutter**.
点击 **Clone Flutter**。
While downloading Flutter, VS Code displays this pop-up notification:
下载 Flutter 时，VS Code 会显示以下弹出通知：
```console
Downloading the Flutter SDK. This may take a few minutes.
```
This download takes a few minutes.
If you suspect that the download has hung, click **Cancel** then
start the installation again.
此下载可能需要几分钟。
若你怀疑下载已卡住，请点击 **Cancel**，
然后重新开始安装。
1. Click **Add SDK to PATH**.
点击 **Add SDK to PATH**。
When successful, a notification displays:
成功时，会显示以下通知：
```console
The Flutter SDK was added to your PATH
```
1. VS Code might display a Google Analytics notice.
VS Code 可能会显示 Google Analytics 通知。
If you agree, click **OK**.
若你同意，请点击 **OK**。
1. To ensure that Flutter is available in all terminals:
要确保 Flutter 在所有终端中可用：
1. Close, then reopen all terminal windows.
关闭并重新打开所有终端窗口。
1. Restart VS Code.
重启 VS Code。
{:type="a"}
:::note
The VS Code setup process might check for Android Studio, which can result in a warning if it's not installed.
You can safely ignore this if you're targeting other platforms (like web, iOS, or macOS), as the installation will still succeed.
Afterward, run `flutter doctor` to verify your installation.
VS Code 配置过程可能会检查 Android Studio，若未安装可能会显示警告。
若你面向其他平台（例如 Web、iOS 或 macOS），可安全忽略此警告，安装仍会成功。
之后请运行 `flutter doctor` 验证你的安装。
:::
1. Troubleshoot installation issues
排查安装问题
If you encounter any issues during installation,
check out [Flutter installation troubleshooting][troubleshoot].
若安装过程中遇到任何问题，
请参阅 [Flutter 安装问题排查][troubleshoot]。
{:.steps}
[Install Flutter manually]: /install/manual
[flutter-vscode]: https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[troubleshoot]: /install/troubleshoot
## Test drive Flutter {: #test-drive}
## 试跑 Flutter
Now that you've set up VS Code and Flutter,
it's time to create an app and try out Flutter development!
现在你已经配置好了 VS Code 和 Flutter，
是时候创建一个应用并体验 Flutter 开发了！
1. Create a new Flutter app
创建新的 Flutter 应用
1. Open the command palette in VS Code.
在 VS Code 中打开命令面板。
Go to **View** > **Command Palette**
or press Cmd/Ctrl +
Shift + P.
依次选择 **View** > **Command Palette**，
或按 Cmd/Ctrl +
Shift + P。
1. In the command palette, start typing `flutter:`.
在命令面板中，开始输入 `flutter:`。
VS Code should surface commands from the Flutter plugin.
VS Code 应会显示来自 Flutter 插件的命令。
1. Select the **Flutter: New Project** command.
选择 **Flutter: New Project** 命令。
Your OS or VS Code might ask for access to your documents,
agree to continue to the next step.
你的操作系统或 VS Code 可能会请求访问你的文档，
请同意以继续下一步。
1. Choose the **Application** template.
选择 **Application** 模板。
VS Code should prompt you with **Which Flutter template?**.
Choose **Application** to bootstrap a simple counter app.
VS Code 应会提示 **Which Flutter template?**。
选择 **Application** 以引导创建一个简单的计数器应用。
1. Create or select the parent directory for your new app's folder.
创建或选择新应用文件夹的父目录。
A file dialog should appear.
应会出现文件对话框。
1. Select or create the parent directory where
you want the project to be created.
选择或创建你希望创建项目的父目录。
1. To confirm your selection,
click **Select a folder to create the project in**.
要确认你的选择，请点击 **Select a folder to create the project in**。
1. Enter a name for your app.
为你的应用输入名称。
VS Code should prompt you to enter a name for your new app.
Enter `trying_flutter` or a similar `lowercase_with_underscores` name.
To confirm your selection, press Enter.
VS Code 应会提示你输入新应用的名称。
输入 `trying_flutter` 或类似的 `lowercase_with_underscores` 名称。
要确认你的选择，请按 Enter。
1. Wait for project initialization to complete.
等待项目初始化完成。
Task progress is often surfaced as a notification in the bottom right
and can also be accessed from the **Output** panel.
任务进度通常会在右下角以通知形式显示，
也可从 **Output** 面板查看。
1. Open the `lib` directory, then the `main.dart` file.
打开 `lib` 目录，然后打开 `main.dart` 文件。
If you're curious about what each portion of the code does,
check out the preceding comments throughout the file.
若你想了解代码各部分的作用，
可查看文件中前面的注释。
1. Run your app on the web
在 Web 上运行你的应用
While Flutter apps can run on many platforms,
try running your new app on the web.
Flutter 应用可在许多平台上运行，
请尝试在 Web 上运行你的新应用。
1. Open the command palette in VS Code.
在 VS Code 中打开命令面板。
Go to **View** > **Command Palette**
or press Cmd/Ctrl +
Shift + P.
依次选择 **View** > **Command Palette**，
或按 Cmd/Ctrl +
Shift + P。
1. In the command palette, start typing `flutter:`.
在命令面板中，开始输入 `flutter:`。
VS Code should surface commands from the Flutter plugin.
VS Code 应会显示来自 Flutter 插件的命令。
1. Select the **Flutter: Select Device** command.
选择 **Flutter: Select Device** 命令。
1. From the **Select Device** prompt, select **Chrome**.
在 **Select Device** 提示中选择 **Chrome**。
1. Run or start debugging your app.
运行或开始调试你的应用。
Go to **Run** >
**Start Debugging** or press F5.
依次选择 **Run** >
**Start Debugging**，或按 F5。
`flutter run` is used to build and start your app,
then a new instance of Chrome should open and
start running your newly created app.
会使用 `flutter run` 构建并启动你的应用，
随后应会打开新的 Chrome 实例并开始运行你刚创建的应用。
1. Try hot reload
尝试热重载
Flutter offers a fast development cycle with **stateful hot reload**,
the ability to reload the code of a live running app without
restarting or losing app state.
Flutter 提供带有 **带状态的热重载** 的快速开发周期，
可在不重启应用、不丢失应用状态的情况下
重新加载正在运行的应用的代码。
You can change your app's source code,
run the hot reload command in VS Code,
then see the change in your running app.
你可以修改应用的源代码，
在 VS Code 中运行热重载命令，
然后在正在运行的应用中看到变化。
1. In the running app, try adding to the counter a few times by
clicking the ![increment (+)][increment-button]{: .text-icon} button.
在正在运行的应用中，尝试多次点击
![increment (+)][increment-button]{: .text-icon} 按钮以增加计数。
1. With your app still running, make a change in the `lib/main.dart` file.
在应用仍在运行时，修改 `lib/main.dart` 文件。
Change the `_counter++` line in the `_incrementCounter` method
to instead decrement the `_counter` field.
将 `_incrementCounter` 方法中的 `_counter++` 行
改为递减 `_counter` 字段。
```dart diff
setState(() {
// ...
- _counter++;
+ _counter--;
});
```
1. Save your changes
(**File** > **Save All**) or
click the **Hot Reload** ![hot reload icon][]{: .text-icon} button.
保存你的更改
（**File** > **Save All**），或
点击 **Hot Reload** ![hot reload icon][]{: .text-icon} 按钮。
Flutter updates the running app without losing any existing state.
Notice the existing value stayed the same.
Flutter 会更新正在运行的应用且不会丢失任何现有状态。
请注意现有数值保持不变。
1. Try clicking the
![increment (+)][increment-button]{: .text-icon} button again.
Notice the value decreases instead of increases.
再次尝试点击
![increment (+)][increment-button]{: .text-icon} 按钮。
请注意数值会减少而不是增加。
1. Explore the Flutter sidebar
探索 Flutter 侧边栏
The Flutter plugin adds a dedicated sidebar to VS Code
for managing Flutter debug sessions and devices,
viewing an outline of your code and widgets,
as well as accessing the Dart and Flutter DevTools.
Flutter 插件会在 VS Code 中添加专用侧边栏，
用于管理 Flutter 调试会话和设备、
查看代码和 widget 大纲，
以及访问 Dart 和 Flutter DevTools。
1. If your app isn't running, start debugging it again.
若你的应用未在运行，请再次开始调试。
Go to **Run** >
**Start Debugging** or press F5.
依次选择 **Run** >
**Start Debugging**，或按 F5。
1. Open the Flutter sidebar in VS Code.
在 VS Code 中打开 Flutter 侧边栏。
Either open it with the Flutter ![Flutter logo][]{: .text-icon} button in
the VS Code sidebar or open it from the command palette by
running the **Flutter: Focus on Flutter Sidebar View** command.
可通过 VS Code 侧边栏中的 Flutter ![Flutter logo][]{: .text-icon} 按钮打开，
或在命令面板中运行 **Flutter: Focus on Flutter Sidebar View** 命令打开。
1. In the Flutter sidebar, under **DevTools**,
click the **Flutter Inspector** button.
在 Flutter 侧边栏的 **DevTools** 下，
点击 **Flutter Inspector** 按钮。
A separate **Widget Inspector** panel should open in VS Code.
VS Code 中应会打开单独的 **Widget Inspector** 面板。
In the widget inspector, you can view your app's widget tree,
view the properties and layout of each widget, and more.
在 widget inspector 中，你可以查看应用的 widget 树、
查看每个 widget 的属性和布局等。
1. In the widget inspector, try clicking the top-level `MyHomePage` widget.
在 widget inspector 中，尝试点击顶层的 `MyHomePage` widget。
A view of its properties and layout should open, and
the VS Code editor should navigate to and focus the line where
the widget was included.
应会打开其属性和布局视图，
VS Code 编辑器应会导航并聚焦到包含该 widget 的行。
1. Explore and try out other features in
the widget inspector and Flutter sidebar.
在 widget inspector 和 Flutter 侧边栏中探索并尝试其他功能。
{:.steps}
[increment-button]: /assets/images/docs/get-started/increment-button.png
[hot reload icon]: /assets/images/docs/get-started/hot-reload.svg
[Flutter logo]: /assets/images/branding/flutter/logo/square.svg
## Continue your Flutter journey {: #next-steps}
## 继续你的 Flutter 之旅
**Congratulations!**
Now that you've installed and tried out Flutter,
follow the [Flutter learning pathway][],
set up development for an [additional target platform][], or
explore some of these resources to continue your Flutter learning journey.
**恭喜！**
现在你已经安装并试跑了 Flutter，
请按照 [Flutter 学习路径][Flutter learning pathway] 继续学习，
为 [其他目标平台][additional target platform] 配置开发环境，
或探索以下资源以继续你的 Flutter 学习之旅。
[Flutter learning pathway]: /learn/pathway
[additional target platform]: /platform-integration#setup
