flutter-patterns（Flutter 模式）

Flutter Patterns

A comprehensive collection of battle-tested Flutter patterns and best practices for building production-quality applications.

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

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

Pattern Categories

Widget Patterns

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
• Material 3 widgets (SearchAnchor, SegmentedButton, NavigationBar, DropdownMenu)
• DecoratedSliver patterns
• Responsive layouts (with Material 3 WindowSizeClass breakpoints)

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 (Mockito and Mocktail)
• BLoC testing with bloc_test
• Riverpod testing patterns
• Patrol testing for native interactions
• Golden test patterns
• Test organization and naming conventions
• Coverage best practices

Performance Patterns

See patterns/flutter-performance-checklist.md for:

• Impeller rendering engine considerations
• Build method optimization
• Widget rebuilding minimization
• List and grid performance
• Image loading optimization (WebP/AVIF, caching)
• Memory leak prevention
• Isolate.run() for background computation
• Rendering performance tips
• Shader compilation (resolved by Impeller)

Security Patterns

See patterns/flutter-security-patterns.md for:

• Input validation and sanitization
• Secure storage practices (flutter_secure_storage)
• API security and certificate pinning (Dio 5.x)
• Authentication and authorization patterns
• Biometric authentication (Face ID, fingerprint)
• iOS Privacy Manifests (required since iOS 17)
• Data encryption approaches
• Common vulnerability prevention (XSS, injection, etc.)

Animation Patterns

See patterns/flutter-animation-patterns.md for:

• Basic animation controllers
• Tween animations
• Hero animations
• Page transitions
• Implicit animations
• Material 3 motion patterns (shared axis, container transform)
• Impeller animation performance notes
• Custom animation patterns

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

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

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.