设置并试用 Flutter

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

如果您之前使用过 Flutter 进行开发，或者您更喜欢使用不同的编辑器或 IDE，您可以遵循自定义设置说明。

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

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

Windows

macOS

Linux

ChromeOS

为了获得最流畅的 Flutter 设置，请先安装以下工具。

1. 设置 Linux 支持

   如果你之前未在 Chromebook 上设置 Linux 支持，请开启 Linux 支持。

   如果你已经开启了 Linux 支持，请按照解决 Linux 问题的说明进行更新。

2. 下载并安装先决软件包

   使用 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
   

   content_copy

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
   

   content_copy

   如果你尚未安装这些工具，将弹出一个对话框，确认你是否要安装它们。单击 安装，安装完成后，单击 完成。

2. 下载并安装 Visual Studio Code

   要快速安装 Flutter，然后编辑和调试您的应用，安装并设置 Visual Studio Code。

   您也可以安装并使用任何其他支持 VS Code 扩展的基于 Code OSS 的编辑器。如果您选择这样做，在本文的其余部分，请假定 VS Code 指的是您选择的编辑器。

1. 安装适用于 Windows 的 Git

   下载并安装最新版适用于 Windows 的 Git。

   有关安装或故障排除 Git 的帮助，请参阅 Git 文档。

2. 下载并安装 Visual Studio Code

   要快速安装 Flutter，然后编辑和调试您的应用，安装并设置 Visual Studio Code。

   您也可以安装并使用任何其他支持 VS Code 扩展的基于 Code OSS 的编辑器。如果您选择这样做，在本文的其余部分，请假定 VS Code 指的是您选择的编辑器。

1. 下载并安装先决软件包

   使用你偏好的包管理器或机制，安装以下软件包的最新版本

   • 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
   

   content_copy

2. 下载并安装 Visual Studio Code

   要快速安装 Flutter，然后编辑和调试您的应用，安装并设置 Visual Studio Code。

   您也可以安装并使用任何其他支持 VS Code 扩展的基于 Code OSS 的编辑器。如果您选择这样做，在本文的其余部分，请假定 VS Code 指的是您选择的编辑器。

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

1. 启动 VS Code

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

2. 将 Flutter 扩展添加到 VS Code

   要将 Dart 和 Flutter 扩展添加到 VS Code，请访问Flutter 扩展市场页面，然后单击安装。如果您的浏览器提示，请允许它打开 VS Code。

3. 使用 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.
      

      content_copy

      此下载需要几分钟。如果您怀疑下载已挂起，请单击取消，然后再次开始安装。

   7. 点击添加 SDK 到 PATH。

      成功时，会显示通知

      The Flutter SDK was added to your PATH
      

      content_copy

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

      如果你同意，点击确定。

   9. 为了确保 Flutter 在所有终端中可用

      1. 关闭，然后重新打开所有终端窗口。
      2. 重新启动 VS Code。

4. 解决安装问题

   如果在安装过程中遇到任何问题，请查看Flutter 安装故障排除。

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

1. 创建一个新的 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 或类似的 lowercase_with_underscores 名称。要确认您的选择，请按 Enter。

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

      任务进度通常会在右下角显示通知，也可以从 输出 面板访问。

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

      如果您想了解代码的每个部分的作用，请查看文件中的前面注释。

2. 在 Web 上运行您的应用

   虽然 Flutter 应用可以在许多平台上运行，但请尝试在 Web 上运行您的新应用。

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

      转到视图>命令面板或按Cmd/Ctrl + Shift + P。

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

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

   3. 选择 Flutter: 选择设备 命令。

   4. 在 选择设备 提示中，选择 Chrome。

   5. 运行或开始调试您的应用。

      转到 运行 > 开始调试 或按 F5。

      flutter run 用于构建和启动您的应用，然后 Chrome 的一个新实例应该会打开并开始运行您新创建的应用。

3. 尝试热重载

   Flutter 提供了一个快速开发周期，具有 状态热重载，能够在不重启或丢失应用状态的情况下重新加载正在运行的应用的代码。

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

   1. 在正在运行的应用中，尝试通过单击 按钮几次来增加计数器。

   2. 在您的应用仍在运行时，在 lib/main.dart 文件中进行更改。

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

      dart

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

      content_copy

   3. 保存您的更改 (文件 > 保存全部) 或单击 热重载 按钮。

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

   4. 再次单击 按钮。请注意，值会减少而不是增加。

4. 探索 Flutter 侧边栏

   Flutter 插件为 VS Code 添加了一个专用的侧边栏，用于管理 Flutter 调试会话和设备，查看代码和组件的提纲，以及访问 Dart 和 Flutter DevTools。

   1. 如果您的应用未运行，请再次开始调试它。

      转到 运行 > 开始调试 或按 F5。

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

      您可以通过单击 VS Code 侧边栏中的 Flutter 按钮或通过运行 Flutter: 聚焦 Flutter 侧边栏视图 命令从命令面板打开它。

   3. 在 Flutter 侧边栏中，在 DevTools 下方，单击 Flutter Inspector 按钮。

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

      在组件检查器中，您可以查看应用的组件树，查看每个组件的属性和布局等等。

   4. 在组件检查器中，尝试单击顶级 MyHomePage 组件。

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

   5. 探索并尝试组件检查器和 Flutter 侧边栏中的其他功能。

恭喜！ 现在您已经安装并试用了 Flutter，请按照 构建您的第一个应用 中的 codelab，为 其他目标平台 设置开发环境，或者探索这些资源以继续您的 Flutter 学习之旅。

为其他平台构建

• 目标 Android
• 目标 iOS
• 面向 macOS
• 面向 Windows
• 面向 Linux

学习 Flutter 开发

• 编写你的第一个应用
• 学习基础知识
• 发现 Flutter 组件
• 探索学习资源
• 学习 Dart 编程 open_in_new

保持 Flutter 更新

• 更新 Flutter
• 了解最新动态
• 查看博客 open_in_new
• 在 YouTube 上订阅 open_in_new
• 在 Bluesky 上关注 open_in_new