编程马·菜鸟教程

Appearance

第2章：Flutter 开发环境搭建 ​

2.1 基础环境准备（多系统适配） ​

Windows系统 ​

步骤 1：下载 Flutter SDK ​

  1. 访问 Flutter 官方网站：https://flutter.dev/docs/get-started/install/windows
  2. 点击 "Download Flutter SDK" 按钮，下载最新的 Flutter SDK 压缩包
  3. 将下载的压缩包解压到合适的位置，例如 C:\flutter

步骤 2：配置环境变量 ​

  1. 右键点击 "此电脑" → "属性" → "高级系统设置" → "环境变量"
  2. 在 "系统变量" 中找到 "Path" 变量，点击 "编辑"
  3. 点击 "新建"，添加 Flutter 的 bin 目录路径，例如 C:\flutter\bin
  4. 点击 "确定" 保存所有更改

步骤 3：验证环境变量 ​

  1. 打开命令提示符（CMD）
  2. 运行 flutter --version 命令
  3. 如果能显示 Flutter 版本信息，则环境变量配置成功

Mac系统 ​

步骤 1：下载 Flutter SDK ​

  1. 访问 Flutter 官方网站：https://flutter.dev/docs/get-started/install/macos
  2. 点击 "Download Flutter SDK" 按钮，下载最新的 Flutter SDK 压缩包
  3. 将下载的压缩包解压到合适的位置，例如 ~/development/flutter

步骤 2：配置环境变量 ​

  1. 打开终端
  2. 编辑 ~/.zshrc 或 ~/.bash_profile 文件（根据你使用的 shell）
  3. 添加以下内容：
    bash

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

4. 保存文件并运行 `source ~/.zshrc` 或 `source ~/.bash_profile` 使配置生效

#### 步骤 3：安装 Xcode（适配 iOS 开发）

1. 打开 App Store，搜索并安装 Xcode
2. 打开 Xcode，同意许可协议
3. 运行 `sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer`
4. 运行 `sudo xcodebuild -runFirstLaunch` 完成 Xcode 初始化

### Linux系统

#### 步骤 1：下载 Flutter SDK

1. 访问 Flutter 官方网站：https://flutter.dev/docs/get-started/install/linux
2. 点击 "Download Flutter SDK" 按钮，下载最新的 Flutter SDK 压缩包
3. 将下载的压缩包解压到合适的位置，例如 `~/development/flutter`

#### 步骤 2：配置环境变量

1. 打开终端
2. 编辑 `~/.bashrc` 或 `~/.zshrc` 文件
3. 添加以下内容：
```bash
export PATH="$HOME/development/flutter/bin:$PATH"
  1. 保存文件并运行 source ~/.bashrc 或 source ~/.zshrc 使配置生效

步骤 3：安装依赖 ​

bash
sudo apt-get install curl git unzip xz-utils libglu1-mesa

2.2 开发工具准备 ​

VS Code + 必备插件 ​

步骤 1：安装 VS Code ​

  1. 访问 VS Code 官网：https://code.visualstudio.com/
  2. 下载并安装适合你系统的 VS Code 版本

步骤 2：安装 Flutter 插件 ​

  1. 打开 VS Code
  2. 点击左侧的扩展图标（方块图标）
  3. 搜索并安装以下插件：
    • Flutter
    • Dart
    • Flutter Widget Snippets
    • Awesome Flutter Snippets

步骤 3：配置 VS Code ​

  1. 打开 VS Code 设置（Ctrl+,）
  2. 搜索 "Dart"
  3. 确保 "Dart: Enable Snippets" 选项已启用
  4. 搜索 "Flutter"
  5. 确保 "Flutter: Enable Hot Reload On Save" 选项已启用

Android Studio ​

步骤 1：安装 Android Studio ​

  1. 访问 Android Studio 官网：https://developer.android.com/studio
  2. 下载并安装最新的 Android Studio 版本
  3. 启动 Android Studio，按照向导完成初始化

步骤 2：安装 Flutter 和 Dart 插件 ​

  1. 打开 Android Studio
  2. 点击 "File" → "Settings" → "Plugins"
  3. 搜索并安装 "Flutter" 插件（会自动安装 Dart 插件）
  4. 重启 Android Studio 使插件生效

步骤 3：配置模拟器 ​

  1. 打开 Android Studio
  2. 点击 "Tools" → "AVD Manager"
  3. 点击 "Create Virtual Device"
  4. 选择一个设备类型（如 Pixel 6）
  5. 选择一个系统镜像（推荐使用最新的 Android 版本）
  6. 完成模拟器创建

2.3 模拟器/真机配置 ​

Android 模拟器 ​

创建和启动模拟器 ​

  1. 在 VS Code 中：按 Ctrl+Shift+P → 输入 "Flutter: Launch Emulator"
  2. 在 Android Studio 中：打开 AVD Manager → 点击模拟器旁边的 "Play" 按钮

真机调试 ​

  1. 打开 Android 设备的 "设置"
  2. 进入 "关于手机" → 连续点击 "版本号" 7 次，开启开发者模式
  3. 返回 "设置" → 进入 "开发者选项"
  4. 开启 "USB 调试"
  5. 用 USB 数据线连接电脑和手机
  6. 在 VS Code 或 Android Studio 中运行项目

iOS 模拟器（Mac 专属） ​

启动 iOS 模拟器 ​

  1. 在 VS Code 中：按 Ctrl+Shift+P → 输入 "Flutter: Launch Emulator" → 选择 iOS 模拟器
  2. 在终端中：运行 open -a Simulator

真机调试 ​

  1. 打开 Xcode
  2. 点击 "Xcode" → "Preferences" → "Accounts"
  3. 添加你的 Apple ID
  4. 连接 iOS 设备
  5. 在 Xcode 中选择你的设备作为运行目标
  6. 运行项目

2.4 环境验证 ​

运行 flutter doctor 命令 ​

  1. 打开终端或命令提示符
  2. 运行 flutter doctor 命令
  3. 查看输出结果，解决所有显示的问题

常见问题及解决方案 ​

问题解决方案
Android toolchain - develop for Android devices安装 Android Studio 并配置 SDK
iOS toolchain - develop for iOS devices安装 Xcode 并配置
Chrome - develop for the web安装 Google Chrome
Android Studio (version x.x)确保 Android Studio 版本符合要求
Connected device启动模拟器或连接真机

运行默认 Demo ​

  1. 创建一个新的 Flutter 项目
  2. 运行项目到模拟器或真机
  3. 确认应用能够正常启动和运行

2.5 开发工具基础操作 ​

创建 Flutter 项目 ​

VS Code ​

  1. 按 Ctrl+Shift+P → 输入 "Flutter: New Project"
  2. 选择 "Application" → 选择项目目录
  3. 输入项目名称 → 等待项目创建完成

Android Studio ​

  1. 点击 "New Flutter Project"
  2. 选择 "Flutter Application" → 点击 "Next"
  3. 填写项目信息 → 点击 "Finish"
  4. 等待项目创建完成

运行项目 ​

VS Code ​

  1. 按 F5 运行项目
  2. 选择目标设备（模拟器或真机）
  3. 等待应用安装和启动

Android Studio ​

  1. 点击工具栏上的 "Run" 按钮
  2. 选择目标设备
  3. 等待应用安装和启动

热重载使用 ​

  1. 修改代码文件
  2. 保存文件（Ctrl+S）
  3. 观察模拟器/真机上的变化
  4. 如果热重载失效，尝试按 Ctrl+Shift+F5 进行热重启

调试代码 ​

VS Code ​

  1. 在代码中设置断点
  2. 按 F5 启动调试模式
  3. 当程序运行到断点时，查看变量值和调用栈
  4. 使用调试控制按钮（继续、单步执行、步出）控制调试流程

Android Studio ​

  1. 在代码中设置断点
  2. 点击 "Debug" 按钮启动调试模式
  3. 当程序运行到断点时，查看变量值和调用栈
  4. 使用调试控制按钮控制调试流程

2.6 常见环境问题排查 ​

SDK 安装失败 ​

  • 问题：Flutter SDK 下载失败或解压失败
  • 解决方案：
    1. 检查网络连接
    2. 使用镜像源下载 SDK
    3. 确保解压路径没有特殊字符

环境变量配置错误 ​

  • 问题：运行 flutter 命令时提示 "flutter 不是内部或外部命令"
  • 解决方案：
    1. 检查环境变量是否正确配置
    2. 重新打开终端或命令提示符
    3. 验证 flutter --version 命令是否正常工作

模拟器启动失败 ​

  • 问题：Android 模拟器启动失败或黑屏
  • 解决方案：
    1. 确保电脑配置满足模拟器要求（至少 8GB 内存）
    2. 尝试创建不同的模拟器设备
    3. 检查 HAXM 是否安装（Intel 处理器）

真机调试失败 ​

  • Android 设备：

    • 确保 USB 调试已开启
    • 安装设备驱动程序
    • 尝试更换 USB 数据线

  • iOS 设备：

    • 确保设备已信任电脑
    • 检查开发者证书是否有效
    • 尝试重启 Xcode 和设备

依赖项安装失败 ​

  • 问题：运行 flutter pub get 时依赖项安装失败
  • 解决方案：
    1. 检查网络连接
    2. 使用国内镜像源
    3. 清理缓存：flutter pub cache repair

编译错误 ​

  • 问题：编译项目时出现错误
  • 解决方案：
    1. 运行 flutter clean 清理项目
    2. 运行 flutter pub get 重新获取依赖
    3. 检查代码中的语法错误

2.7 小结 ​

本章详细介绍了 Flutter 开发环境的搭建过程，包括多系统环境准备、开发工具配置、模拟器/真机设置、环境验证和常见问题排查。通过按照本章的步骤操作，你应该能够成功搭建 Flutter 开发环境，为后续的 Flutter 开发做好准备。

在接下来的章节中，我们将学习 Flutter 项目结构与 Dart 的衔接，以及 Flutter 的核心概念和基础组件，逐步掌握 Flutter 开发技能。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建