如何为 Flutter Boilerplate 新增一个完整功能模块？三步实战教程

如何为 Flutter Boilerplate 新增一个完整功能模块三步实战教程【免费下载链接】FlutterA boilerplate project for Flutter using RiverPod, Dio, go_router, Freezed and generated with very_good_cli项目地址: https://gitcode.com/gh_mirrors/flu/Flutter拿到一个成熟的 Flutter Boilerplate 项目却不知道从何下手是很多 Flutter 新手最常见的困惑。本文将带你拆解一个基于 RiverPod、Dio、go_router、Freezed 并配合 very_good_cli 生成的真实 Flutter Boilerplate用「模型 → 状态 → 界面」三步法手把手教你新增一个完整功能模块。学完这套套路你就能像搭积木一样往任何 Flutter 项目中快速添加新功能。为什么这个 Flutter Boilerplate 值得学习这个项目的核心价值在于它把「状态管理、网络请求、路由、数据模型、国际化」全部规范化了你新增模块时只需要复制现有模式即可无需从零设计架构RiverPod 状态管理通过注解自动生成 Provider告别手写样板代码Dio 网络层api_provider.dart 统一封装了 GET/POST、超时、Token 注入、断网重试go_router 路由类型安全的声明式路由页面跳转一目了然Freezed 数据模型不可变数据类 JSON 序列化一行注解全搞定very_good_cli规范的项目结构与高质量代码风格项目自带登录注册、书籍列表两个功能模块正好可以作为我们的「活教材」。克隆仓库后先观察 lib/feature/ 目录你会发现每个功能模块都有统一的四件套model数据模型、state状态、repository仓库、providerProvider、widget界面。第一步定义 Freezed 数据模型与状态任何功能模块的第一步都是先想清楚「数据长什么样」。以新增一个「任务清单」模块为例我们需要一个Todo模型和一个描述页面状态的状态类。用 Freezed 快速创建数据模型在lib/feature/todo/model/下新建todo.dart参考 book.dart 的写法几行注解就能同时得到不可变类、copyWith、比较和 JSON 序列化能力freezed class Todo with _$Todo { const factory Todo({ required int id, String? title, bool? completed, }) _Todo; factory Todo.fromJson(MapString, dynamic json) _$TodoFromJson(json); }用状态类表达页面五种情况参考 auth_state.dart 和 books_state.dart状态类同样用 Freezed 定义把loading、loaded、error等页面状态一次说清freezed class TodoState with _$TodoState { const factory TodoState.initial() _Initial; const factory TodoState.loading() _Loading; const factory TodoState.loaded(ListTodo todos) _Loaded; const factory TodoState.error(AppException error) _Error; }技巧模型和状态用 Freezed既能享受when/maybeWhen模式匹配的便利又能避免手写大量重复代码。写完记得运行make watch或derry watch让 build_runner 自动生成.freezed.dart和.g.dart文件。第二步打通 Repository 与 RiverPod Provider数据模型定义好后第二步就是让数据「流动」起来这是整个功能模块的骨架。Repository 负责发请求参考 auth_repository.dart 的模式Repository 通过构造器注入Ref从apiProvider获取封装好的 Dio 实例然后调用统一的_api.get()/_api.post()方法。响应统一为APIResponse类型用when(success:, error:)优雅地分派成功和失败逻辑。RiverPod Provider 负责管理状态Provider 是整个模块的「大脑」参考 auth_provider.dart只需一个riverpod注解代码生成器就会帮你创建好 NotifierProviderriverpod class TodoNotifier extends _$TodoNotifier { late final TodoRepository _repository ref.read(todoRepositoryProvider); override TodoState build() { return const TodoState.initial(); } Futurevoid fetchTodos() async { state await _repository.fetchTodos(); } }技巧如果你的模块需要在登录成功后自动加载数据可以参考 books_provider.dart 中的ref.listen(appStartNotifierProvider, ...)写法在 build 方法里监听应用启动状态实现「自动拉取」。第三步注册 go_router 路由并编写页面最后一步把模块「接到」应用上。先到 app_router.dart 中为新页面注册路由——用TypedGoRoute注解声明路径代码生成器会自动把新路由合并进$appRoutesTypedGoRouteTodoRoute(path: TodoRoute.path) class TodoRoute extends GoRouteData { const TodoRoute(); static const path /todos; override Widget build(BuildContext context, GoRouterState state) { return const TodoPage(); } }然后编写页面组件参考 home_page.dart 的写法用ref.watch(todoNotifierProvider)监听状态配合状态类的when方法分别渲染加载中、成功列表、错误提示三种 UI。跳转时只需一行context.go(TodoRoute().location)即可完成类型安全的导航。总结三步新增 Flutter 功能模块清单步骤核心动作参考文件① 数据层Freezed 定义模型与状态book.dart② 业务层Repository 发请求 RiverPod 管状态books_provider.dart③ 表现层go_router 注册路由 Widget 渲染app_router.dart最后别忘了运行flutter pub run build_runner build --delete-conflicting-outputs生成所有代码再跑一次flutter analyze检查代码质量。掌握了「模型 → 状态 → 界面」这套三步法你就能在 Flutter Boilerplate 上快速迭代任何新功能把精力专注在真正的业务逻辑上而不是重复造轮子。【免费下载链接】FlutterA boilerplate project for Flutter using RiverPod, Dio, go_router, Freezed and generated with very_good_cli项目地址: https://gitcode.com/gh_mirrors/flu/Flutter创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考