flutterfire-configure
Use when adding Firebase to a Flutter project, running flutterfire configure, initializing Firebase in main.dart, or configuring multiple flavors.
Install
npx skills add https://github.com/evanca/flutter-ai-rules/tree/main/skills/flutterfire-configure
claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install evanca-flutter-ai-rules@llmmart
git clone https://github.com/evanca/flutter-ai-rules.git
The skills CLI installs just this skill, for any of its supported agents. Claude Code installs the whole evanca/flutter-ai-rules collection as a plugin from our marketplace. Git is the plain clone.
Skill manifest
FlutterFire Configure Skill
This skill defines how to correctly set up and configure Firebase for Flutter applications.
When to Use
Use this skill when:
- Adding Firebase to a Flutter project for the first time.
- Running
flutterfire configureafter adding a new Firebase service or platform. - Initializing Firebase in
main.dart. - Setting up separate Firebase projects for multiple app flavors.
1. Prerequisites
Install the required tools:
npm install -g firebase-tools
firebase login
dart pub global activate flutterfire_cli
Minimum platform requirements:
- Android: API level 19 (KitKat) or higher
- Apple: iOS 11 or higher
2. Setup and Configuration
# From your Flutter project directory:
flutterfire configure
# Add the core Firebase package:
flutter pub add firebase_core
- Re-run
flutterfire configureany time you add support for a new platform or start using a new Firebase service. - For Android-specific services (Crashlytics, Performance Monitoring), the FlutterFire CLI automatically adds the required Gradle plugins.
- Rebuild with
flutter runafter adding new Firebase plugins.
3. Firebase Initialization
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const MyApp());
}
- Call
WidgetsFlutterBinding.ensureInitialized()before Firebase initialization. - Place Firebase initialization before any other Firebase service calls.
- Never modify
firebase_options.dartmanually — it is auto-generated. - Commit
firebase_options.dartto version control — it contains non-secret configuration identifiers. - For Firebase Emulator Suite:
await Firebase.initializeApp(demoProjectId: "demo-project-id").
4. Verification and Best Practices
After configuration, verify the setup is working:
- Run
flutter runand confirm the app launches without Firebase initialization errors. - Check the debug console for
Firebase initialized successfullyor similar confirmation. - Verify
firebase_options.dartwas generated with the correct project ID.
- Enable Firebase Analytics for optimal experience with Crashlytics, Remote Config, and other products.
- Use a consistent Firebase project across all platforms for data consistency.
- For iOS/macOS apps using certain Firebase services, add the Keychain Sharing capability in Xcode.
- Test the Firebase configuration with both debug and release builds.
- Check version compatibility between Flutter plugins and the underlying Firebase SDK.
5. Multiple App Flavors
Create separate Firebase projects per environment (development, staging, production):
flutterfire config \
--project=flutter-app-dev \
--out=lib/firebase_options_dev.dart \
--ios-bundle-id=com.example.flutterApp.dev \
--ios-out=ios/flavors/dev/GoogleService-Info.plist \
--android-package-name=com.example.flutter_app.dev \
--android-out=android/app/src/dev/google-services.json
Centralize Firebase initialization by flavor:
// firebase.dart
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/services.dart';
import 'package:flutter_app/firebase_options_prod.dart' as prod;
import 'package:flutter_app/firebase_options_stg.dart' as stg;
import 'package:flutter_app/firebase_options_dev.dart' as dev;
Future<void> initializeFirebaseApp() async {
final firebaseOptions = switch (appFlavor) {
'prod' => prod.DefaultFirebaseOptions.currentPlatform,
'stg' => stg.DefaultFirebaseOptions.currentPlatform,
'dev' => dev.DefaultFirebaseOptions.currentPlatform,
_ => throw UnsupportedError('Invalid flavor: $appFlavor'),
};
await Firebase.initializeApp(options: firebaseOptions);
}
// main.dart
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await initializeFirebaseApp();
runApp(const MainApp());
}
- Use
appFlavoror environment variables to select the configuration at runtime. - Import each flavor's config with namespace aliases (e.g.,
as dev). - Use a helper script to automate multi-flavor configuration.
References
Files (flutter-ai-rules)
-
SKILL.md 4.6 KB
--- name: flutterfire-configure description: "Use when adding Firebase to a Flutter project, running flutterfire configure, initializing Firebase in main.dart, or configuring multiple flavors." license: MIT --- # FlutterFire Configure Skill This skill defines how to correctly set up and configure Firebase for Flutter applications. ## When to Use Use this skill when: * Adding Firebase to a Flutter project for the first time. * Running `flutterfire configure` after adding a new Firebase service or platform. * Initializing Firebase in `main.dart`. * Setting up separate Firebase projects for multiple app flavors. --- ## 1. Prerequisites Install the required tools: ```bash npm install -g firebase-tools firebase login dart pub global activate flutterfire_cli ``` **Minimum platform requirements:** - Android: API level 19 (KitKat) or higher - Apple: iOS 11 or higher --- ## 2. Setup and Configuration ```bash # From your Flutter project directory: flutterfire configure # Add the core Firebase package: flutter pub add firebase_core ``` - Re-run `flutterfire configure` any time you **add support for a new platform** or **start using a new Firebase service**. - For Android-specific services (Crashlytics, Performance Monitoring), the FlutterFire CLI automatically adds the required Gradle plugins. - Rebuild with `flutter run` after adding new Firebase plugins. --- ## 3. Firebase Initialization ```dart import 'package:firebase_core/firebase_core.dart'; import 'firebase_options.dart'; void main() async { WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp( options: DefaultFirebaseOptions.currentPlatform, ); runApp(const MyApp()); } ``` - Call `WidgetsFlutterBinding.ensureInitialized()` **before** Firebase initialization. - Place Firebase initialization **before** any other Firebase service calls. - **Never modify** `firebase_options.dart` manually — it is auto-generated. - **Commit** `firebase_options.dart` to version control — it contains non-secret configuration identifiers. - For Firebase Emulator Suite: `await Firebase.initializeApp(demoProjectId: "demo-project-id")`. --- ## 4. Verification and Best Practices After configuration, verify the setup is working: 1. Run `flutter run` and confirm the app launches without Firebase initialization errors. 2. Check the debug console for `Firebase initialized successfully` or similar confirmation. 3. Verify `firebase_options.dart` was generated with the correct project ID. - Enable **Firebase Analytics** for optimal experience with Crashlytics, Remote Config, and other products. - Use a **consistent Firebase project** across all platforms for data consistency. - For iOS/macOS apps using certain Firebase services, add the **Keychain Sharing** capability in Xcode. - Test the Firebase configuration with **both debug and release** builds. - Check **version compatibility** between Flutter plugins and the underlying Firebase SDK. --- ## 5. Multiple App Flavors Create separate Firebase projects per environment (development, staging, production): ```bash flutterfire config \ --project=flutter-app-dev \ --out=lib/firebase_options_dev.dart \ --ios-bundle-id=com.example.flutterApp.dev \ --ios-out=ios/flavors/dev/GoogleService-Info.plist \ --android-package-name=com.example.flutter_app.dev \ --android-out=android/app/src/dev/google-services.json ``` **Centralize Firebase initialization by flavor:** ```dart // firebase.dart import 'package:firebase_core/firebase_core.dart'; import 'package:flutter/services.dart'; import 'package:flutter_app/firebase_options_prod.dart' as prod; import 'package:flutter_app/firebase_options_stg.dart' as stg; import 'package:flutter_app/firebase_options_dev.dart' as dev; Future<void> initializeFirebaseApp() async { final firebaseOptions = switch (appFlavor) { 'prod' => prod.DefaultFirebaseOptions.currentPlatform, 'stg' => stg.DefaultFirebaseOptions.currentPlatform, 'dev' => dev.DefaultFirebaseOptions.currentPlatform, _ => throw UnsupportedError('Invalid flavor: $appFlavor'), }; await Firebase.initializeApp(options: firebaseOptions); } ``` ```dart // main.dart void main() async { WidgetsFlutterBinding.ensureInitialized(); await initializeFirebaseApp(); runApp(const MainApp()); } ``` - Use `appFlavor` or environment variables to select the configuration at runtime. - Import each flavor's config with **namespace aliases** (e.g., `as dev`). - Use a helper script to automate multi-flavor configuration. --- ## References - [Add Firebase to your Flutter app](https://firebase.google.com/docs/flutter/setup) - [FlutterFire CLI](https://firebase.flutter.dev/docs/cli)
Comments (0)
Sign in to join the conversation.
Reviews (0)
No reviews yet.
No comments yet.