外观
Flutter
从一个能运行的页面出发，逐步掌握布局、交互、数据与工程组织，再回到源码理解页面为什么这样更新。
本专题参考 Arcticfox《Flutter 全栈式开发指南》 的章节脉络，按「环境与基础 → UI 与交互 → 进阶实践 → 原理与发布」重新整理。这里提供独立编写的知识笔记和练习；原课程的完整讲解请阅读原站。
阅读约定
先具备 Dart 的类型、空安全、集合、类与异步基础。示例采用空安全语法；运行前用 flutter --version 记录自己的 SDK 版本。原课程部分内容较早，安装方式、平台要求和 API 迁移以各篇附带的官方文档为准。
学习路线
| 阶段 | 阅读笔记 | 要解决的问题 | 完成标志 |
|---|---|---|---|
| 01 · 环境与基础 | 环境搭建与 Dart 准备 | 怎样创建、运行和调试项目？ | 在一个目标设备上运行首屏 |
| 02 · UI 快速上手 | 页面、控件与布局 | 如何组织页面、滚动列表和资源？ | 完成带搜索栏的笔记列表 |
| 03 · 生命周期与状态 | 生命周期与状态管理 | 状态放哪里，何时更新和释放？ | 搜索输入能驱动列表过滤 |
| 04 · 交互与导航 | 事件、路由与对话框 | 如何处理表单、跳转和返回结果？ | 详情页编辑后返回结果 |
| 05 · 数据实践 | 网络、模型与持久化 | 如何处理加载、失败与本地保存？ | 页面能展示请求结果并重试 |
| 06 · 跨平台 | 平台集成与 Web 适配 | 哪些代码能共享，哪些需要适配？ | 验证移动端和 Web 的关键流程 |
| 07 · UI 进阶 | 动画与自定义绘制 | 如何选择动画和自定义控件方案？ | 实现进度动画并正确释放资源 |
| 08 · 框架原理 | 三棵树与页面更新 | setState 之后发生了什么？ | 能跟踪一次更新的调用路径 |
| 09 · 工程交付 | 测试、性能与发布 | 怎样判断功能正确、性能可用？ | 通过测试并安装 release 产物 |
初学者按顺序阅读；已有项目经验时，可以从 布局问题、异步状态 或 更新流程 直接进入。
对照参考课程
| 原课程主题 | 本站整理 |
|---|---|
| 环境篇、Flutter 环境搭建 | 环境搭建与 Dart 准备 |
| 页面框架、基础控件、容器与布局、布局案例 | 页面、控件与布局 |
| Widget 与生命周期、状态管理 | 生命周期与状态管理 |
| 事件与通知、导航栏、路由与对话框、功能控件 | 事件、路由与对话框 |
| 资源管理、第三方库、文件与网络、数据持久化 | 页面、控件与布局；网络、模型与持久化 |
| 兼容 Web 版、原生能力扩展 | 平台集成与 Web 适配 |
| 动画、自定义控件、Canvas、RenderObject | 动画与自定义绘制 |
| 框架实现、启动、页面更新、引擎、事件与路由源码 | 三棵树与页面更新 |
| 综合案例、注册登录案例、打包发布 | 下方综合练习；测试、性能与发布 |
综合练习：个人笔记应用
用同一个小项目串联知识点，比孤立地练习每种控件更容易发现职责边界。
- 列表与详情：用
Scaffold、ListView.builder和详情页呈现笔记；窄屏纵向排列，宽屏限制内容宽度。 - 搜索与编辑：输入关键字过滤列表；进入编辑页后保存并返回结果，取消时保留原内容。
- 数据与状态：接入笔记接口，区分加载、空数据、成功和错误；让 Repository 负责数据访问。
- 本地与平台：保存主题偏好；为原生能力提供 Web 降级方案，验证刷新和浏览器返回。
- 交付与复盘：测试搜索、编辑和失败重试；在真机分析滚动与动画，产出可安装或可访问的 release 版本。
需要练习登录时，可增加「表单校验 → 登录请求 → 会话状态 → 退出清理」流程。前端路由根据会话状态切换页面，数据权限仍由服务端校验。
遇到问题从哪里查
| 现象 | 先检查 |
|---|---|
| 黄黑条、无限高度、列表不显示 | 父级约束、Flex 与滚动方向 |
| 页面返回后仍触发更新、输入控制器泄漏 | mounted 与资源所有权 |
| 页面重建就重复请求、旧结果覆盖新结果 | Future 的创建位置与请求竞态 |
| Web 编译失败或插件不可用 | 平台隔离与兼容性检查 |
| 动画卡顿、重绘范围过大 | 按构建、布局、绘制定位性能 |