flutter-patterns

Document Flutter development patterns for widgets, state management, navigation, and performance optimization.

5|Updated Feb 6, 2026

Search Tags:#performance #state management #ui/ux #mobile development #flutter #dart

Ready to run

npx skills add https://github.com/FaisalAlqarni/sp-ecc --skill flutter-patterns-faisalalqarni

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: flutter-patterns
Source: https://github.com/FaisalAlqarni/sp-ecc/tree/main/skills/flutter-patterns
Command: npx skills add https://github.com/FaisalAlqarni/sp-ecc --skill flutter-patterns-faisalalqarni

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides comprehensive guidance and code examples for building robust, maintainable, and performant Flutter applications by covering essential development patterns.

Core Features & Use Cases

State Management: Explains Provider, Bloc/Cubit, and Riverpod patterns with code examples.
Navigation: Demonstrates Navigator 2.0 with go_router for declarative routing.
UI/UX: Covers widget composition, responsive design, and theming.
Performance: Offers strategies for optimizing lists, widgets, and images.
Platform-Specific Code: Guides on handling different platforms and assets.
Use Case: When starting a new Flutter project or refactoring an existing one, use this Skill to implement best practices for state management, navigation, and UI structure, ensuring scalability and maintainability.

Quick Start

Show me examples of how to implement the Provider pattern for state management in Flutter.

Frequently Asked Questions about flutter-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I implement state management patterns like Provider, Bloc, or Riverpod in Flutter?▼

Flutter state management patterns like Provider, Bloc/Cubit, and Riverpod separate UI from business logic. This guide provides code examples for each approach to help you build scalable and maintainable mobile applications.

What is the best way to handle declarative navigation in Flutter?▼

Declarative navigation in Flutter is best handled using Navigator 2.0 with the go_router package. This pattern simplifies deep linking and URL-based routing for complex mobile applications.

How do I optimize Flutter performance for lists, widgets, and images?▼

Flutter performance optimization involves specific strategies for rendering lists, building efficient widgets, and managing images. These techniques reduce jank and ensure smooth scrolling in mobile applications.

How do I build responsive design and theming in a Flutter application?▼

Responsive design and theming in Flutter rely on proper widget composition to adapt layouts across screen sizes. This ensures a consistent UI/UX on different devices.

Does this guide cover platform-specific code and localization for Flutter apps?▼

Yes, it covers handling platform-specific code, asset management, and localization. These patterns ensure your Flutter application adapts correctly to different platforms and languages.

When should I refactor an existing Flutter project to use these development patterns?▼

You should refactor a Flutter project when scalability and maintainability become issues. Implementing standard patterns for state management, navigation, and UI structure resolves architectural bottlenecks.