Nghi-NV

flutter-clean-arch

0
0
# Install this skill:
npx skills add Nghi-NV/create-agent-skills --skill "flutter-clean-arch"

Install specific skill from multi-skill repository

# Description

Flutter Clean Architecture skill for building scalable mobile apps. Use when creating new Flutter projects, implementing BLoC pattern, setting up Dio networking, or following clean architecture patterns with model_view/views structure.

# SKILL.md


name: flutter-clean-arch
description: Flutter Clean Architecture skill for building scalable mobile apps. Use when creating new Flutter projects, implementing BLoC pattern, setting up Dio networking, or following clean architecture patterns with model_view/views structure.


Flutter Clean Architecture

A comprehensive skill for building Flutter applications following Clean Architecture principles, based on real-world production patterns.

When to Use This Skill

  • Creating a new Flutter project with clean architecture
  • Setting up Dio networking with interceptors (auth, logging)
  • Implementing BLoC/Cubit state management pattern
  • Configuring dependency injection with GetIt
  • Setting up GoRouter navigation
  • Managing environment variables with flutter_dotenv
  • Implementing secure storage for tokens
  • Setting up Android/iOS permissions and security
  • Working with code generation (freezed, json_serializable)

Decision Tree - What Are You Implementing?

Use this decision tree to find the right guide for your task:

What are you implementing?
β”‚
β”œβ”€β”€ πŸ†• New Flutter Project
β”‚   β”œβ”€β”€ Project structure β†’ See [Project Structure](examples/project-structure.md)
β”‚   β”œβ”€β”€ Dependencies β†’ See [pubspec Template](resources/pubspec-template.yaml)
β”‚   β”œβ”€β”€ Environment setup β†’ See [Environment Setup](resources/environment-setup.md)
β”‚   └── Native splash β†’ See [Native Splash Setup](examples/native-splash-setup.md)
β”‚
β”œβ”€β”€ πŸ“‘ API / Networking
β”‚   β”œβ”€β”€ Dio client setup β†’ See [Dio Setup](examples/dio-setup.md)
β”‚   β”œβ”€β”€ Remote data source β†’ See [Remote DataSource Pattern](examples/remote-datasource-pattern.md)
β”‚   └── Repository layer β†’ See [Repository Pattern](examples/repository-pattern.md)
β”‚
β”œβ”€β”€ πŸ“¦ Models / Data
β”‚   β”œβ”€β”€ Model with freezed β†’ See [Freezed & JSON Serializable](examples/freezed-json-serializable.md)
β”‚   β”œβ”€β”€ Request/Response models β†’ See [Repository Pattern](examples/repository-pattern.md)
β”‚   └── Build runner commands β†’ See [Build Runner Guide](examples/build-runner-guide.md)
β”‚
β”œβ”€β”€ πŸ”„ State Management
β”‚   β”œβ”€β”€ Cubit pattern β†’ See [BLoC/Cubit Example](examples/bloc-cubit-example.md)
β”‚   β”œβ”€β”€ BLoC pattern β†’ See [BLoC/Cubit Example](examples/bloc-cubit-example.md)
β”‚   └── State with freezed β†’ See [Freezed & JSON Serializable](examples/freezed-json-serializable.md)
β”‚
β”œβ”€β”€ πŸ’‰ Dependency Injection
β”‚   └── GetIt setup β†’ See [Dependency Injection](examples/dependency-injection.md)
β”‚
β”œβ”€β”€ 🧭 Navigation
β”‚   └── GoRouter setup β†’ See [Navigation Setup](examples/navigation-setup.md)
β”‚
β”œβ”€β”€ πŸ“± Platform Config
β”‚   β”œβ”€β”€ Android permissions β†’ See [Android Permissions](resources/android-permissions.md)
β”‚   β”œβ”€β”€ iOS permissions β†’ See [iOS Permissions](resources/ios-permissions.md)
β”‚   └── Security checklist β†’ See [Security Checklist](resources/security-checklist.md)
β”‚
└── πŸ› οΈ Code Generation
    β”œβ”€β”€ Freezed models β†’ See [Freezed & JSON Serializable](examples/freezed-json-serializable.md)
    β”œβ”€β”€ JSON serializable β†’ See [Freezed & JSON Serializable](examples/freezed-json-serializable.md)
    └── Build runner β†’ See [Build Runner Guide](examples/build-runner-guide.md)

Project Structure Overview

lib/
β”œβ”€β”€ main.dart                          # Entry point
β”œβ”€β”€ app_root.dart                      # App root with MaterialApp
β”œβ”€β”€ app_providers.dart                 # Global BLoC providers
β”œβ”€β”€ core/                              # Core utilities (environment, theme, widgets)
β”œβ”€β”€ utils/                             # Helpers, extensions, validators
β”œβ”€β”€ data/
β”‚   β”œβ”€β”€ data_sources/
β”‚   β”‚   β”œβ”€β”€ api/                       # Dio, interceptors, api_path
β”‚   β”‚   β”œβ”€β”€ local/                     # SharedPreferences, SecureStorage
β”‚   β”‚   └── remote/                    # Feature data sources
β”‚   β”œβ”€β”€ models/                        # Data models
β”‚   └── repositories/                  # Repository implementations
β”œβ”€β”€ model_view/                        # BLoC/Cubit state management
β”œβ”€β”€ views/                             # UI pages
β”œβ”€β”€ di/                                # Dependency injection
└── route/                             # Navigation

For full structure details β†’ See Project Structure

Quick Reference

Adding a New Feature

  1. Create model in data/models/[feature]/
    β†’ See Freezed & JSON Serializable

  2. Create remote data source in data/data_sources/remote/
    β†’ See Remote DataSource Pattern

  3. Create repository in data/repositories/[feature]/
    β†’ See Repository Pattern

  4. Create cubit in model_view/[feature]/
    β†’ See BLoC/Cubit Example

  5. Create page in views/[feature]/

  6. Register in DI in di/[feature]_inject.dart
    β†’ See Dependency Injection

  7. Add route in route/app_route.dart
    β†’ See Navigation Setup

Common Commands

# Code generation
flutter pub run build_runner build --delete-conflicting-outputs

# Watch mode (development)
flutter pub run build_runner watch --delete-conflicting-outputs

# Generate native splash
flutter pub run flutter_native_splash:create

For more commands β†’ See Build Runner Guide

Examples & Resources

Examples

Resources

Best Practices

Naming Conventions

  • Files: snake_case.dart
  • Classes: PascalCase
  • Variables/Functions: camelCase

Layer Dependencies

views β†’ model_view β†’ data/repositories β†’ data/data_sources
                  β†˜ core (utilities)

State Management

  • Use Cubit for simple state
  • Use BLoC for complex event-driven state
  • Always use freezed for state classes

Error Handling

  • Use Either<Failure, Success> from dartz
  • Define specific Failure types
  • Handle network errors gracefully

Troubleshooting

Issue Solution Reference
Token refresh loop Check DioAuthInterceptor logic Dio Setup
State not updating Ensure Equatable props are correct BLoC/Cubit Example
DI not found Verify registration order Dependency Injection
Build runner errors Run flutter clean && flutter pub get Build Runner Guide
Part file not found Check part directive matches filename Freezed Guide

# Supported AI Coding Agents

This skill is compatible with the SKILL.md standard and works with all major AI coding agents:

Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.