ReddRadar
Agent skill
building-flutter-apps
Build production-ready Flutter apps for Android/iOS using feature-first architecture. Covers project setup, UI patterns, state management (Riverpod/BLoC), navigation (go_router), testing (TDD with mocktail), and deployment. Use when creating Flutter projects, implementing features, debugging Flutter issues, or making architectural decisions.
Stars
163
Forks
31
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/development/building-flutter-apps
SKILL.md
Building Flutter Apps
Quick Start
bash
flutter create --org com.yourcompany --project-name my_app ./my_app
cd my_app && flutter run
Skill Guides
| Area | Guide | Use When |
|---|---|---|
| Architecture | architecture/SKILL.md | Project structure, DI, repository pattern |
| UI Building | ui/SKILL.md | Layouts, Material 3, responsive design |
| State Management | state-management/SKILL.md | Riverpod, BLoC, state patterns |
| Testing | testing/SKILL.md | TDD, unit/widget tests, mocking |
| Project Setup | project-setup.md | New projects, pubspec, flavors |
| Navigation | navigation.md | go_router, deep links, transitions |
| Animations | animations.md | Implicit, explicit, Hero animations |
| Performance | performance.md | Optimization, profiling, app size |
| Deployment | deployment.md | App store builds, CI/CD, signing |
| Platform Integration | platform-integration.md | Platform channels, permissions |
| Packages | packages.md | Essential packages, creating plugins |
Feature-First Project Structure
lib/
├── main.dart
├── app.dart # MaterialApp configuration
├── core/ # Shared across all features
│ ├── providers/ # Core Riverpod providers
│ │ ├── api_client_provider.dart
│ │ └── shared_preferences_provider.dart
│ ├── network/api_client.dart
│ ├── error/failures.dart
│ ├── theme/app_theme.dart
│ └── widgets/ # Truly reusable widgets only
├── features/
│ ├── auth/
│ │ ├── data/
│ │ │ ├── datasources/
│ │ │ ├── models/
│ │ │ ├── repositories/auth_repository_impl.dart
│ │ │ └── providers/auth_repository_provider.dart
│ │ ├── domain/
│ │ │ ├── entities/
│ │ │ └── repositories/auth_repository.dart # Interface
│ │ └── presentation/
│ │ ├── providers/auth_provider.dart
│ │ ├── screens/
│ │ └── widgets/
│ ├── home/
│ │ ├── data/
│ │ ├── domain/
│ │ └── presentation/
│ └── [other_features]/
└── config/
├── routes.dart
└── environment.dart
Decision Guides
What to Build?
| Task | Start Here |
|---|---|
| New project | project-setup.md → architecture/ |
| New feature | architecture/ → Write interface → TDD |
| UI screen | ui/ → state-management/ |
| Fix performance | performance.md |
| Release app | deployment.md |
State Management Choice
| Scenario | Use |
|---|---|
| Form input, toggle, local UI state | setState |
| Single value shared across widgets | ValueNotifier or StateProvider |
| Feature with loading/error states | AsyncNotifierProvider (Riverpod) |
| Mutable state with business logic | NotifierProvider (Riverpod) |
| Complex event flows, event tracking | BLoC (alternative) |
Essential Commands
bash
flutter pub get # Install dependencies
flutter run # Debug mode
flutter test # Run tests
flutter build apk --release # Android release
flutter build ipa --release # iOS release
flutter clean && flutter pub get # Reset project
# Riverpod code generation
dart run build_runner build --delete-conflicting-outputs
dart run build_runner watch --delete-conflicting-outputs
TDD Workflow (from AGENTS.md)
1. Interface First → Define contract in domain/repositories/
2. RED Phase → Write failing test, implementation throws UnimplementedError
3. GREEN Phase → Write minimum code to pass
4. REFACTOR → Clean up, add edge cases
Didn't find tool you were looking for?