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.