跳转至正文

设置并试跑 Flutter

在你的设备上使用基于 Code OSS 的编辑器（例如 VS Code）配置 Flutter，并开始开发你的第一个多平台应用！

了解如何使用基于 Code OSS 的编辑器（例如 VS Code）配置 Flutter 开发环境并试跑 Flutter 的开发体验。

若你此前已使用 Flutter 开发过，或你更倾向使用其他编辑器或 IDE，可改为按照 自定义配置说明 操作。

确认你的开发平台

#

本页说明默认针对在 Windows 设备上安装并试跑 Flutter。

若要查看其他操作系统的说明，请选择以下选项之一。

下载必备软件

#

为了最顺畅地完成 Flutter 配置，请先安装以下工具。

  1. 配置 Linux 支持

    若你此前未在 Chromebook 上配置 Linux 支持，请参阅 开启 Linux 支持。

    若你已开启 Linux 支持，请按照 修复 Linux 相关问题 的说明确保其为最新状态。

  2. 下载并安装必备 package

    使用 apt-get 或你偏好的安装方式，安装以下 package 的最新版本：

    • curl
    • git
    • unzip
    • xz-utils
    • zip
    • libglu1-mesa

    若要使用 apt-get，请使用以下命令安装这些 package：

    sudo apt-get update -y && sudo apt-get upgrade -y
sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa

  3. 下载并安装 Visual Studio Code

    要快速安装 Flutter 并编辑、调试你的应用，请 安装并配置 Visual Studio Code。

    你也可以安装并使用任何其他支持 VS Code 扩展的基于 Code OSS 的编辑器。若你选择这样做，本文余下部分中的 VS Code 均指你所选的编辑器。

  1. 安装 git

    若你已安装 git，请跳至下一步：下载并安装 Visual Studio Code。

    在 Mac 上安装 git 有多种方式，但我们推荐使用 XCode。当你面向 iOS 或 macOS 构建时，这一点很重要。

    xcode-select --install

    若你尚未安装这些工具，应会弹出对话框确认你是否要安装。点击 Install，安装完成后点击 Done。

  2. 下载并安装 Visual Studio Code

    要快速安装 Flutter 并编辑、调试你的应用，请 安装并配置 Visual Studio Code。

    你也可以安装并使用任何其他支持 VS Code 扩展的基于 Code OSS 的编辑器。若你选择这样做，本文余下部分中的 VS Code 均指你所选的编辑器。

  1. 为 Windows 安装 Git

    下载并安装最新版本的 Git for Windows。

    有关安装或排查 Git 问题的帮助，请参阅 Git 文档。

  2. 下载并安装 Visual Studio Code

    要快速安装 Flutter 并编辑、调试你的应用，请 安装并配置 Visual Studio Code。

    你也可以安装并使用任何其他支持 VS Code 扩展的基于 Code OSS 的编辑器。若你选择这样做，本文余下部分中的 VS Code 均指你所选的编辑器。

  1. 下载并安装必备 package

    使用你偏好的 package 管理器或安装方式，安装以下 package 的最新版本：

    • curl
    • git
    • unzip
    • xz-utils
    • zip
    • libglu1-mesa

    在基于 Debian 且使用 apt-get 的发行版（例如 Ubuntu）上，请使用以下命令安装这些 package：

    sudo apt-get update -y && sudo apt-get upgrade -y
sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa

  2. 下载并安装 Visual Studio Code

    要快速安装 Flutter 并编辑、调试你的应用，请 安装并配置 Visual Studio Code。

    你也可以安装并使用任何其他支持 VS Code 扩展的基于 Code OSS 的编辑器。若你选择这样做，本文余下部分中的 VS Code 均指你所选的编辑器。

安装并配置 Flutter

#

现在你已经安装了 Git 和 VS Code，请按照以下步骤使用 VS Code 安装并配置 Flutter。

  1. 启动 VS Code

    若尚未打开，可通过 Spotlight 搜索或从安装目录手动打开 VS Code。

  2. 向 VS Code 添加 Flutter 扩展

    要向 VS Code 添加 Dart 和 Flutter 扩展，请访问 Flutter 扩展的市场页面，然后点击 Install。若浏览器提示，请允许其打开 VS Code。

  3. 使用 VS Code 安装 Flutter

    1. 在 VS Code 中打开命令面板。

      依次选择 View > Command Palette，或按 Cmd/Ctrl + Shift + P。

    2. 在命令面板中输入 flutter。

    3. 选择 Flutter: New Project。

    4. VS Code 会提示你在计算机上定位 Flutter SDK。选择 Download SDK。

    5. 当 Select Folder for Flutter SDK 对话框显示时，选择你希望安装 Flutter 的位置。

    6. 点击 Clone Flutter。

      下载 Flutter 时，VS Code 会显示以下弹出通知：

      Downloading the Flutter SDK. This may take a few minutes.

      此下载可能需要几分钟。若你怀疑下载已卡住，请点击 Cancel，然后重新开始安装。

    7. 点击 Add SDK to PATH。

      成功时，会显示以下通知：

      The Flutter SDK was added to your PATH

    8. VS Code 可能会显示 Google Analytics 通知。

      若你同意，请点击 OK。

    9. 要确保 Flutter 在所有终端中可用：

      1. Close, then reopen all terminal windows.
      2. 关闭并重新打开所有终端窗口。
      3. Restart VS Code.
      4. 重启 VS Code。

  4. 排查安装问题

    若安装过程中遇到任何问题，请参阅 Flutter 安装问题排查。

试跑 Flutter

#

现在你已经配置好了 VS Code 和 Flutter，是时候创建一个应用并体验 Flutter 开发了！

  1. 创建新的 Flutter 应用

    1. 在 VS Code 中打开命令面板。

      依次选择 View > Command Palette，或按 Cmd/Ctrl + Shift + P。

    2. 在命令面板中，开始输入 flutter:。

      VS Code 应会显示来自 Flutter 插件的命令。

    3. 选择 Flutter: New Project 命令。

      你的操作系统或 VS Code 可能会请求访问你的文档，请同意以继续下一步。

    4. 选择 Application 模板。

      VS Code 应会提示 Which Flutter template?。选择 Application 以引导创建一个简单的计数器应用。

    5. 创建或选择新应用文件夹的父目录。

      应会出现文件对话框。

      1. Select or create the parent directory where you want the project to be created.
      2. 选择或创建你希望创建项目的父目录。
      3. To confirm your selection, click Select a folder to create the project in.
      4. 要确认你的选择，请点击 Select a folder to create the project in。

    6. 为你的应用输入名称。

      VS Code 应会提示你输入新应用的名称。输入 trying_flutter 或类似的 lowercase_with_underscores 名称。要确认你的选择，请按 Enter。

    7. 等待项目初始化完成。

      任务进度通常会在右下角以通知形式显示，也可从 Output 面板查看。

    8. 打开 lib 目录，然后打开 main.dart 文件。

      若你想了解代码各部分的作用，可查看文件中前面的注释。

  2. 在 Web 上运行你的应用

    Flutter 应用可在许多平台上运行，请尝试在 Web 上运行你的新应用。

    1. 在 VS Code 中打开命令面板。

      依次选择 View > Command Palette，或按 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 实例并开始运行你刚创建的应用。

  3. 尝试热重载

    Flutter 提供带有 带状态的热重载 的快速开发周期，可在不重启应用、不丢失应用状态的情况下重新加载正在运行的应用的代码。

    你可以修改应用的源代码，在 VS Code 中运行热重载命令，然后在正在运行的应用中看到变化。

    1. 在正在运行的应用中，尝试多次点击 increment (+) 按钮以增加计数。

    2. 在应用仍在运行时，修改 lib/main.dart 文件。

      将 _incrementCounter 方法中的 _counter++ 行改为递减 _counter 字段。

      dart
      setState(() {
  // ...
  _counter++;
  _counter--;
});

    3. 保存你的更改（File > Save All），或点击 Hot Reload hot reload icon 按钮。

      Flutter 会更新正在运行的应用且不会丢失任何现有状态。请注意现有数值保持不变。

    4. 再次尝试点击 increment (+) 按钮。请注意数值会减少而不是增加。

  4. 探索 Flutter 侧边栏

    Flutter 插件会在 VS Code 中添加专用侧边栏，用于管理 Flutter 调试会话和设备、查看代码和 widget 大纲，以及访问 Dart 和 Flutter DevTools。

    1. 若你的应用未在运行，请再次开始调试。

      依次选择 Run > Start Debugging，或按 F5。

    2. 在 VS Code 中打开 Flutter 侧边栏。

      可通过 VS Code 侧边栏中的 Flutter Flutter logo 按钮打开，或在命令面板中运行 Flutter: Focus on Flutter Sidebar View 命令打开。

    3. 在 Flutter 侧边栏的 DevTools 下，点击 Flutter Inspector 按钮。

      VS Code 中应会打开单独的 Widget Inspector 面板。

      在 widget inspector 中，你可以查看应用的 widget 树、查看每个 widget 的属性和布局等。

    4. 在 widget inspector 中，尝试点击顶层的 MyHomePage widget。

      应会打开其属性和布局视图， VS Code 编辑器应会导航并聚焦到包含该 widget 的行。

    5. 在 widget inspector 和 Flutter 侧边栏中探索并尝试其他功能。

继续你的 Flutter 之旅

#

恭喜！ 现在你已经安装并试跑了 Flutter，请按照 Flutter 学习路径 继续学习，为 其他目标平台 配置开发环境，或探索以下资源以继续你的 Flutter 学习之旅。

Build for other platforms
面向其他平台构建
Learn Flutter development
学习 Flutter 开发
Stay up to date with Flutter
及时了解 Flutter 动态

除非另有说明，本文档之所提及适用于 Flutter 3.44.0 版本。本页面最后更新时间：2026-06-04。查看文档源码 或者 为本页面内容提出建议。