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
0
Forks
0
Install this agent skill to your Project
npx add-skill https://github.com/abhishekbrt/GlowState/tree/main/.opencode/skill
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?