# flutter_man

**Repository Path**: flutter_opz/flutter_man

## Basic Information

- **Project Name**: flutter_man
- **Description**: flutter 学习手册
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-01
- **Last Updated**: 2026-07-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Flutter 学习手册 (flutter_man)

用于展示和学习 Flutter 常用组件用法的示例应用，支持 Android、iOS、Web、Windows、macOS、Linux。

## 技术栈

| 类别 | 技术 | 说明 |
|------|------|------|
| 框架 | Flutter / Dart (`sdk: ^3.10.7`) | 跨平台 UI 与业务逻辑 |
| UI | Material Design 3 | `MaterialApp` + 亮/暗主题，跟随系统 |
| 代码高亮 | [`flutter_highlight`](https://pub.dev/packages/flutter_highlight) | 组件示例代码展示 |
| 图标字体 | `cupertino_icons` | iOS 风格图标补充 |
| 图标生成 | `flutter_launcher_icons`（dev） | 由 PNG 生成多平台启动图标 |
| 静态分析 | `flutter_lints`（dev） | Dart / Flutter 代码规范 |

无后端、无状态管理框架；页面状态以 `StatefulWidget` 本地管理，示例数据以静态 Dart 数据源提供。

## 架构说明

采用简洁的分层结构，按「入口 → 页面 → 组件 / 数据 / 主题」组织：

```text
main.dart
  └─ MaterialApp（主题 / 路由入口）
       └─ HomePage（抽屉导航 + AppBar）
            └─ ComponentPage（按分类渲染组件示例）
                 ├─ sample_data（示例元数据）
                 └─ CodeViewer（可折叠代码块）
```

- **入口层**（`lib/main.dart`）：创建 `FlutterLearningHandbook`，挂载亮色 / 暗色主题与首页。
- **页面层**（`lib/pages/`）：`HomePage` 负责分类切换与抽屉菜单；`ComponentPage` 根据分类展示对应组件 Demo。
- **组件层**（`lib/widgets/`）：可复用 UI，如 `CodeViewer`、`DrawerMenuItem`。
- **数据层**（`lib/data/` + `lib/models/`）：`sample_data` 提供示例列表；`MenuItem`、`ComponentExample` 描述菜单与示例结构。
- **主题层**（`lib/themes/`）：统一的 `AppTheme.lightTheme` / `darkTheme`。
- **资源层**（`assets/`）：应用图标、示例图片等静态资源。

交互主路径：侧边抽屉选择组件分类 → `HomePage` 更新当前分类 → `ComponentPage` 渲染预览与源码。

## 环境要求

- Flutter SDK（项目 `sdk: ^3.10.7`）
- 可选：`librsvg`（提供 `rsvg-convert`，用于 SVG 转 PNG）

```bash
# macOS 安装 rsvg-convert
brew install librsvg
```

## 快速开始

```bash
flutter pub get
flutter run
```

## 应用图标

图标源文件与产物：

| 文件 | 说明 |
|------|------|
| `assets/icon/logo.svg` | 矢量 Logo 源文件 |
| `assets/icon/app_icon.png` | 由 SVG 导出的 1024×1024 PNG，供应用内展示与图标生成 |

配置见 `pubspec.yaml` 中的 `flutter_launcher_icons` 段。

### 1. SVG Logo 转 PNG

在项目根目录执行：

```bash
rsvg-convert -w 1024 -h 1024 assets/icon/logo.svg -o assets/icon/app_icon.png
```

修改 `logo.svg` 后，需重新执行上述命令更新 `app_icon.png`。

### 2. PNG 生成各平台应用图标

```bash
# 确保依赖已安装
flutter pub get

# 根据 pubspec.yaml 中的 flutter_launcher_icons 配置生成图标
dart run flutter_launcher_icons
```

会覆盖生成 Android / iOS / Web / Windows / macOS 各平台图标资源。

完整流程（改 Logo 后一键更新）：

```bash
rsvg-convert -w 1024 -h 1024 assets/icon/logo.svg -o assets/icon/app_icon.png
dart run flutter_launcher_icons
```

## 编译与打包

### 开发运行

```bash
flutter run
flutter run -d chrome          # Web
flutter run -d macos           # macOS
```

### Android APK

```bash
# 通用 APK（含多 ABI，体积较大）
flutter build apk --release

# 按 ABI 分包（推荐分发，体积更小）
flutter build apk --release --split-per-abi
```

分包产物目录：

```text
build/app/outputs/flutter-apk/
├── app-armeabi-v7a-release.apk
├── app-arm64-v8a-release.apk
└── app-x86_64-release.apk
```

仅构建某一架构：

```bash
flutter build apk --release --target-platform android-arm64
flutter build apk --release --target-platform android-arm
flutter build apk --release --target-platform android-x64
```

### Android App Bundle（上架 Google Play）

```bash
flutter build appbundle --release
```

产物：`build/app/outputs/bundle/release/app-release.aab`

### 其他平台

```bash
flutter build ios --release
flutter build web --release
flutter build macos --release
flutter build windows --release
flutter build linux --release
```

### 清理后重新构建

```bash
flutter clean
flutter pub get
flutter build apk --release --split-per-abi
```

## 项目结构

```text
lib/
├── main.dart                 # 应用入口
├── pages/                    # 页面
│   ├── home_page.dart        # 首页（抽屉 + 分类切换）
│   └── component_page.dart   # 组件示例页
├── widgets/                  # 可复用组件
│   ├── code_viewer.dart
│   └── drawer_menu_item.dart
├── models/                   # 数据模型
├── data/                     # 示例静态数据
└── themes/                   # 亮/暗主题
assets/
├── icon/                     # Logo（SVG）与应用图标（PNG）
└── images/                   # 图片资源
android/ ios/ web/ macos/ windows/ linux/   # 各平台工程
```