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
- Windows :
2. 解压并配置环境变量
- 将压缩包解压到目标目录(建议路径无空格和中文):
- Windows :
C:\src\flutter
- macOS/Linux :
~/development/flutter
- Windows :
- 配置环境变量:
-
Windows :
- 右键"此电脑" → 属性 → 高级系统设置 → 环境变量 → 编辑
Path
→ 添加C:\src\flutter\bin
- 右键"此电脑" → 属性 → 高级系统设置 → 环境变量 → 编辑
-
macOS/Linux :
bashecho 'export PATH="$PATH:$HOME/development/flutter/bin"' >> ~/.bashrc # 或 ~/.zshrc source ~/.bashrc
-
3. 验证安装
bash
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:
bashxcode-select --install # 安装命令行工具 sudo xcodebuild -license # 接受 Xcode 许可协议
-
安装 CocoaPods(iOS 依赖管理):
bashsudo gem install cocoapods
3. Linux 用户
bash
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 许可证
bash
flutter doctor --android-licenses # 按提示输入 y 确认
四、运行第一个 Flutter 应用
1. 创建项目
bash
flutter create my_first_app
cd my_first_app
2. 启动模拟器
bash
flutter emulators --launch Pixel_5_API_33 # 或连接真实设备
3. 运行应用
bash
flutter run
# 看到手机屏幕显示 "Hello World" 即成功!
五、国内用户加速配置
1. 配置镜像环境变量
bash
# 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 国内镜像源
bash
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
报错 -
解决 :
bashsudo 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) |
八、总结
通过本教程,你已经:
- 完成 Flutter SDK 安装与环境变量配置
- 配置 Android/iOS 开发环境
- 创建并运行首个 Flutter 应用
- 掌握国内加速配置方案
下一步建议:
- 学习 Dart 语言基础(官方文档)
- 尝试 Flutter Widget 库(Widget Catalog)
- 探索跨平台功能(如调用摄像头、访问网络)
遇到问题可查阅 Flutter 中文文档 或留言讨论! 🚀