01_环境搭建与项目结构

Flutter 环境安装、第一个项目创建、项目目录结构解析。

---

安装 Flutter SDK

# macOS — 推荐用 Homebrew
brew install --cask flutter

# 或手动下载
git clone https://github.com/flutter/flutter.git -b stable
# 将 flutter/bin 目录加入 PATH（写入 ~/.zshrc 或 ~/.bashrc）
export PATH="$PATH:/path/to/flutter/bin"

# Windows — 下载 SDK zip 解压，将 bin 目录加入系统 PATH

---

验证环境

flutter doctor

输出示例（全部 ✓ 才算完整）：

[✓] Flutter (Channel stable, 3.x.x)
[✓] Android toolchain
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] VS Code (version 1.x.x)
[✓] Connected device (2 available)

---

推荐 VS Code 插件

插件	用途
Flutter	语法高亮、补全、调试、Hot Reload
Dart	Dart 语言支持（Flutter 插件自动安装）
Pubspec Assist	快速搜索并添加 pub 包
Flutter Widget Snippets	常用 Widget 代码片段

---

创建第一个项目

# 创建新项目
flutter create my_app
cd my_app

# 运行（自动检测连接的设备/模拟器）
flutter run

# 指定目标平台
flutter run -d chrome    # Web
flutter run -d ios       # iOS 模拟器
flutter run -d android   # Android 模拟器

Hot Reload vs Hot Restart（开发时常用）：

快捷键	功能	类比 Web
r	Hot Reload — 热更新 UI，保留状态	HMR
R	Hot Restart — 完全重启，清除状态	重新刷新页面
q	退出	—

---

项目目录结构

my_app/
├── lib/                     ← 主要代码目录（等同于 src/）
│   ├── main.dart            ← 入口文件（等同于 main.js / index.js）
│   ├── pages/               ← 页面组件
│   ├── widgets/             ← 可复用组件
│   ├── models/              ← 数据模型（类型定义）
│   ├── services/            ← 网络/业务服务
│   └── utils/               ← 工具函数
├── assets/                  ← 静态资源
│   ├── images/
│   └── fonts/
├── test/                    ← 测试文件
├── android/                 ← Android 原生代码
├── ios/                     ← iOS 原生代码
├── web/                     ← Web 平台入口
└── pubspec.yaml             ← 包管理文件（等同于 package.json）

---

pubspec.yaml 详解

name: my_app
description: A new Flutter project.
version: 1.0.0+1              # 版本号+构建号（发布到应用商店时用）

environment:
  sdk: '>=3.0.0 <4.0.0'      # Dart SDK 版本要求

dependencies:                  # 运行时依赖（类比 package.json dependencies）
  flutter:
    sdk: flutter
  http: ^1.1.0
  provider: ^6.1.0
  shared_preferences: ^2.2.0

dev_dependencies:              # 开发依赖（类比 devDependencies）
  flutter_test:
    sdk: flutter
  flutter_lints: ^3.0.0

flutter:
  uses-material-design: true   # 使用 Material 图标库
  assets:                      # 注册静态资源（必须声明才能在代码中使用！）
    - assets/images/
    - assets/data/config.json
  fonts:                       # 注册自定义字体
    - family: MyFont
      fonts:
        - asset: assets/fonts/MyFont-Regular.ttf
        - asset: assets/fonts/MyFont-Bold.ttf
          weight: 700

# 安装依赖（类似 npm install）
flutter pub get

# 添加新包（类似 npm install xxx）
flutter pub add http

# 升级依赖
flutter pub upgrade

---

main.dart 入口文件

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());   // 类似 ReactDOM.render() 或 createApp().mount()
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(    // 应用根容器，提供主题、路由、国际化等能力
      title: 'My App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}