第2讲：手把手搭建你的第一个Flutter开发环境

工欲善其事，必先利其器。让我们从零开始，构筑你的Flutter开发基石。

你好，欢迎回到《Flutter入门到精通》专栏。在第一讲中，我们深入探讨了为什么Flutter是跨平台开发的未来。从这一讲开始，我们将正式进入实战环节。第一步，就是搭建一个顺滑、无坑的开发环境。

本讲将作为你的终极环境配置指南，涵盖从安装到验证的每一步。请务必跟着操作，成功搭建属于你的Flutter“工坊”。

一、环境准备：选择你的“作战平台”

Flutter支持主流的操作系统： Windows、macOS 和 Linux。本教程将以 Windows 和 macOS 为例，Linux用户可参考macOS的步骤，大同小异。

硬件与软件要求

• 操作系统： Windows 10 或更高版本 (64-bit)；或 macOS (64-bit)；或 Linux (64-bit)。

• 磁盘空间： 至少 2.8 GB 可用空间（不包括IDE/工具）。

• 工具：

  • Windows： 需要 PowerShell 5.0 或更高版本（系统通常自带）。

  • macOS： 需要 Bash 终端。

• IDE： 推荐使用 Android Studio 或 VS Code，本教程会同时介绍。

二、分步搭建指南

请严格按照以下步骤操作。

步骤 1：安装 Flutter SDK

SDK（Software Development Kit）是Flutter的核心，包含了编译工具、库和命令行工具。

1. 下载 Flutter SDK

   • 访问 Flutter 官网的下载页面：https://flutter.dev/docs/get-started/install

   • 选择适用于你操作系统的安装包。

     • Windows: 下载 flutter_windows_<version>-stable.zip

     • macOS: 下载 flutter_macos_<version>-stable.zip

2. 解压 SDK

   • 将下载的zip包解压到一个你希望永久存放的路径。

   • 强烈建议的路径：

     • Windows: C:\src\flutter\ （如果 C:\src 不存在，请先创建它）

     • macOS: ~/development/flutter/ （在你的用户主目录下创建 development 文件夹）

   重要：不要将Flutter解压到需要特殊权限的路径（如 C:\Program Files\）。

3. 配置环境变量（PATH）

   我们需要将Flutter的命令行工具路径添加到系统的PATH环境变量中，这样你就可以在终端的任何位置执行 flutter 命令。

   在 Windows 上：

   1. 在开始菜单搜索 “环境变量”，选择 “编辑系统环境变量”。

   2. 点击下方的 “环境变量(N)...” 按钮。

   3. 在“系统变量”部分，找到并选择 Path，然后点击 “编辑”。

   4. 点击 “新建”，然后将你的Flutter解压路径下的 bin 文件夹的完整路径添加进去。

      • 例如：C:\src\flutter\bin

   5. 依次点击 “确定” 保存所有更改。

   在 macOS 上：
   我们通过编辑用户主目录下的配置文件来设置PATH。

   1. 打开终端（Terminal）。

   2. 确定你使用的Shell。通常默认是 zsh（macOS Catalina 及以后版本）。在终端输入：

      bash

      echo $SHELL

      • 如果输出是 /bin/zsh，你需要编辑 ~/.zshrc 文件。

      • 如果输出是 /bin/bash，你需要编辑 ~/.bash_profile 或 ~/.bashrc 文件。

   3. 打开对应的配置文件（以zsh为例）：

      bash

      open -e ~/.zshrc

   4. 在文件的末尾，添加这一行（请确保路径是你自己的解压路径）：

      bash

      export PATH="$PATH:$HOME/development/flutter/bin"

   5. 保存文件并关闭文本编辑器。

   6. 回到终端，运行以下命令使配置立即生效：

      bash

      source ~/.zshrc

步骤 2：运行 flutter doctor —— 你的环境诊断医生

现在，让我们验证安装并检查还需要哪些依赖。

1. 打开一个新的终端（Windows：命令提示符或PowerShell；macOS：终端）。

2. 输入以下命令并回车：

   bash

   flutter doctor

   这个命令会分析你的系统环境，并给出一份详细的报告，告诉你哪些条件已满足，哪些还需要安装。

3. 解读 flutter doctor 输出：
   你很可能会看到类似下面的输出，带有 [✓] 和 [!] 或 [×] 的标记。

   • [✓]： 表示该项检查通过。

   • [!]： 表示该项已安装，但存在需要你注意的小问题。

   • [×]： 表示该项未安装或未配置。

   最常见的需要处理的项目：

   • Android toolchain:

     • 如果你打算开发Android应用，你需要安装 Android Studio 和 Android SDK。

     • flutter doctor 会提示你如何安装，或者直接访问 Android Studio 官网 下载并安装。

   • Xcode (仅限 macOS):

     • 如果你打算开发iOS应用，你需要安装 Xcode。你可以通过Mac App Store免费下载。

   • IDE 插件:

     • flutter doctor 会推荐你安装 Android Studio 和 VS Code 的 Flutter 与 Dart 插件。

   • 许可证:

     • 首次配置时，可能需要接受Android SDK的许可证。运行 flutter doctor --android-licenses 并按提示接受即可。

   请根据 flutter doctor 的提示，逐一解决所有标有 [×] 和 [!] 的问题。 这是确保环境完整的关键一步。

步骤 3：安装并配置 IDE（二选一或全选）

选项 A：使用 Visual Studio Code (VS Code) - 轻量级、高集成

1. 下载并安装 VS Code: https://code.visualstudio.com/

2. 安装 Flutter 和 Dart 插件：

   • 启动 VS Code。

   • 打开扩展市场（Ctrl+Shift+X / Cmd+Shift+X）。

   • 搜索 “flutter”，找到由 “Flutter Team” 发布的 Flutter 扩展并安装。安装它时会自动安装必需的 Dart 扩展。

选项 B：使用 Android Studio - 功能全面、安卓开发首选

1. 下载并安装 Android Studio: https://developer.android.com/studio

2. 安装 Flutter 和 Dart 插件：

   • 启动 Android Studio。

   • 打开偏好设置/设置 (Preferences / Settings)。

   • 进入 Plugins 市场。

   • 搜索 “flutter”，找到 Flutter 插件并安装。同样，它会提示你同时安装 Dart 插件。

步骤 4：配置安卓模拟器 (Android Emulator)

在真机上运行应用当然可以，但模拟器在开发初期非常方便。

1. 打开 Android Studio。

2. 选择 Tools > Device Manager。

3. 点击 Create Virtual Device。

4. 选择一个设备定义（如 Pixel 4），点击 Next。

5. 选择一个系统镜像（建议选择最新的稳定版，API级别），点击 Next 并完成创建。

6. 回到设备管理器，点击你新创建的模拟器旁边的 运行 三角按钮，启动它。

步骤 5：（可选）连接真机设备

• Android：

  1. 在手机上开启 “开发者模式”（通常是在“关于手机”中连续点击“版本号”7次）。

  2. 在开发者选项中，开启 “USB调试”。

  3. 用USB数据线连接电脑。

• iOS：

  1. 需要一台Mac电脑和安装Xcode。

  2. 连接iPhone，并在电脑上信任此设备。

三、验证一切就绪：创建并运行“Hello Flutter”

现在，让我们用一行命令来见证你的第一个Flutter应用诞生！

1. 打开终端。

2. 导航到你希望存放项目的目录，例如 cd ~/Documents/FlutterProjects。

3. 运行以下命令来创建一个新项目：

   bash

   flutter create my_first_app

   这个过程会下载一些依赖并生成一个标准的Flutter项目模板。

4. 进入项目目录：

   bash

   cd my_first_app

5. 确保有一个设备在运行（模拟器已启动或真机已连接）。可以通过 flutter devices 命令查看。

6. 运行应用！

   bash

   flutter run

   如果一切顺利，你将看到模拟器或真机上启动一个默认的Flutter计数器应用，屏幕上显示“You have pushed the button this many times:”。

恭喜你！ 至此，你的Flutter开发环境已经100%搭建成功！

常见问题与排错 (Troubleshooting)

• flutter doctor 长时间无响应： 这通常是由于网络问题，尤其是在国内。请考虑配置镜像环境变量，具体配置方法请搜索“Flutter中国镜像”。

• 命令找不到 (Command not found)： 说明PATH环境变量配置有误。请回头仔细检查Flutter bin 目录的路径是否正确。

• 模拟器无法启动/卡顿： 尝试在Android Studio的设备管理器中，为模拟器开启 “Windows -> Enable Device Frame” 和 “Graphics -> Hardware - GLES 2.0” 以提升性能。

如果在搭建过程中遇到任何本教程未提及的“坑”，欢迎在评论区留言，我们一起解决。

在下一讲中，我们将深入这个刚刚创建的项目，逐行剖析Flutter项目的目录结构，并理解 main.dart 中的代码是如何运作的。你将真正开始编写你的第一行Flutter代码！