| name | flutter-patterns |
| description | Comprehensive Flutter development patterns covering widgets, testing, performance, security, and animations. Use when you need quick reference for Flutter best practices, common UI patterns, performance optimization techniques, security guidelines, or animation implementations. |
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.
