mcpField
F
flutter-patterns

flutter-patterns

github.com/cleydson开发53126 次安装34 周前更新
代码仓库

关于 flutter-patterns

面向 Flutter 开发者的参考技能，涵盖 UI、测试、性能、安全和动画模式。它按开发任务整理示例与检查清单。

主要功能

  1. 01Widget 与布局模式
  2. 02单元、Widget 和集成测试
  3. 03性能优化检查清单
  4. 04安全与数据保护模式
  5. 05动画和转场示例

适用场景

  1. 01实现表单与导航
  2. 02规划 Flutter 测试覆盖
  3. 03排查列表或渲染卡顿
  4. 04应用安全存储和输入验证

安装

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

$npx skills add https://github.com/cleydson/flutter-claude-code --skill flutter-patterns

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

包含的文件

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

patterns/
flutter-animation-patterns.md
flutter-performance-checklist.md
flutter-security-patterns.md
flutter-testing-patterns.md
flutter-widget-patterns.md

详细介绍

Flutter 模式

一套全面的 Flutter 模式与最佳实践，久经实战检验，助力构建可用于生产环境的高质量应用。

概述

此技能提供可快速查阅的模式，涵盖：

  • Widget 模式：常见 UI 组件（卡片、列表、表单、对话框、导航）
  • 测试模式：单元测试、Widget 测试和集成测试方法
  • 性能模式：优化技巧和性能检查清单
  • 安全模式：安全最佳实践和漏洞防范
  • 动画模式：常见动画实现和过渡效果

何时使用此技能

在以下情况下使用此技能：

  • 快速查阅标准 Flutter UI 模式
  • 获取测试策略指导和示例
  • 查阅性能优化检查清单
  • 防范安全漏洞
  • 获取动画实现示例
  • 了解常见 Flutter 开发场景的最佳实践

模式类别

Widget 模式

参阅 patterns/flutter-widget-patterns.md，了解：

  • 卡片模式（基础、图片、自定义）
  • 列表模式（延迟加载、分区）
  • 带验证的表单模式
  • 对话框和底部操作表模式
  • 加载状态和空状态
  • 导航模式
  • Material 3 组件（SearchAnchor、SegmentedButton、NavigationBar、DropdownMenu）
  • DecoratedSliver 模式
  • 响应式布局（采用 Material 3 WindowSizeClass 断点）
测试模式

参阅 patterns/flutter-testing-patterns.md，了解：

  • 单元测试结构和最佳实践
  • Widget 测试方法
  • 集成测试模式
  • Mock 和 Stub 策略（Mockito 和 Mocktail）
  • 使用 bloc_test 测试 BLoC
  • Riverpod 测试模式
  • 使用 Patrol 测试原生交互
  • Golden 测试模式
  • 测试组织和命名约定
  • 覆盖率最佳实践
性能模式

参阅 patterns/flutter-performance-checklist.md，了解：

  • Impeller 渲染引擎注意事项
  • 构建方法优化
  • 尽量减少 Widget 重建
  • 列表和网格性能
  • 图片加载优化（WebP/AVIF、缓存）
  • 防止内存泄漏
  • 使用 Isolate.run() 进行后台计算
  • 渲染性能技巧
  • 着色器编译（由 Impeller 解决）
安全模式

参阅 patterns/flutter-security-patterns.md，了解：

  • 输入验证和净化
  • 安全存储实践（flutter_secure_storage）
  • API 安全和证书固定（Dio 5.x）
  • 身份验证和授权模式
  • 生物识别身份验证（Face ID、指纹）
  • iOS 隐私清单（自 iOS 17 起为必需项）
  • 数据加密方法
  • 常见漏洞防范（XSS、注入等）
动画模式

参阅 patterns/flutter-animation-patterns.md，了解：

  • 基础动画控制器
  • Tween 动画
  • Hero 动画
  • 页面过渡
  • 隐式动画
  • Material 3 动效模式（共享轴、容器变换）
  • Impeller 动画性能说明
  • 自定义动画模式

使用示例

示例 1：需要卡片 UI 模式

User: "I need to create a product card with an image and details"
→ Reference Widget Patterns for image card implementation

示例 2：编写测试

User: "How should I structure my widget tests?"
→ Reference Testing Patterns for widget test examples

示例 3：性能问题

User: "My list is laggy when scrolling"
→ Reference Performance Patterns for list optimization techniques

示例 4：安全问题

User: "How do I securely store user credentials?"
→ Reference Security Patterns for secure storage approaches

示例 5：添加动画

User: "I want to animate a page transition"
→ Reference Animation Patterns for page transition examples

模式质量

此技能中的所有模式均：

  • ✓ 经过生产环境测试，久经实战检验
  • ✓ 遵循 Flutter 最佳实践
  • ✓ 针对性能进行了优化
  • ✓ 注重安全性
  • ✓ 配有完善的代码示例文档

快速查阅

为了快速查找模式，每个类别文件都包含：

  • 完整、可运行的代码示例
  • 每种模式的适用场景说明
  • 常见问题及规避方法
  • 性能和安全注意事项

专业提示：结合不同类别的模式，可以构建全面的解决方案。例如，构建生产功能时，可以同时使用 Widget 模式、性能模式和安全模式。

评论

支持 Markdown