flutter-architecting-apps
0This skill provides a layered architecture framework for Flutter apps, enforcing a strict separation of concerns. It's designed for Flutter developers looking to implement scalable applications with a clear structure and workflow.
2,7581600Updated Today
Development
Quick InstallView Source
$ npx skills add https://github.com/flutter/skills --skill flutter-architecting-appsOverview
About This Skill
The flutter-architecting-apps skill guides developers through implementing Flutter's recommended layered architecture pattern, which organizes code into UI, Logic, and Data layers. This approach enforces clear separation of concerns, making applications easier to scale, test, and maintain as complexity grows. The skill is designed for Flutter developers who want to structure new projects or refactor existing ones to follow best practices without sacrificing code organization. By applying this architecture early, teams reduce technical debt and improve code reusability across their application.
How to Use
Install the skill using the command: `$ npx skills add https://github.com/flutter/skills --skill flutter-architecting-apps`
Use Cases
Design scalable Flutter applications with a three-layer architecture
Implement unidirectional data flow in Flutter apps
Manage application state efficiently in a structured manner
Use provided code examples for learning and reference
Tags
Setup & Installation
Quick Install
Terminal
$ npx skills add https://github.com/flutter/skills --skill flutter-architecting-appsAlternative Install (Git Clone)
git clone https://github.com/flutter/skillsRequirements
- Claude Code or compatible AI agent
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
Customize
Adapt the skill to your specific use case and workflow.
Usage Examples
Prompt Template
Act as a Flutter architecture consultant. Provide a layered architecture plan for a Flutter app for [COMPANY] in the [INDUSTRY] sector. The app should handle [DATA/FEATURES]. Focus on scalability, testability, and maintainability. Include recommended packages, folder structure, and state management strategy. Use the Clean Architecture pattern with a clear separation between presentation, domain, and data layers. Suggest tools for dependency injection and navigation.
Example Output
# Flutter App Architecture Blueprint for GreenMart E-Commerce
## Overview
This architecture follows **Clean Architecture** with **Bloc** for state management and **GetIt** for dependency injection. The app is structured into 3 layers with clear boundaries:
### **1. Presentation Layer (UI)**
- **Pages**: `lib/presentation/pages/` (e.g., `product_list_page.dart`, `cart_page.dart`)
- **Widgets**: `lib/presentation/widgets/` (reusable UI components)
- **Blocs**: `lib/presentation/blocs/` (handles UI state and business logic)
- **Routes**: `lib/presentation/routes/` (app navigation)
### **2. Domain Layer (Business Logic)**
- **Entities**: `lib/domain/entities/` (core business objects, e.g., `Product`, `CartItem`)
- **Repositories**: `lib/domain/repositories/` (abstract interfaces)
- **Use Cases**: `lib/domain/usecases/` (business rules, e.g., `AddToCart`, `GetProducts`)
### **3. Data Layer (Data Sources)**
- **Dtos**: `lib/data/dtos/` (data transfer objects for API responses)
- **Models**: `lib/data/models/` (local storage models)
- **Data Sources**: `lib/data/datasources/` (API & local DB)
- **Repositories Impl**: `lib/data/repositories/` (concrete implementations)
## **Key Packages & Tools**
- **State Management**: `flutter_bloc` (for reactive UI updates)
- **Dependency Injection**: `get_it` (for clean DI)
- **Navigation**: `go_router` (for declarative routing)
- **Local Storage**: `hive` (for offline caching)
- **API Client**: `dio` (for HTTP requests)
## **Folder Structure**
```
lib/
├── core/ # Shared utilities (constants, themes, utils)
├── data/
│ ├── datasources/ # API & local DB logic
│ ├── dtos/ # API response models
│ ├── models/ # Local storage models
│ └── repositories/ # Concrete repo implementations
├── domain/
│ ├── entities/ # Business objects
│ ├── repositories/ # Abstract repo interfaces
│ └── usecases/ # Business logic
└── presentation/
├── blocs/ # State management
├── pages/ # Screens
├── widgets/ # Reusable UI
└── routes/ # Navigation
```
## **State Management Flow**
1. **UI (Bloc)** → Dispatches events (e.g., `AddToCart`)
2. **Bloc** → Calls **Use Case** (e.g., `AddToCartUseCase`)
3. **Use Case** → Requests data from **Repository**
4. **Repository** → Fetches from **Data Source** (API or local DB)
5. **Data Source** → Returns data → **Repository** → **Use Case** → **Bloc** → **UI**
## **Dependency Injection Setup**
```dart
final getIt = GetIt.instance;
void setupDependencies() {
// Data Sources
getIt.registerLazySingleton<RemoteDataSource>(() => RemoteDataSourceImpl(dio: getIt()));
// Repositories
getIt.registerLazySingleton<ProductRepository>(
() => ProductRepositoryImpl(remoteDataSource: getIt(), localDataSource: getIt()),
);
// Use Cases
getIt.registerLazySingleton(() => GetProducts(getIt()));
getIt.registerLazySingleton(() => AddToCart(getIt()));
// Blocs
getIt.registerFactory(() => ProductBloc(getProducts: getIt(), addToCart: getIt()));
}
```
## **Next Steps**
- Implement **unit tests** for `usecases` and `repositories`
- Add **integration tests** for critical user flows
- Set up **CI/CD** with GitHub Actions for automated testing & deployment
Would you like me to generate a sample `product_list_page.dart` or `product_bloc.dart` to match this architecture?Find the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan