Back to Details

flutter-patterns

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Flutter Patterns

Flutter开发模式

A comprehensive collection of battle-tested Flutter patterns and best practices for building production-quality applications.
这是一套经过实战检验的Flutter开发模式与最佳实践合集，用于构建生产级质量的应用程序。

Overview

概述

This skill provides quick-reference patterns for:
  • Widget Patterns: Common UI components (cards, lists, forms, dialogs, navigation)
  • Testing Patterns: Unit, widget, and integration testing approaches
  • Performance Patterns: Optimization techniques and performance checklists
  • Security Patterns: Security best practices and vulnerability prevention
  • Animation Patterns: Common animation implementations and transitions
本资源提供以下快速参考模式：
  • Widget模式：通用UI组件（卡片、列表、表单、对话框、导航）
  • 测试模式：单元测试、Widget测试与集成测试方法
  • 性能模式：优化技巧与性能检查清单
  • 安全模式：安全最佳实践与漏洞防范
  • 动画模式：通用动画实现与过渡效果

When to Use This Skill

适用场景

Use this skill when you need:
  • Quick reference for standard Flutter UI patterns
  • Testing strategy guidance and examples
  • Performance optimization checklists
  • Security vulnerability prevention
  • Animation implementation examples
  • Best practices for common Flutter development scenarios
当你有以下需求时，可使用本资源：
  • 快速查阅标准Flutter UI模式
  • 测试策略指导与示例
  • 性能优化检查清单
  • 安全漏洞防范
  • 动画实现示例
  • 常见Flutter开发场景的最佳实践

Pattern Categories

模式分类

Widget Patterns

Widget模式

See patterns/flutter-widget-patterns.md for:
  • Card patterns (basic, image, custom)
  • List patterns (lazy loading, sectioned)
  • Form patterns with validation
  • Dialog and bottom sheet patterns
  • Loading and empty states
  • Navigation patterns
  • Responsive layouts
详见patterns/flutter-widget-patterns.md中的内容：
  • 卡片模式（基础型、图片型、自定义型）
  • 列表模式（懒加载、分段式）
  • 带验证的表单模式
  • 对话框与底部弹窗模式
  • 加载状态与空状态模式
  • 导航模式
  • 响应式布局

Testing Patterns

测试模式

See patterns/flutter-testing-patterns.md for:
  • Unit test structure and best practices
  • Widget testing approaches
  • Integration test patterns
  • Mock and stub strategies
  • Test organization and naming conventions
  • Coverage best practices
详见patterns/flutter-testing-patterns.md中的内容：
  • 单元测试结构与最佳实践
  • Widget测试方法
  • 集成测试模式
  • 模拟与桩件策略
  • 测试组织与命名规范
  • 测试覆盖率最佳实践

Performance Patterns

性能模式

See patterns/flutter-performance-checklist.md for:
  • Build method optimization
  • Widget rebuilding minimization
  • List and grid performance
  • Image loading optimization
  • Memory leak prevention
  • Rendering performance tips
详见patterns/flutter-performance-checklist.md中的内容：
  • Build方法优化
  • 减少Widget重绘
  • 列表与网格性能优化
  • 图片加载优化
  • 内存泄漏防范
  • 渲染性能优化技巧

Security Patterns

安全模式

See patterns/flutter-security-patterns.md for:
  • Input validation and sanitization
  • Secure storage practices
  • API security best practices
  • Authentication and authorization patterns
  • Data encryption approaches
  • Common vulnerability prevention (XSS, injection, etc.)
详见patterns/flutter-security-patterns.md中的内容：
  • 输入验证与清理
  • 安全存储实践
  • API安全最佳实践
  • 身份认证与授权模式
  • 数据加密方案
  • 常见漏洞防范（如XSS、注入攻击等）

Animation Patterns

动画模式

See patterns/flutter-animation-patterns.md for:
  • Basic animation controllers
  • Tween animations
  • Hero animations
  • Page transitions
  • Implicit animations
  • Physics-based animations
  • Custom animation patterns
详见patterns/flutter-animation-patterns.md中的内容：
  • 基础动画控制器
  • Tween动画
  • Hero动画
  • 页面过渡动画
  • 隐式动画
  • 基于物理的动画
  • 自定义动画模式

Usage Examples

使用示例

Example 1: Need a card UI pattern
User: "I need to create a product card with an image and details"
→ Reference Widget Patterns for image card implementation
Example 2: Writing tests
User: "How should I structure my widget tests?"
→ Reference Testing Patterns for widget test examples
Example 3: Performance issues
User: "My list is laggy when scrolling"
→ Reference Performance Patterns for list optimization techniques
Example 4: Security concern
User: "How do I securely store user credentials?"
→ Reference Security Patterns for secure storage approaches
Example 5: Adding animations
User: "I want to animate a page transition"
→ Reference Animation Patterns for page transition examples
示例1：需要卡片UI模式
用户："我需要创建一个包含图片和详情的产品卡片"
→ 查阅Widget模式中的图片卡片实现方案
示例2：编写测试
用户："我应该如何组织我的Widget测试结构？"
→ 查阅测试模式中的Widget测试示例
示例3：性能问题
用户："我的列表滚动时很卡顿"
→ 查阅性能模式中的列表优化技巧
示例4：安全问题
用户："我该如何安全存储用户凭证？"
→ 查阅安全模式中的安全存储方案
示例5：添加动画
用户："我想为页面添加过渡动画"
→ 查阅动画模式中的页面过渡示例

Pattern Quality

模式质量

All patterns in this skill are:
  • ✓ Production-tested and battle-proven
  • ✓ Following Flutter best practices
  • ✓ Performance-optimized
  • ✓ Security-conscious
  • ✓ Well-documented with code examples
本资源中的所有模式均具备以下特性：
  • ✓ 经过生产环境测试与实战验证
  • ✓ 遵循Flutter最佳实践
  • ✓ 性能经过优化
  • ✓ 具备安全意识
  • ✓ 附带详细文档与代码示例

Quick Access

快速查阅

For fast pattern lookup, each category file is self-contained with:
  • Complete, runnable code examples
  • Explanation of when to use each pattern
  • Common pitfalls and how to avoid them
  • Performance and security considerations
Pro tip: Combine patterns from different categories for comprehensive solutions. For example, use Widget Patterns + Performance Patterns + Security Patterns together when building production features.
为了快速查找模式，每个分类文件均独立包含以下内容：
  • 完整可运行的代码示例
  • 各模式的适用场景说明
  • 常见陷阱及规避方法
  • 性能与安全注意事项
专业提示：可结合不同分类的模式以实现全面的解决方案。例如，在构建生产级功能时，可同时使用Widget模式、性能模式与安全模式。