cleydson 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.