Build Flutter apps following Queens project architecture and conventions
This skill helps you build Flutter applications following the Queens project architecture, emphasizing feature-first organization, Material 3 theming, BLoC state management, and declarative routing.
Follow this feature-first folder structure:
```
lib/
├── main_*.dart # Environment-specific entry points
├── bootstrap.dart # Common app initialization
├── app/
│ ├── view/ # Root widget (App)
│ └── router/ # Navigation (app_router.dart)
├── theme/
│ └── app_theme.dart # Material 3 theming
├── l10n/ # Localization files
└── <feature_name>/ # Feature modules
├── view/ # UI widgets/pages
├── cubit/ or bloc/ # State management
└── models/ # Feature-specific models
```
**Framework & SDK:**
**Key Dependencies:**
**ALWAYS follow these conventions:**
1. **Files & Directories:** `snake_case`
- ✅ `app_theme.dart`, `feature_module/`
- ❌ `AppTheme.dart`, `FeatureModule/`
2. **Classes:** `PascalCase`
- ✅ `MyWidget`, `CounterCubit`, `AppTheme`
- ❌ `myWidget`, `counter_cubit`
3. **Functions, Methods, Variables:** `camelCase`
- ✅ `getUser`, `build`, `userName`
- ❌ `GetUser`, `user_name`
4. **Constants:** `camelCase` or `kPrefixedCamelCase`
- ✅ `router`, `AppRoutes.home`, `kDefaultPadding`
- ❌ `ROUTER`, `APP_ROUTES_HOME`
**CRITICAL: Never hardcode colors.**
1. **Always use theme colors from context:**
```dart
// ✅ CORRECT
backgroundColor: Theme.of(context).colorScheme.primary
// ❌ WRONG
backgroundColor: Colors.purple
```
2. **Material 3 Configuration:**
- Enable with `ThemeData(useMaterial3: true)`
- Use generated color schemes from `MaterialTheme`
- Support light/dark modes with `ThemeMode.system`
3. **Typography:**
- Use Google Fonts: "Open Sans" (body), "Adamina" (display)
- Apply via custom `createTextTheme` function
4. **Custom Colors:**
- If absolutely necessary, add a comment explaining why
- Consider adding to theme system instead
**Use flutter_bloc for ALL feature state:**
1. **Feature Structure:**
```dart
feature_name/
├── cubit/
│ └── feature_cubit.dart
├── view/
│ └── feature_page.dart
└── feature.dart // Export file
```
2. **Setup BLoC Observer:**
```dart
// In bootstrap.dart
Bloc.observer = AppBlocObserver();
```
3. **Use BlocProvider at feature root:**
```dart
BlocProvider(
create: (context) => FeatureCubit(),
child: FeatureView(),
)
```
**Use go_router for declarative routing:**
1. **Define routes in `app/router/app_router.dart`:**
```dart
final router = GoRouter(
initialLocation: AppRoutes.home,
routes: [
GoRoute(
path: AppRoutes.home,
builder: (context, state) => HomePage(),
),
],
);
```
2. **Create route constants:**
```dart
class AppRoutes {
static const home = '/';
static const profile = '/profile';
}
```
3. **Navigate using:**
```dart
context.go(AppRoutes.profile);
context.push(AppRoutes.detail);
```
1. **Before starting:**
- Run `flutter pub get` after any `pubspec.yaml` changes
- Ensure `very_good_analysis` linter rules are followed
2. **When creating a new feature:**
- Create feature folder under `lib/`
- Add `view/`, `cubit/` subdirectories
- Create feature export file
- Add route to `app_router.dart`
3. **When adding theme customization:**
- Modify `lib/theme/app_theme.dart`
- Use `MaterialTheme` color schemes
- Add component themes to `ThemeData` if needed
4. **Testing:**
- Use `flutter_test`, `bloc_test`, `mocktail`
- Test blocs/cubits independently
- Test widget interactions with mocked state
Before completing any task, verify:
**Creating a new feature page:**
```dart
// feature/view/feature_page.dart
class FeaturePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return BlocProvider(
create: (_) => FeatureCubit(),
child: FeatureView(),
);
}
}
class FeatureView extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Scaffold(
backgroundColor: theme.colorScheme.surface,
// ... rest of UI
);
}
}
```
**Adding a new route:**
```dart
// In app/router/app_router.dart
GoRoute(
path: AppRoutes.newFeature,
builder: (context, state) => NewFeaturePage(),
),
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/flutter-queens-project-development/raw