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

To add Firebase to a Flutter app, first create a Firebase project in the Firebase console, then register your app and download the configuration files. Next, add the firebase_core package to your Flutter project and initialize Firebase in your app's main file.

Syntax

Adding Firebase to Flutter involves these main steps:

• Create Firebase project: Setup your project in Firebase console.
• Register app: Add your Flutter app (Android/iOS) to Firebase.
• Download config files: google-services.json for Android, GoogleService-Info.plist for iOS.
• Add Firebase packages: Use firebase_core in pubspec.yaml.
• Initialize Firebase: Call Firebase.initializeApp() in your Flutter app.

yaml

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.10.0

Example

This example shows how to initialize Firebase in a Flutter app's main file after adding the necessary config files and dependencies.

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(
      title: 'Firebase Flutter Demo',
      home: Scaffold(
        appBar: AppBar(title: const Text('Firebase Initialized')),
        body: const Center(child: Text('Firebase is ready to use!')),
      ),
    );
  }
}

Output

A Flutter app window with an app bar titled 'Firebase Initialized' and centered text 'Firebase is ready to use!'

Common Pitfalls

Common mistakes when adding Firebase to Flutter apps include:

• Not downloading or placing the google-services.json or GoogleService-Info.plist files in the correct platform folders.
• Forgetting to add Firebase SDK plugins in pubspec.yaml.
• Not calling WidgetsFlutterBinding.ensureInitialized() before Firebase.initializeApp().
• Missing platform-specific setup like updating build.gradle files for Android or adding Firebase pods for iOS.

dart

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

/// Right: Correct initialization
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

Quick Reference

Summary tips for adding Firebase to Flutter:

• Create Firebase project and register your app.
• Download and add config files to Android and iOS folders.
• Add firebase_core dependency in pubspec.yaml.
• Initialize Firebase in main() with WidgetsFlutterBinding.ensureInitialized() and Firebase.initializeApp().
• Follow platform-specific setup instructions for Android and iOS.

Key Takeaways

Always initialize Firebase with WidgetsFlutterBinding.ensureInitialized() before Firebase.initializeApp().

Place platform config files (google-services.json for Android, GoogleService-Info.plist for iOS) correctly.

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

Follow platform-specific setup steps for Android and iOS to avoid build errors.

Test Firebase initialization by running a simple Flutter app that calls Firebase.initializeApp().