# Flutter Patterns

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

- Skill: `cleydson/flutter-patterns` (Agent Skill, multi-file: 6 files)
- Install (CLI): `npx skillmds@latest add cleydson/flutter-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/cleydson/flutter-patterns/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Security
- Author: cleydson (https://skillmd.com/u/cleydson)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/cleydson/flutter-patterns

---


# 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](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](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](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](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](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.