1. Flutter开发环境搭建与首个计数器应用

环境搭建的完整链路

Flutter 开发环境由四层组成：SDK 工具链（flutter 命令、Dart SDK）、平台工具链（Android SDK / Xcode）、编辑器插件（VS Code 或 Android Studio 的 Flutter/Dart 插件）、运行目标（模拟器、真机或桌面/Web 设备）。四层缺一不可，且必须通过 flutter doctor 逐项校验。

Windows 安装步骤

1. 下载 Flutter SDK 稳定版压缩包（flutter_windows_x.x.x-stable.zip），解压到不含空格和中文的路径，例如 C:\src\flutter。
2. 将 C:\src\flutter\bin 加入系统 Path 环境变量，重新打开终端。
3. 安装 Android Studio，在 SDK Manager 中勾选 Android SDK Command-line Tools、Android SDK Platform-Tools、Android SDK Build-Tools。
4. 运行 flutter doctor --android-licenses，逐条输入 y 接受许可。
5. 在 Android Studio 的 Device Manager 中创建一个 AVD（推荐 Pixel 7 / API 34）。

macOS 安装步骤

1. 推荐使用 Homebrew：brew install --cask flutter；或手动下载解压到 ~/development/flutter。
2. 将 export PATH="$PATH:$HOME/development/flutter/bin" 写入 ~/.zshrc 并执行 source ~/.zshrc。
3. 安装 Xcode（App Store），执行 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer，再运行 sudo xcodebuild -runFirstLaunch。
4. 安装 CocoaPods：sudo gem install cocoapods。
5. 打开 iOS Simulator（open -a Simulator）或创建 Android AVD。

IDE 配置要点

• VS Code：安装 Flutter 扩展（会自动带入 Dart 扩展）。在 settings.json 中设置 "dart.flutterSdkPath" 指向 SDK 根目录。
• Android Studio：Settings → Plugins 安装 Flutter 与 Dart 插件，重启后在 Languages & Frameworks → Flutter 中指定 SDK 路径。
• 两者都需确认 flutter 与 dart 命令在集成终端中可直接调用。

创建并运行计数器应用

# 1. 创建项目（项目名必须小写+下划线）
flutter create counter_app
cd counter_app

# 2. 查看可用设备
flutter devices

# 3. 运行到指定设备（示例：Chrome）
flutter run -d chrome

# 4. 运行到 Android 模拟器
flutter run -d emulator-5554

默认生成的 lib/main.dart 就是一个计数器应用：界面中央显示计数值，右下角有一个 FloatingActionButton，点击后调用 setState 使计数加一。首次运行会经历 Dart 编译与 Gradle/Xcode 构建，耗时较长属正常现象。

验证热重载

应用运行后，终端会进入交互模式。此时修改 lib/main.dart 中的任意可见文本（例如把 'You have pushed the button this many times:' 改为 '点击次数：'），保存文件，然后：

• 在终端按 r 触发热重载（Hot Reload）：界面在 1 秒内更新，且计数值保持不变。
• 按 R 触发热重启（Hot Restart）：界面更新，但计数值归零。
• 在 VS Code 中保存文件即自动热重载；Android Studio 中点击闪电图标。

常见问题排查