Development rules for Flutter apps using BLoC state management, go_router navigation, Material 3 theming, and feature-based architecture. Ensures consistency in naming, structure, and technical decisions.
Apply comprehensive Flutter development rules for projects using BLoC state management, go_router navigation, and Material 3 theming with a feature-based architecture.
When working on Flutter projects following the Queens architecture pattern, apply these rules:
Organize code using feature-based architecture:
```
lib/
├── main_*.dart # Environment-specific entry points
├── bootstrap.dart # Common app initialization
├── app/ # Core app components
│ ├── view/ # Root widget (App)
│ └── router/ # Navigation (app_router.dart)
├── theme/ # Theming (app_theme.dart)
├── l10n/ # Localization files
└── <feature_name>/ # Feature modules (e.g., counter/)
├── <feature_name>.dart # Feature export file
├── view/ # Feature UI widgets/pages
├── cubit/ or bloc/ # Feature state management
└── (models/, widgets/, data/) # As needed
```
Apply consistent naming:
Implement Material 3 theming:
**CRITICAL:** Always use theme colors from context:
```dart
// ✅ CORRECT
backgroundColor: Theme.of(context).colorScheme.primary
// ❌ WRONG
backgroundColor: Colors.purple
```
Never hardcode colors. If custom colors are needed, document the reason and consider adding them to the theme system.
Configure declarative routing:
Apply BLoC pattern consistently:
Enforce strict standards:
Follow this checklist for consistency:
Core dependencies required:
```dart
// 1. Create feature directory structure
lib/my_feature/
├── my_feature.dart # Export file
├── view/
│ └── my_feature_page.dart # Feature page
└── cubit/
├── my_feature_cubit.dart
└── my_feature_state.dart
// 2. Define route in app_router.dart
static const myFeature = '/my-feature';
// 3. Use theme colors in widget
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Container(
color: theme.colorScheme.surface,
child: Text(
'My Feature',
style: theme.textTheme.headlineMedium,
),
);
}
// 4. Provide BLoC to widget tree
BlocProvider(
create: (_) => MyFeatureCubit(),
child: const MyFeaturePage(),
)
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/queens-flutter-project-rules/raw