SuperAPI AI 工具集

flutter-bloc-development

编程与开发

查看项目

更新于 10-15 08:14

技能介绍

用途

该技能为 Flutter 代码库中的开发工作提供一套强制规范,核心是 BLoC 状态管理、严格的架构分层,以及必须使用设计系统常量。它适用于创建新页面或功能、仅新增组件、进行数据集成,以及重构现有代码等场景。

主要能力

技能通过决策树引导开发者选择实现路径:

  • 新页面/功能:完整实现,包括创建功能文件夹、定义 BLoC(事件、状态、BLoC 三个文件)、创建数据层(数据源、仓库、模型)、构建 UI(页面与组件)、创建 barrel 文件。
  • 仅新增组件:在表现层处理,功能专属组件放 feature/view/widgets/,共享组件放 shared/widgets/,必须使用设计系统常量,必要时连接已有 BLoC。
  • 数据集成:仅处理数据层,创建数据源与仓库,并接入已有或新建 BLoC。
  • 重构:识别违规项,包括硬编码颜色/间距/字体、UI 中的业务逻辑、数据源之外的直接 SDK 调用、异步操作前缺少 Loading 状态、事件/状态缺少 Equatable、错误处理不当等。

架构结构

采用功能优先(feature-first)结构,官方 BLoC 推荐方式:

  • 每个功能文件夹包含 bloc/、data/(datasources、repositories、models、data.dart)、view/(页面、widgets、view.dart)以及功能 barrel 文件。
  • shared/ 存放跨功能代码,包括共享数据源、模型、可复用组件和设计系统工具。
  • 判断标准:仅一个功能使用的 API 端点、模型放 feature/data/;多个功能使用的 API 客户端、模型放 shared/data/。

使用方式

BLoC 实现遵循事件 → 状态 → BLoC 三文件模式。事件和状态均继承 Equatable。BLoC 中每个事件处理器必须遵循 Loading → Success/Error 模式,异步操作前必须先 emit Loading,不可跳过。

数据层遵循数据流:UI 事件 → BLoC(emit Loading)→ 仓库 → 数据源(SDK)→ 响应 → 仓库(映射为实体)→ BLoC(emit Success/Error)→ UI。数据源只负责后端 SDK 调用,仓库负责编排与映射。

设计系统为强制要求:颜色使用 AppColors.primary、AppColors.error 等;间距使用 AppSpacing.xs/sm/md/lg/xl 及 screenHorizontal/screenVertical;圆角使用 AppRadius.sm/md/lg/xl;字体使用 AppTypography 或 theme.textTheme。禁止内联十六进制颜色、硬编码 padding、内联圆角与文字样式。

UI 模式提供页面模板与 BlocConsumer 模式:通过 listener 处理错误并显示 SnackBar(背景色为 AppColors.error),通过 builder 根据状态返回加载指示器、成功组件或空组件。

适用场景

适用于所有在该 Flutter 代码库中进行的开发工作,尤其是需要遵循统一架构与设计系统的团队协作场景。

限制

技能文档未提供具体安装命令、依赖版本、平台支持范围或收费信息,这些内容暂未提供。