How to Add Firebase to Flutter: Step-by-Step Guide

To add Firebase to a Flutter app, first create a Firebase project and register your app in the Firebase console. Then, add the Firebase SDK by updating your pubspec.yaml and initialize Firebase in your Flutter code using Firebase.initializeApp().

Syntax

Adding Firebase to Flutter involves these key steps:

• pubspec.yaml: Add Firebase dependencies.
• Initialization: Call Firebase.initializeApp() in your main Dart file.
• Platform setup: Configure Android and iOS with Firebase config files.

yaml and dart

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.10.0

// In main.dart
import 'package:flutter/widgets.dart';
import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

Example

This example shows a minimal Flutter app initializing Firebase and displaying a simple text.

dart

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Firebase Flutter Example')),
        body: const Center(child: Text('Firebase Initialized Successfully!')),
      ),
    );
  }
}

Output

A Flutter app screen with an app bar titled 'Firebase Flutter Example' and centered text 'Firebase Initialized Successfully!'

Common Pitfalls

Common mistakes when adding Firebase to Flutter include:

• Not calling WidgetsFlutterBinding.ensureInitialized() before Firebase.initializeApp().
• Missing platform-specific config files like google-services.json for Android or GoogleService-Info.plist for iOS.
• Forgetting to add Firebase plugins in pubspec.yaml or using incompatible versions.

dart

void main() async {
  // Wrong: Missing ensureInitialized
  await Firebase.initializeApp();
  runApp(MyApp());
}

// Correct:
import 'package:flutter/widgets.dart';
import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

Quick Reference

Steps to add Firebase to Flutter:

• Create Firebase project at Firebase Console.
• Register your Flutter app (Android/iOS) and download config files.
• Place config files in platform folders (android/app/ and ios/Runner/).
• Add firebase_core dependency in pubspec.yaml.
• Initialize Firebase in main() before running the app.

Key Takeaways

Always call WidgetsFlutterBinding.ensureInitialized() before Firebase.initializeApp().

Add firebase_core dependency in pubspec.yaml to use Firebase in Flutter.

Download and add platform-specific Firebase config files correctly.

Initialize Firebase asynchronously before running the app.

Check plugin versions for compatibility with your Flutter SDK.