AgentSkillsCN

building-flutter-apps

使用功能优先架构构建适用于 Android/iOS 的生产就绪 Flutter 应用。涵盖项目设置、UI 模式、状态管理(Riverpod/BLoC)、导航(go_router)、测试(TDD 与 mocktail)和部署。当创建 Flutter 项目、实现功能、调试 Flutter 问题或做出架构决策时使用。

SKILL.md
--- frontmatter
name: building-flutter-apps
description: 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.

Building Flutter Apps

Quick Start

bash
flutter create --org com.yourcompany --project-name my_app ./my_app
cd my_app && flutter run

Skill Guides

AreaGuideUse When
Architecturearchitecture/SKILL.mdProject structure, DI, repository pattern
UI Buildingui/SKILL.mdLayouts, Material 3, responsive design
State Managementstate-management/SKILL.mdRiverpod, BLoC, state patterns
Testingtesting/SKILL.mdTDD, unit/widget tests, mocking
Project Setupproject-setup.mdNew projects, pubspec, flavors
Navigationnavigation.mdgo_router, deep links, transitions
Animationsanimations.mdImplicit, explicit, Hero animations
Performanceperformance.mdOptimization, profiling, app size
Deploymentdeployment.mdApp store builds, CI/CD, signing
Platform Integrationplatform-integration.mdPlatform channels, permissions
Packagespackages.mdEssential packages, creating plugins

Feature-First Project Structure

code
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?

TaskStart Here
New projectproject-setup.mdarchitecture/
New featurearchitecture/ → Write interface → TDD
UI screenui/state-management/
Fix performanceperformance.md
Release appdeployment.md

State Management Choice

ScenarioUse
Form input, toggle, local UI statesetState
Single value shared across widgetsValueNotifier or StateProvider
Feature with loading/error statesAsyncNotifierProvider (Riverpod)
Mutable state with business logicNotifierProvider (Riverpod)
Complex event flows, event trackingBLoC (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)

code
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