Notes

Appearance

Flutter 2026 现代化实战 - 一个月学习规划表 ​

目标：从零开始，使用现代化技术栈（Riverpod + GoRouter + MVVM）独立开发一个完整的 Flutter 应用。 时间投入：工作日 2 小时/天 (共 40 小时) + 周末 5 小时/天 (共 40 小时) ≈ 80 小时核心理念：不求快，求懂。每一行代码都要知道“为什么这么写”。

📅 第 1 周：地基、架构与第一个页面 (约 20 小时) ​

[工作日] 周一：环境配置与架构搭建 (2h) ​

  • [ ] 理解：搞懂 MVVM 与 Riverpod 的基本概念（阅读官方文档或我们的 LEARNING_GUIDE.md）。
  • [ ] 实操：初始化项目，配置 pubspec.yaml (已完成)。
  • [ ] 实操：建立规范的目录结构 (lib/pages, lib/view_models 等)。

[工作日] 周二：路由系统 GoRouter (2h) ​

  • [ ] 理解：GoRouter 的页面栈管理原理。
  • [ ] 实操：创建 SplashPage (闪屏页) 和 LoginPage (登录页) 的空壳。
  • [ ] 实操：配置 routers/app_router.dart，实现从闪屏页自动跳到登录页。

[工作日] 周三：资源管理与屏幕适配 (2h) ​

  • [ ] 工具：运行 flutter_gen 生成图片索引。
  • [ ] 实操：配置 flutter_screenutil，确保 UI 在不同手机上不走样。
  • [ ] 实操：在 ThemeData 里配置全局颜色和字体样式。

[工作日] 周四：Widget 封装初体验 (2h) ​

  • [ ] 实操：封装一个通用的 MyTextField (输入框) 和 MyButton (按钮)。
  • [ ] 重点：学习如何通过参数自定义组件样式，而不是复制粘贴代码。

[工作日] 周五：登录页 UI 实现 (2h) ​

  • [ ] 实操：画出完整的登录页面 UI（Logo、输入框、按钮、底部协议）。
  • [ ] 挑战：处理键盘弹出时遮挡输入框的问题。

[周末] 周六：Riverpod 状态管理核心 (5h) ​

  • [ ] 深入：学习 NotifierProvider 和 AsyncValue。
  • [ ] 实操：创建 LoginViewModel，模拟登录逻辑（点击按钮 -> 转圈 -> 成功/失败）。
  • [ ] 实操：将 UI (View) 与 ViewModel 绑定，根据状态显示 Loading 或 错误提示。

[周末] 周日：第一周复盘与完善 (5h) ​

  • [ ] 实操：实现“密码可见/不可见”的小功能（使用 flutter_hooks 的 useState）。
  • [ ] 复盘：检查代码是否符合 MVVM 规范，UI 中是否包含业务逻辑（不应该有）。
  • [ ] 预习：下周要学的网络请求 Dio。

📅 第 2 周：网络层与首页框架 (约 20 小时) ​

[工作日] 周一：网络层封装 (2h) ​

  • [ ] 实操：封装 Dio 单例，配置超时时间、BaseUrl。
  • [ ] 实操：添加拦截器（Interceptor），统一打印请求日志。

[工作日] 周二：统一异常处理 (2h) ​

  • [ ] 实操：处理 401 (未登录)、500 (服务器错误) 等状态码。
  • [ ] 实操：封装统一的 APIResponse 泛型类，解析后端返回的 { code, msg, data } 结构。

[工作日] 周三：Mock 数据与真实请求 (2h) ​

  • [ ] 实操：使用 json_to_dart 生成用户模型 (User Model)。
  • [ ] 实操：将登录页的“模拟登录”替换为“真实请求”（可以使用 mock 接口）。

[工作日] 周四：首页底部通过 (BottomNavigationBar) (2h) ​

  • [ ] 实操：创建 MainPage，使用 Scaffold 的 bottomNavigationBar。
  • [ ] 实操：实现“首页”、“订单”、“我的”三个 Tab 的切换逻辑。

[工作日] 周五：首页 UI 搭建 (2h) ​

  • [ ] 实操：学习 Sliver (CustomScrollView) 系列组件，实现复杂的滚动效果。
  • [ ] 实操：实现首页的 Banner 轮播图。

[周末] 周六：复杂列表与分页 (5h) ​

  • [ ] 难点：实现“上拉加载更多、下拉刷新” (SmartRefresher)。
  • [ ] 实操：封装一个通用的 PaginationViewModel，处理分页逻辑。
  • [ ] 实操：在首页列表应用这个通用逻辑。

[周末] 周日：本地存储与自动登录 (5h) ​

  • [ ] 实操：使用 SharedPreferences 保存登录 Token。
  • [ ] 实操：改造 SplashPage，启动时检查 Token，自动决定跳登录页还是首页。
  • [ ] 实操：实现“退出登录”功能，清理本地数据。

📅 第 3 周：功能模块深耕 (约 20 小时) ​

[工作日] 周一 ~ 周三：订单模块 (6h) ​

  • [ ] 实操：实现“订单列表”的多状态视图 (全部、待支付、已完成)。
  • [ ] 实操：学习 Flutter 的 TabView 联动。
  • [ ] 实操：订单详情页的传参跳转 (GoRouter 传递对象)。

[工作日] 周四 ~ 周五：个人中心与设置 (4h) ​

  • [ ] 实操：实现“我的”页面，列表项组件封装。
  • [ ] 实操：夜间模式/多语言切换的实现原理（Provider 全局监听）。

[周末] 周六 ~ 周日：复杂交互与动画 (10h) ​

  • [ ] 挑战：给某些按钮添加 Hero 动画。
  • [ ] 挑战：实现一个自定义的弹窗 (Dialog) 系统。
  • [ ] 优化：使用 flutter_img 或 cached_network_image 优化图片加载体验。

📅 第 4 周：查漏补缺与发布 (约 20 小时) ​

[工作日] 周一 ~ 周三：代码重构与优化 (6h) ​

  • [ ] Code Review：自己检查代码，提取重复逻辑到 common 或 utils。
  • [ ] 性能优化：使用 DevTools 查看是否存在重复 Build，优化 const 修饰符。

[工作日] 周四 ~ 周五：打包与发布 (4h) ​

  • [ ] 实操：通过 flutter build apk 和 flutter build ios 打包。
  • [ ] 配置：修改 App 的名称、图标 (App Icon)。

[周末] 周六 ~ 周日：总结与扩展 (10h) ​

  • [ ] 文档：给自己的项目写一个 README.md。
  • [ ] 扩展：尝试引入一个新的库（比如图表库 fl_chart）并集成进去。
  • [ ] 庆祝：奖励自己一顿大餐！🎉

🔥 你的当前进度：第 1 周 / 周一 ​

任务：

  1. [x] 创建 pubspec.yaml
  2. [ ] 执行 flutter pub get (上一步被取消了，记得手动运行)
  3. [ ] 创建 MVVM 目录结构 (下一步要做这个)