Skip to content

HaierEnergy · Flutter 学习文档

基于 HaierEnergy(海尔新能源 App,Flutter)真实项目代码梳理的体系化学习教程。

适合谁

前端(React / Vue)转 Flutter 的初学者。每个 Flutter / Dart 知识点都先给一个前端类比,再落到本项目真实代码。

项目背景

包名com.haier.energy.platform
Dart import 前缀package:haierenergy/...
Flutter SDK>=3.4.3 <4.0.0
规模lib/ 449 个 Dart 文件
来源由 uni-app 老项目迁移而来
技术栈Riverpod 2.6 + GoRouter 14 + Freezed 2.5 + Retrofit 4 + Dio 5

文档清单与阅读顺序

序号 NN 全局递增,按序号读即可

序号类别标题
0001-入门导览学习路线图先读这篇
0102-Dart基础Dart 语言基础
0203-Flutter基础Flutter 核心基础
0303-Flutter基础Flutter 渲染原理与生命周期
0403-Flutter基础Flutter 布局与滚动进阶
0503-Flutter基础Flutter 交互与动画
0602-Dart基础Dart 异步并发与进阶语法
0704-项目架构项目架构总览
0804-项目架构状态管理 Riverpod
0904-项目架构数据层链路
1005-项目实战页面开发实战
1104-项目架构组件与主题
1205-项目实战分页与列表
1305-项目实战路由与导航
1406-平台能力国际化
1506-平台能力权限与设备能力
1607-工程化工程化与调试
1707-工程化常见陷阱与速查表
1806-平台能力本地存储与持久化
1907-工程化测试实战:单元·Widget·集成
2007-工程化异常捕获与错误监控

序号 06 虽属「02-Dart基础」,但阅读顺序排在 03~05 之后—— 事件循环、Isolate、Stream 需要先理解 Flutter 单线程渲染模型才好消化。 详见 00-学习路线图 的说明。

三条常用捷径

你的情况读哪几篇
急着改 bug(第一天就要动代码)02 → 07 → 17
只想能写页面01 → 02 → 08 → 10 → 11
只要接接口01 → 07 → 09

每章结构

  1. 前端概念对照 —— 开篇一张表,把新知识挂到已有认知上
  2. 本项目真实代码 —— 标注 文件:行号 + 关键片段,可跳转核对
  3. 动手练习 —— 可运行的最小 Demo
  4. 自检清单 —— 「学完你应该能做到什么」

文档可信度约定

  • 每段代码都从 HaierEnergy 当前代码核实后写入,标注 文件:行号
  • 不粘贴大段代码(只给 10~20 行关键片段),避免代码改动后文档腐烂
  • 该项目 docs/ 下另有 15 篇既有文档,其中 docs/README.md 有三处已过时(包名、i18n 入口、学习路径目录)。冲突时以本系列为准,详见 00-学习路线图 的「现有文档地图」

配套练习场

HaierEnergy 项目内 lib/main_playground.dart 是专为本文档新建的空白练习场(不属于业务代码,可随时删除):

bash
fvm flutter run -t lib/main_playground.dart

03~06 章的通用知识 Demo 粘进去即可运行。其余章节的练习走 test/ 下的 widget test。