Flutter开发环境安装指南

Flutter开发环境安装指南

📋 目录

🖥️ 系统要求

macOS版本要求

  • 最低版本: macOS 10.14 (Mojave) 或更高版本

  • 推荐版本: macOS 11.0 (Big Sur) 或更高版本

  • 最新版本: macOS 14.0 (Sonoma) 或更高版本

硬件要求

  • 处理器: Intel Core i5 或 Apple Silicon (M1/M2/M3)

  • 内存: 至少 8GB RAM (推荐 16GB)

  • 磁盘空间: 至少 15GB 可用空间 (推荐 20GB)

  • 网络: 稳定的网络连接用于下载SDK和依赖

推荐配置

  • 处理器: Apple Silicon (M1/M2/M3) 芯片
  • 内存: 16GB 或更高
  • 存储: SSD 硬盘,50GB 可用空间
  • 网络: 高速网络连接

注:若能科学上网最好,否则安装相应镜像

📥 安装步骤

1. 安装Homebrew (如果未安装)

bash 复制代码
# 安装Homebrew包管理器
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# 验证安装
brew --version

若提示失败,按以下操作:

bash 复制代码
sudo vim /etc/hosts
185.199.108.133 raw.githubusercontent.com

2. 安装Flutter SDK

方法一: 使用Homebrew安装 (推荐)
bash 复制代码
# 使用Homebrew安装Flutter
brew install --cask flutter

# 验证安装
flutter --version
方法二: 手动下载安装
bash 复制代码
# 创建开发目录
mkdir -p ~/development
cd ~/development

# 下载Flutter SDK
curl -O https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_3.x.x-stable.zip

# 解压Flutter SDK
unzip flutter_macos_3.x.x-stable.zip

# 验证安装
~/development/flutter/bin/flutter --version

3. 配置环境变量

配置Shell环境
bash 复制代码
# 确定你使用的Shell
echo $SHELL

# 如果使用zsh (macOS Catalina及以后版本的默认Shell)
echo 'export PATH="$PATH:$HOME/development/flutter/bin"' >> ~/.zshrc
source ~/.zshrc

# 如果使用bash
echo 'export PATH="$PATH:$HOME/development/flutter/bin"' >> ~/.bash_profile
source ~/.bash_profile

# 验证PATH配置
echo $PATH | grep flutter

4. 安装依赖工具

安装Xcode
perl 复制代码
# 从App Store安装Xcode
# 或使用命令行安装
xcode-select --install

# 验证Xcode安装
xcode-select --print-path
安装Git
csharp 复制代码
# 使用Homebrew安装Git
brew install git

# 或从官网下载: https://git-scm.com/download/mac

# 配置Git用户信息
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"
安装Android Studio
shell 复制代码
# 使用Homebrew安装Android Studio
brew install --cask android-studio

# 或从官网下载: https://developer.android.com/studio
安装CocoaPods
bash 复制代码
# 安装CocoaPods (iOS开发必需)
sudo gem install cocoapods

# 验证安装
pod --version

⚙️ 环境配置

1. 配置iOS开发环境

配置Xcode
csharp 复制代码
# 设置Xcode命令行工具路径
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

# 接受Xcode许可协议
sudo xcodebuild -license accept

# 验证Xcode配置
xcodebuild -version
安装iOS模拟器
perl 复制代码
# 打开Xcode
open -a Xcode

# 在Xcode中安装模拟器:
# 1. 打开 Xcode > Window > Devices and Simulators
# 2. 选择 Simulators 标签
# 3. 点击 "+" 按钮添加新的模拟器
# 4. 选择设备类型和iOS版本
配置CocoaPods
bash 复制代码
# 初始化CocoaPods
pod setup

# 验证CocoaPods配置
pod --version

2. 配置Android开发环境

安装Android SDK
ini 复制代码
# 打开Android Studio
open -a "Android Studio"

# 在Android Studio中安装SDK:
# 1. 打开 Android Studio > Preferences > Appearance & Behavior > System Settings > Android SDK
# 2. 安装以下组件:
#    - Android SDK Platform-Tools
#    - Android SDK Build-Tools (最新版本)
#    - Android SDK Platform (API 33+)
#    - Android SDK Command-line Tools
#    - Android Emulator
配置Android环境变量(可跳过)
bash 复制代码
# 编辑Shell配置文件
# 如果使用zsh
echo 'export ANDROID_HOME=$HOME/Library/Android/sdk' >> ~/.zshrc
echo 'export PATH=$PATH:$ANDROID_HOME/platform-tools' >> ~/.zshrc
echo 'export PATH=$PATH:$ANDROID_HOME/tools' >> ~/.zshrc
echo 'export PATH=$PATH:$ANDROID_HOME/emulator' >> ~/.zshrc

# 如果使用bash
echo 'export ANDROID_HOME=$HOME/Library/Android/sdk' >> ~/.bash_profile
echo 'export PATH=$PATH:$ANDROID_HOME/platform-tools' >> ~/.bash_profile
echo 'export PATH=$PATH:$ANDROID_HOME/tools' >> ~/.bash_profile
echo 'export PATH=$PATH:$ANDROID_HOME/emulator' >> ~/.bash_profile

# 重新加载配置
source ~/.zshrc  # 或 source ~/.bash_profile

3. 配置Flutter

bash 复制代码
# 运行Flutter doctor检查环境
flutter doctor

# 接受Android许可协议
flutter doctor --android-licenses

# 升级Flutter到最新版本
flutter upgrade

# 配置Flutter镜像源 (中国用户)
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

🛠️ IDE配置

1. Android Studio (强烈推荐)

安装Android Studio
shell 复制代码
# 使用Homebrew安装Android Studio
brew install --cask android-studio

# 或从官网下载: https://developer.android.com/studio
# 下载macOS版本并安装
首次启动配置
perl 复制代码
# 1. 启动Android Studio
open -a "Android Studio"

# 2. 完成初始设置向导:
#    - 选择 "Standard" 安装类型
#    - 选择UI主题 (推荐 "Darcula" 深色主题)
#    - 等待下载和安装Android SDK
安装Flutter插件
bash 复制代码
# 在Android Studio中安装必需插件:
# 1. 打开 Android Studio > Preferences (或按 Cmd+,)
# 2. 选择 Plugins
# 3. 搜索并安装以下插件:
#    - Flutter Plugin (官方插件,必需)
#    - Dart Plugin (官方插件,必需)
#    - Flutter Enhancement Suite (推荐)
#    - Flutter Widget Snippets (推荐)
#    - Awesome Flutter Snippets (推荐)
# 4. 重启Android Studio
配置Flutter SDK路径
shell 复制代码
# 在Android Studio中配置Flutter SDK:
# 1. 打开 Android Studio > Preferences
# 2. 选择 Languages & Frameworks > Flutter
# 3. 设置Flutter SDK路径:
#    - 如果使用Homebrew安装: /opt/homebrew/bin/flutter
#    - 如果手动安装: ~/development/flutter
# 4. 点击 "Apply" 和 "OK"
配置Android SDK
csharp 复制代码
# 在Android Studio中配置Android SDK:
# 1. 打开 Android Studio > Preferences
# 2. 选择 Appearance & Behavior > System Settings > Android SDK
# 3. 在 SDK Platforms 标签页安装:
#    - Android 14.0 (API 34)
#    - Android 13.0 (API 33)
#    - Android 12.0 (API 31)
# 4. 在 SDK Tools 标签页安装:
#    - Android SDK Build-Tools
#    - Android SDK Platform-Tools
#    - Android SDK Command-line Tools
#    - Android Emulator
#    - Intel x86 Emulator Accelerator (HAXM installer)
创建Android虚拟设备 (AVD)
shell 复制代码
# 在Android Studio中创建模拟器:
# 1. 打开 Tools > AVD Manager
# 2. 点击 "Create Virtual Device"
# 3. 选择设备类型 (推荐 Pixel 7)
# 4. 选择系统镜像 (推荐 API 34)
# 5. 配置AVD名称和设置
# 6. 点击 "Finish"
Android Studio优化设置
arduino 复制代码
// 在Android Studio中优化设置:
// 1. 打开 Preferences > Editor > General
// 2. 启用 "Auto Import" 和 "Optimize imports on the fly"
// 3. 在 Preferences > Editor > Code Style > Dart 中设置:
//    - Line separator: Unix and OS X (\n)
//    - Right margin: 80
// 4. 在 Preferences > Editor > Inspections 中启用:
//    - Dart > General > Unused import
//    - Dart > General > Unused local variable

2. VS Code (备选方案)

安装VS Code
css 复制代码
# 使用Homebrew安装VS Code
brew install --cask visual-studio-code

# 或从官网下载: https://code.visualstudio.com/
安装扩展
bash 复制代码
# 打开VS Code,安装以下必需扩展:
# 1. Flutter (官方扩展)
# 2. Dart (官方扩展)
# 3. Flutter Widget Snippets
# 4. Awesome Flutter Snippets
# 5. Flutter Intl (国际化支持)
# 6. Error Lens (错误提示增强)
配置设置
json 复制代码
// 在VS Code中按 Cmd+Shift+P,输入 "Preferences: Open Settings (JSON)"
{
    "dart.flutterSdkPath": "/opt/homebrew/bin/flutter",
    "dart.sdkPath": "/opt/homebrew/bin/cache/dart-sdk",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    "dart.lineLength": 80,
    "dart.previewFlutterUiGuides": true,
    "dart.previewFlutterUiGuidesCustomTracking": true
}

3. Xcode (iOS开发必需)

配置Xcode
bash 复制代码
# 确保Xcode已正确安装和配置
# 在Xcode中安装iOS模拟器:
# 1. 打开 Xcode > Window > Devices and Simulators
# 2. 选择 Simulators 标签
# 3. 添加所需的iOS模拟器:
#    - iPhone 15 Pro (推荐)
#    - iPhone 14
#    - iPad Pro (11-inch)

🎯 为什么推荐Android Studio?

Android Studio的优势

  1. 官方支持: Flutter官方推荐的IDE,获得最佳支持

  2. 完整工具链: 集成Android SDK、模拟器、调试工具

  3. 智能提示: 强大的代码补全和错误检测

  4. 可视化调试: 内置Flutter Inspector和性能分析工具

  5. 热重载: 完美的热重载支持,开发效率高

  6. 插件生态: 丰富的Flutter和Dart插件

  7. 多平台支持: 同时支持iOS、Android、Web开发

  8. 团队协作: 适合团队开发,配置统一

与VS Code的对比

特性 Android Studio VS Code
官方支持 ✅ 官方推荐 ⚠️ 社区支持
开箱即用 ✅ 配置简单 ⚠️ 需要额外配置
性能分析 ✅ 内置工具 ⚠️ 需要插件
调试体验 ✅ 优秀 ✅ 良好
资源占用 ⚠️ 较高 ✅ 较低
启动速度 ⚠️ 较慢 ✅ 快速

✅ 验证安装

1. 运行Flutter Doctor

复制代码
flutter doctor -v

**预期输出: **

less 复制代码
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.x.x, on macOS 14.0, locale zh-CN)
[✓] macOS Version (Installed version of macOS is version 10.14 or higher)
[✓] Xcode - develop for iOS and macOS (Xcode 15.0)
[✓] Chrome - develop for the web (Chrome version 119.0.6045.105)
[✓] Android Studio (version 2023.1.1)
[✓] VS Code (version 1.84.2)
[✓] Connected device (3 available)
[✓] Network resources

• No issues found!

注意: Android Studio 是Flutter官方推荐的IDE,提供最完整的Flutter开发体验。

bash 复制代码
### 2. 创建测试项目
```bash
# 创建新项目
flutter create my_first_app

# 进入项目目录
cd my_first_app

# 运行项目
flutter run

3. 测试不同平台

iOS (推荐优先测试)
perl 复制代码
# 启动iOS模拟器
open -a Simulator

# 运行iOS应用
flutter run -d ios

# 或指定特定模拟器
flutter devices  # 查看可用设备
flutter run -d "iPhone 15 Pro"  # 指定设备
Android
bash 复制代码
# 启动Android模拟器
# 在Android Studio中: Tools > AVD Manager > 启动模拟器

# 或使用命令行启动
emulator -avd Pixel_7_API_34  # 替换为你的AVD名称

# 运行Android应用
flutter run -d android
macOS桌面应用
arduino 复制代码
# 启用macOS桌面支持
flutter config --enable-macos-desktop

# 运行macOS应用
flutter run -d macos
Web
shell 复制代码
# 启动Web开发服务器
flutter run -d chrome

# 或使用Safari
flutter run -d web-server
# 然后在Safari中访问 http://localhost:8080

🔧 常见问题

1. Flutter Doctor 显示问题

Xcode问题
csharp 复制代码
# 解决方案
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -license accept

# 如果仍有问题,尝试重新安装Xcode命令行工具
sudo rm -rf /Library/Developer/CommandLineTools
xcode-select --install
Android License问题
shell 复制代码
# 解决方案
flutter doctor --android-licenses
# 对所有提示输入 'y' 接受
CocoaPods问题
bash 复制代码
# 如果CocoaPods安装失败
sudo gem uninstall cocoapods
sudo gem install cocoapods -n /usr/local/bin

# 或使用Homebrew安装
brew install cocoapods

# 初始化CocoaPods
pod setup
Git问题
csharp 复制代码
# 确保Git已正确安装
git --version

# 配置Git用户信息
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

2. 网络连接问题

设置镜像源 (中国用户)
bash 复制代码
# 设置Flutter镜像
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

# 或添加到环境变量文件
echo 'export PUB_HOSTED_URL=https://pub.flutter-io.cn' >> ~/.bash_profile
echo 'export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn' >> ~/.bash_profile
代理设置
bash 复制代码
# 设置HTTP代理
export HTTP_PROXY=http://proxy.example.com:8080
export HTTPS_PROXY=http://proxy.example.com:8080

# 设置Flutter代理
flutter config --proxy http://proxy.example.com:8080

3. 权限问题

macOS权限问题
bash 复制代码
# 修复Flutter目录权限
sudo chown -R $(whoami) ~/development/flutter
chmod +x ~/development/flutter/bin/flutter

# 修复Homebrew权限问题
sudo chown -R $(whoami) /opt/homebrew
sudo chown -R $(whoami) /usr/local

# 如果使用Intel Mac
sudo chown -R $(whoami) /usr/local
安全设置问题
shell 复制代码
# 如果遇到"无法验证开发者"错误
# 1. 打开 系统偏好设置 > 安全性与隐私
# 2. 点击"仍要打开"或"允许"
# 3. 或在终端中运行
sudo spctl --master-disable

4. 依赖下载失败

csharp 复制代码
# 清理缓存
flutter clean
flutter pub cache clean

# 重新获取依赖
flutter pub get

# 如果仍有问题,尝试
flutter pub cache repair

🚀 下一步

1. 学习资源

2. 开发工具

3. 社区资源

4. 创建第一个应用

bash 复制代码
# 创建新项目
flutter create my_app

# 运行项目
cd my_app
flutter run

# 开始开发!

📝 注意事项

  1. 定期更新: 保持Flutter SDK和相关工具的最新版本

  2. 备份配置: 备份重要的环境配置和项目文件

  3. 网络稳定: 确保网络连接稳定,特别是在下载SDK和依赖时

  4. 权限管理: 注意文件系统权限,避免权限相关的问题

  5. 版本兼容: 确保Flutter、Dart和相关工具的版本兼容性

  6. macOS 特定:

    1. 确保Xcode版本与macOS版本兼容
    2. 定期更新Xcode和命令行工具
    3. 注意Apple Silicon和Intel芯片的差异
  7. 存储空间: 确保有足够的磁盘空间,Xcode和模拟器会占用大量空间

  8. 安全设置: 在macOS安全设置中允许开发者工具运行

🆘 获取帮助

如果在安装过程中遇到问题,可以通过以下方式获取帮助:


祝您在 macOS 上Flutter开发愉快! 🎉


🍎 macOS特有优势

使用macOS进行Flutter开发的优势:

  1. 原生iOS开发: 可以直接开发和测试iOS应用
  2. 性能优化: Apple Silicon芯片提供优秀的性能表现
  3. 工具集成: 与Xcode、Safari等原生工具完美集成
  4. 多平台支持: 可以同时开发iOS、Android、Web和macOS应用
  5. 开发体验: macOS提供了优秀的开发体验和工具链

Happy Flutter Development on macOS ! 🚀

相关推荐
huabuyu20 小时前
Taro微信小程序高性能无限下拉列表实现
前端
程序员老刘20 小时前
5分钟上手Dart MCP Server
flutter·ai编程·mcp
DevRen21 小时前
实现Google原生PIN码锁屏密码效果
android·前端·kotlin
ZSQA21 小时前
mac安装Homebrew解决网络问题
前端
烽学长21 小时前
(附源码)基于Vue的教师档案管理系统的设计与实现
前端·javascript·vue.js
前端一课21 小时前
前端监控 SDK,支持页面访问、性能监控、错误追踪、用户行为和网络请求监控
前端
lee57621 小时前
UniApp + SignalR + Asp.net Core 做一个聊天IM,含emoji 表情包
前端·vue.js·typescript·c#
✎﹏赤子·墨筱晗♪21 小时前
Shell函数进阶:返回值妙用与模块化开发实践
前端·chrome
再学一点就睡21 小时前
从 npm 到 pnpm:包管理器的进化与 pnpm 核心原理解析
前端·npm
Light6021 小时前
领码方案:低代码平台前端缓存与 IndexedDB 智能组件深度实战
前端·低代码·缓存·indexeddb·离线优先·ai优化