Flutter 动画课程 | Code With Andrea

本仓库包含我 Flutter 动画课程 中的所有项目。

本课程的主要项目是 Flutter 习惯追踪应用，是 Streaks App 的（简化版）克隆。

项目结构

整个课程包含四个 项目

• 颜色 / 数字游戏（带隐式动画）：该项目 位于此处，并在第 1 部分介绍
• Flutter 入门演示项目：该项目 位于此处，并在第 1 部分介绍
• Flutter 秒表应用：该项目 位于此处，并在第 2 部分介绍
• Flutter 习惯追踪应用：该项目 位于此处，并在第 3 至 10 部分（课程其余部分）介绍

注意：此项目中的每个 commit 都对应课程中的一个特定课程。

课程大纲

1. 简介和隐式动画

1. 课程大纲和资源
2. [文章] 加入 Slack 上的“Code With Andrea”+ 课程问答
3. [文章] Flutter 安装和 IDE 设置
4. 动画简介
5. 下载动画演示项目
6. 使用 AnimatedContainer 进行隐式动画
7. [练习] AnimatedOpacity
8. 动画曲线
9. TweenAnimationBuilder 入门
10. 使用 TweenAnimationBuilder 制作 HSV 颜色动画
11. 隐式动画总结

2. UI 挑战：秒表应用

1. 模块介绍
2. 秒表应用的起始项目
3. 暗黑模式和自定义系统 UI 叠加
4. 创建周期性计时器
5. Ticker 和 TickerProvider
6. 创建独立的 StopwatchRenderer 小部件
7. 使用 AspectRatio 调整秒表 UI 大小
8. 矩阵变换
9. 从 LayoutBuilder 获取圆的半径
10. 实现动画指针
11. 完成秒表 UI（第一部分）
12. 完成秒表 UI（第二部分）
13. 添加开始/停止/重置功能（第一部分）
14. 添加开始/停止/重置功能（第二部分）
15. 使用 Ticker 时的性能和测试注意事项！

3. 习惯追踪应用概览

1. 习惯追踪应用：简介
2. 下载起始项目
3. Linting 规则
4. 代码解析：项目资源
5. 代码解析：颜色和主题

4. 显式动画

1. 模块介绍 & 起始项目
2. 任务完成环：技术规划
3. CustomPainter 简介
4. 使用 Canvas 绘制任务完成环
5. 使用 AnimationController 制作显式动画
6. 使用 AnimationController 和 AnimatedBuilder 制作动画任务完成环
7. 使用 GestureDetector 控制动画
8. 在动画任务中添加一个居中的 SVG 图标
9. 任务完成 UI 调整
10. 任务完成状态和最终调整
11. Bug 修复：处理点击取消手势
12. 添加任务名称
13. 在 GridView 中排列多个任务
14. 项目完成和总结

5. 使用 Hive 进行本地数据持久化

1. 模块介绍
2. 技术规划：本地 vs 远程存储
3. 起始项目概览
4. Hive 简介
5. 使用 Hive 创建模型类
6. 使用代码生成创建类型适配器
7. 创建 HiveDataStore
8. 在 main() 中创建演示任务
9. 使用 uuid 包创建唯一的任务 ID
10. 使用 ValueListenableBuilder 读取任务
11. 总结

6. 使用 Riverpod 进行状态管理

1. 模块介绍 & 起始项目
2. Riverpod 简介
3. 使用 Provider 和 Consumer 创建和使用数据存储
4. 使用 ProviderScope 进行依赖覆盖
5. TaskState 数据建模
6. 创建和使用 TaskState Hive 模型类
7. 在 AnimatedTask 小部件中添加 onCompleted 回调
8. 创建 TaskWithNameLoader
9. 总结 + 使用 Widget Inspector

7. 页面翻转动画

1. 模块介绍：页面翻转过渡
2. 起始项目和代码解析
3. 使用 WidgetBuilders 设计页面翻转小部件 API
4. 使用 GlobalKey 修改子小部件的状态
5. AnimationController 设置
6. AnimatedBuilder vs AnimatedWidget
7. 使用 Transform 和 Matrix4 进行旋转
8. 交互式页面翻转过渡
9. Widgets、Elements 和 Keys
10. 附加挑战：翻卡游戏

8. 高级主题

1. 模块介绍：高级主题
2. 起始项目和代码解析
3. 显示底部面板
4. 创建 SlidingPanelAnimator
5. 使用 SlidingPanelAnimator
6. 动画滑动面板
7. 管理应用主题状态更改：概述
8. 使用 StateNotifier 实现 AppThemeManager 类
9. 创建和使用 AppThemeManager providers
10. 应用 AppThemeSettings
11. 使用 ImplicitlyAnimatedWidget 进行高级动画主题

9. 更多显式动画

1. 模块介绍
2. 起始项目 & 代码解析
3. 控制 TasksGrid 小部件上的动画
4. 添加一个 AnimatedWidget 子类来缩放小部件
5. 交错动画
6. 添加 AddTaskItem 小部件
7. 使用 Opacity 小部件进行淡入/淡出动画
8. 使用 FadeTransition 和 ScaleTransition 进行显式动画
9. 概述：Flutter 中的内置过渡 vs 隐式动画小部件
10. Bug 修复：在编辑模式下禁用任务完成

10. 添加和编辑任务

1. 模块介绍：添加和编辑任务
2. 导航到添加任务和编辑任务页面
3. 概览：带有 slivers 的 AddTaskPage
4. 概览：TaskDetailsPage 和 SelectIconPage
5. 概览：引导
6. 结论和后续步骤

附加资源

Flutter 文档中的有用资源

• 动画简介 | Flutter.dev
  • 动画概述
  • 动画教程
  • 隐式动画
  • Hero 动画
  • 交错动画
• 隐式动画 Codelab | Flutter.dev
• 动画教程 | Flutter.dev
• 动画和运动小部件 | Flutter.dev
• 减少移动端的 shader 编译卡顿 | Flutter.dev

Code With Andrea 的更多 Flutter 动画教程

• 8 分钟学会 Flutter 动画 + GitHub 上的免费画廊应用
• Flutter 动画：交互式页面翻转小部件
• Flutter 动画：交互式页面翻转小部件 [第二部分]
• 如何减少 AnimationController 的样板代码：Flutter Hooks vs 扩展 State 类
• Flutter：为什么 TweenAnimationBuilder 和 AnimatedBuilder 有 child 参数？
• 使用 Flutter 隐式动画制作颜色/数字游戏
• Flutter Timer vs Ticker：案例研究
• Flutter：如何使用 CustomPainter 绘制任务完成环
• Flutter：使用 AnimationController 和 AnimatedBuilder 制作动画任务完成环

我的 GitHub Flutter 动画画廊

• Flutter 动画画廊

我的 pub.dev 动画包

• page_flip_builder：一个自定义 Flutter 小部件，可在您的应用中实现交互式页面翻转过渡。
• pushable_button：一个 3D 可按压按钮，非常适合游戏或应用中的重要 CTA。

流行的 Flutter 动画包

• Rive：一个实时交互式设计和动画工具。
• SpinKit：一组动画加载指示器，您可以在应用中使用它们。
• Animations：预制的动画，用于实现常见效果。
• Funvas：一个不断增长的免费示例集合，展示如何根据时间和数学函数创建基于 Canvas 的动画。
• Simple Animations：一个强大的包，可以更轻松地为常见用例实现自定义动画。
• Staggered Animations：轻松地为您的 ListView、GridView、Column 和 Row 子项添加交错动画。
• Spring：一组 12 个基于弹簧动画效果的小部件。

其他很棒的 Flutter 动画教程

• Marcin Szałek – Flutter：滚动到完美 – Flutter Warsaw #15

Streaks 应用

本课程的主要项目基于此应用

• Streaks 应用主页

该应用的全套设计可以在这里找到

• Streaks | mobbin.design

许可证：MIT

GitHub

查看 Github