清晰易懂的 Flutter 开发环境搭建教程

news2025/4/12 18:59:26

Flutter 是 Google 推出的跨平台应用开发框架，支持 iOS/Android/Web/桌面应用开发。本教程将手把手教你完成 Windows/macOS/Linux 环境下的 Flutter 安装与配置，从零到运行第一个应用，全程避坑指南！

一、安装 Flutter SDK

1. 下载 Flutter SDK

访问官网下载页面：https://flutter.dev/docs/get-started/install
根据系统选择安装包：
- Windows：flutter_windows_3.xx.x-stable.zip
- macOS：flutter_macos_3.xx.x-stable.zip
- Linux：flutter_linux_3.xx.x-stable.tar.xz

2. 解压并配置环境变量

将压缩包解压到目标目录（建议路径无空格和中文）：
- Windows：C:\src\flutter
- macOS/Linux：~/development/flutter
配置环境变量：
- Windows：
  - 右键“此电脑” → 属性 → 高级系统设置 → 环境变量 → 编辑 Path → 添加 C:\src\flutter\bin
- macOS/Linux：
```
echo 'export PATH="$PATH:$HOME/development/flutter/bin"' >> ~/.bashrc  # 或 ~/.zshrc
source ~/.bashrc
```

3. 验证安装

flutter --version
# 输出示例：Flutter 3.13.9 • channel stable • ...

二、安装平台依赖

1. Windows 用户

安装 Android Studio：
- 勾选 Android SDK、Android Emulator、Android SDK Platform-Tools
安装 Visual Studio：
- 勾选 “使用 C++ 的桌面开发”（用于 Windows 桌面应用编译）

2. macOS 用户

安装 Xcode：

xcode-select --install  # 安装命令行工具
sudo xcodebuild -license  # 接受 Xcode 许可协议

安装 CocoaPods（iOS 依赖管理）：
```
sudo gem install cocoapods
```

3. Linux 用户

sudo apt-get install clang cmake ninja-build libgtk-3-dev

三、配置 Android 开发环境

1. 安装 Android Studio

下载并安装 Android Studio
打开 Android Studio → 安装 Flutter 和 Dart 插件：
- File → Settings → Plugins → 搜索安装

2. 配置 Android SDK

打开 Android Studio → Tools → SDK Manager
确保安装以下组件：
- Android SDK 33+
- Android SDK Platform-Tools
- Android Emulator

3. 接受 Android 许可证

flutter doctor --android-licenses  # 按提示输入 y 确认

四、运行第一个 Flutter 应用

1. 创建项目

flutter create my_first_app
cd my_first_app

2. 启动模拟器

flutter emulators --launch Pixel_5_API_33  # 或连接真实设备

3. 运行应用

flutter run
# 看到手机屏幕显示 "Hello World" 即成功！

五、国内用户加速配置

1. 配置镜像环境变量

# Windows：在系统环境变量中添加
# macOS/Linux：添加到 ~/.bashrc 或 ~/.zshrc
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

2. 切换 Flutter 国内镜像源

flutter channel stable
flutter config --enable-web
flutter config --android-sdk /path/to/android/sdk  # 指定 Android SDK 路径

六、新手必看：容易忽略的坑点

1. 未安装平台工具链

现象：flutter doctor 提示 Android toolchain 或 Xcode 未配置
解决：根据提示安装对应组件（如 Android SDK Build-Tools）

2. 模拟器无法启动

现象：flutter emulators 列表为空
解决：通过 Android Studio → AVD Manager 创建虚拟设备

3. iOS 编译失败（macOS）

现象：pod install 报错

解决：

sudo arch -x86_64 gem install ffi  # Apple Silicon 芯片需额外步骤
cd ios && pod install

4. 网络问题导致依赖下载失败

现象：flutter pub get 卡住
解决：
- 确认镜像环境变量已配置
- 使用代理工具（如 Clash）设置全局代理

七、开发工具推荐

工具	用途
VS Code	轻量级代码编辑器（安装 Flutter/Dart 插件）
Android Studio	官方 IDE，集成模拟器和调试工具
Xcode	iOS 应用编译与发布（仅 macOS）