Flutter 环境 — CodeRoadMapFlutter 环境
这一课你将能做到
- 在自己的电脑上把 Flutter SDK、Android Studio（或 Xcode）、模拟器全部装好，
flutter doctor 全绿
- 用
flutter create 创建一个新项目，并在模拟器/真机上跑起来，体验热重载
- 说清楚 Flutter 项目的目录结构：lib、pubspec.yaml、android、ios 各自的作用
为什么要学
环境装不好，后面所有课都是白搭。Flutter 环境的坑集中在：SDK 路径、Android 模拟器镜像、Gradle 下载慢、iOS 签名。本节一次性把坑扫干净，让你后面只管写代码。
人话：Flutter 就像一台游戏机，Android Studio / Xcode 是屏幕，模拟器是手柄。把这三件连好，你才能开始玩游戏。
先建立图像
你的代码 (lib/main.dart)
│
▼
Flutter SDK ── dart ── flutter 命令行
│
├────► Android 工具链 (Android SDK + 模拟器/真机)
└────► iOS 工具链 (Xcode + Simulator，仅 macOS)
跟着做
步骤 1：下载并解压 Flutter SDK
到 <https://docs.flutter.dev/get-started/install> 下载稳定版压缩包。
- Windows 解压到
C:\flutter（不要含中文/空格/Program Files）
- macOS/Linux 解压到
~/flutter
把 flutter/bin 加入环境变量 PATH。Windows：设置 → 环境变量 → Path → 新建 C:\flutter\bin。macOS/Linux：编辑 ~/.zshrc：
export PATH="$HOME/flutter/bin:$PATH"
打开新终端验证：
flutter --version
# 输出 Flutter 3.x.x • channel stable
步骤 2：安装 Android Studio 与 Android SDK
- 装 Android Studio（自带 Android SDK、Platform-Tools、模拟器）。
- 启动后 SDK Manager 里勾选：
Android SDK Platform（最新 API）、Android SDK Build-Tools、Android Emulator、Android SDK Platform-Tools。
- 装完打开 Device Manager，创建一个 Pixel 6 / API 34 的模拟器。
接受协议：
flutter doctor --android-licenses
# 一路 y 回车
步骤 3：（仅 macOS）配置 iOS 工具链
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
open -a Simulator # 启动一次模拟器
sudo gem install cocoapods
步骤 4：跑 doctor，全部打勾
flutter doctor -v
期望输出（关键项全 ✓）：
[✓] Flutter (Channel stable, ...)
[✓] Android toolchain
[✓] Xcode (仅 macOS)
[✓] Android Studio
[✓] Connected device
如果某项是 ✗，按 doctor 提示修。最常见的是 Android licenses 没接受、模拟器没启动。
步骤 5：创建并运行第一个项目
flutter create hello_flutter
cd hello_flutter
flutter devices # 看可用设备
flutter run # 默认跑第一个设备
flutter run -d emulator-5554 # Android 模拟器
flutter run -d chrome # 网页（体验热重载很方便）
跑起来后，打开 lib/main.dart，把 'Flutter Demo Home Page' 改成 '你好 Flutter'，保存（不重启进程），界面秒变 —— 这就是热重载（Hot Reload）。改不了的状态用 Hot Restart（终端按 R）。
步骤 6：认识项目结构
hello_flutter/
├── lib/ # 你的 Dart 代码，主要战场
│ └── main.dart # 入口
├── test/ # 单元/Widget 测试
├── android/ # Android 原生壳（签名、权限、图标）
├── ios/ # iOS 原生壳
├── web/ # Web 平台
├── pubspec.yaml # 依赖、资源、字体声明 ≈ package.json
└── pubspec.lock # 锁定版本（提交到 git）
加一个依赖试试，在 pubspec.yaml 的 dependencies: 下：
dependencies:
flutter:
sdk: flutter
http: ^1.2.0
保存后 VS Code/Android Studio 会自动 flutter pub get，或者手动跑：
讲清楚要点
- Flutter = SDK + 引擎 + 框架：SDK 含 dart 编译器和 flutter 命令；引擎用 C++ 写，跨平台渲染靠 Skia/Impeller；你用 Dart 写 Widget。
- 热重载不是「刷新页面」：它把改动的代码注入正在运行的 Dart VM，保留当前状态。改 build() 才会看到效果；改全局变量、initState 一般要 Hot Restart。
- pubspec.yaml 就是包管理：类似
package.json。版本号 ^1.2.0 表示 >=1.2.0 <2.0.0。
- doctor 是第一诊断工具：90% 的环境问题
flutter doctor -v 直接告诉你。
- Android 模拟器吃内存：开发机建议 16G 内存起步；不够就开真机调试（USB 调试 +
flutter devices 能看到）。
你可能会懵的地方
-
要不要装 VS Code 还是 Android Studio？
都可以写代码，但 Android Studio 必装（因为它带 SDK/模拟器）。日常编辑器任选，VS Code 装 Flutter 插件即可。
-
Windows 能开发 iOS 吗？
不能。iOS 编译依赖 Xcode，必须 macOS。变通方案：Codemagic 云端打包。
-
国内 Gradle / pub 下载慢？
配镜像：环境变量加 PUB_HOSTED_URL=https://pub.flutter-io.cn 和 FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn。
-
flutter run 卡在 "Running Gradle task 'assembleDebug'..."？
第一次构建要下载 Gradle，等 5-10 分钟正常。可以打开 android/gradle/wrapper/gradle-wrapper.properties 把 distributionUrl 换成腾讯镜像。
-
模拟器起来了但 flutter devices 看不到？
一般是 adb 冲突。flutter doctor 看 Android toolchain 是否打勾；重启 adb：adb kill-server && adb start-server。
错法对照
| 错法 | 问题 | 正解 |
|---|
Flutter 装在 C:\Program Files\flutter | 路径含空格，构建工具链报错 | 装到 C:\flutter 等无空格路径 |
跳过 flutter doctor --android-licenses | 第一次跑 Android 直接报 license 错 | 装完 Android SDK 立即执行并全 y |
| 改完代码疯狂重启 | 慢且丢状态 | 默认热重载，结构性改动再 Hot Restart |
把 pubspec.lock 加进 .gitignore | 团队成员依赖版本漂移 | App 项目要提交 lock，库项目才忽略 |
用 flutter create . 在含中文的目录 | 包名/路径解析失败 | 项目路径全英文小写 |
卡点急救
flutter: command not found：PATH 没生效，开新终端；Windows 检查用户变量 vs 系统变量。Waiting for another flutter command to release the startup lock：删除 <flutter>/bin/cache/lockfile。- 模拟器一直黑屏：进入模拟器设置 → Wipe Data；或删了重建一个，把 Graphics 改为 Software。
- iOS 报
CocoaPods not installed：sudo gem install cocoapods && pod setup。
- VS Code 找不到设备：底部状态栏点 "No Device" 选一个，再按 F5。
面试常问
-
Flutter 为什么能跨平台？
自带渲染引擎（Skia/Impeller），不依赖原生控件，自己画每一像素。所以 Android/iOS/Web 表现一致。
-
Hot Reload 原理？
Dart VM 支持增量编译。改动后只把变化的类和方法以 kernel 文件下发给正在运行的 VM，VM 替换类后调用 build 重建 Widget 树。
-
Flutter 项目里 android/ios 文件夹干嘛的？
原生壳工程。Flutter 代码通过 Platform Channel 与原生互调；签名、权限、启动图标都配置在这两边。
自测三问
flutter doctor 有哪几个关键项必须打勾才能跑 Android 模拟器？- 热重载和热重启有什么区别？各自适用于什么场景？
pubspec.yaml 和 pubspec.lock 的区别？团队项目应该提交哪个？
小结一句话
Flutter 环境的关键是 SDK + Android/iOS 工具链 + 一个能跑的设备，flutter doctor 全绿后就可以专注写代码。
延伸