mcpField
F
flutter-ui-patterns

flutter-ui-patterns

github.com/thienqo开发944 次安装1 天前更新
代码仓库

关于 flutter-ui-patterns

为 Flutter 开发者提供可维护、易测试的界面实现模式，重点是组件组合、状态边界和生命周期管理。内容侧重实现决策，不覆盖视觉层级与风格设计。

主要功能

  1. 01按界面职责拆分并复用组件
  2. 02优先使用不可变配置和 const 构造
  3. 03将副作用移出 build
  4. 04按生命周期管理控制器与状态
  5. 05测试渲染状态、交互与不同屏幕条件

适用场景

  1. 01实现带校验与错误反馈的表单
  2. 02规划组件状态归属和控制器释放
  3. 03验证不同主题、文字缩放与设备尺寸

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/thienqo/flutter-skills --skill flutter-ui-patterns

安装后在 Claude Code 中输入/flutter-ui-patterns确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

evals/
cases.json
references/
forms-and-input.md
widget-previews.md

详细介绍

Flutter UI 模式

构建声明式界面，让 Widget 树清晰反映状态，并易于测试。

视觉层级、令牌选择、排版、颜色、表面样式和美学方向属于 flutter-ui-design。本技能负责通过易于维护的 Widget 实现这些决策。

组合

  • 围绕内聚的 UI 概念、复用、隔离状态或测试价值提取 Widget，而不是按任意文件长度拆分。
  • 在适用时，优先使用不可变的 Widget 配置和 const 构造函数。
  • 避免在 build 中执行副作用；应通过生命周期安全的控制器、状态对象或显式回调触发副作用。
  • 使用项目主题和语义设计令牌，而不是散落的字面样式值。
  • 当 Material 和 Cupertino 的行为应有所不同时，保留平台惯例。
  • 为表单明确设置验证、焦点、提交和错误行为。
  • 保持键稳定且用途明确；不要使用随机或不断变化的键来强制重建。

状态边界

在创建控制器、焦点节点和动画控制器的生命周期中管理它们，并在该生命周期内释放。只有在其他组件需要协调状态时，才提升状态。

按需加载参考资料

  • 实现验证、焦点遍历、自动填充、异步提交或字段错误行为时，阅读表单和输入。
  • 添加或修复 Flutter Widget Previewer 注解和测试夹具时，阅读 Widget 预览。

验证

测试有意义的渲染状态和交互。检查文本缩放、支持时的键盘输入、浅色/深色主题，以及目标设备规格中最小和最大的规格。

来源

评论

支持 Markdown