设置并试用 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 扩展市场页面，然后单击 Install（安装）。如果浏览器提示，请允许其打开 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（Flutter：新建项目） 命令。

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

   4. 选择 Application（应用） 模板。

      VS Code 会提示您 Which Flutter template?（使用哪个 Flutter 模板？）。选择 Application（应用） 以引导一个简单的计数器应用。

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

      应该会出现一个文件对话框。

      1. 选择或创建您想要在其中创建项目的父目录。
      2. 要确认您的选择，请单击 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 中打开命令面板。

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

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

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

   3. 选择 Flutter: Select Device（Flutter：选择设备） 命令。

   4. 在 Select Device（选择设备） 提示中，选择 Chrome。

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

      前往 Run（运行） > Start Debugging（开始调试） 或按 F5。

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

3. 尝试热重载 (Hot Reload)

   Flutter 提供了一个快速的开发周期，即 有状态热重载 (stateful hot reload)，它能够刷新正在运行的应用代码，而无需重启或丢失应用状态。

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

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

   2. 在应用保持运行的同时，对 lib/main.dart 文件进行更改。

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

      dart

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

      content_copy

   3. 保存您的更改（File（文件） > Save All（保存全部））或单击 Hot Reload（热重载） 按钮。

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

   4. 尝试再次单击 按钮。注意，数值现在递减而不是递增。

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（Flutter：聚焦于 Flutter 侧边栏视图） 命令打开。

   3. 在 Flutter 侧边栏的 DevTools 下，单击 Flutter Inspector（Flutter 检查器） 按钮。

      VS Code 中应该会打开一个单独的 Widget Inspector（组件检查器） 面板。

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

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

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

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

恭喜！ 现在您已经安装并试用了 Flutter，请遵循 Flutter 学习路径，为其他目标平台设置开发环境，或者浏览以下部分资源以继续您的 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