FLUTTER: Flutter Firebase Integration | Amr Tarek

Firebase removes the need to build and maintain your own backend infrastructure. For Flutter developers, it offers a tightly integrated set of services that cover most backend needs of a modern mobile application — from secure login to real-time data synchronization.

What Is Firebase?

Firebase is a Backend-as-a-Service (BaaS) platform by Google. It provides a suite of cloud services that Flutter apps can connect to directly from the client, without writing server-side code.

Flutter App (Dart)
       |
       | FlutterFire Plugins
       v
+------------------------------------------+
|              Firebase Platform           |
|                                          |
|  Authentication  |  Firestore            |
|  Cloud Storage   |  Analytics            |
|  Cloud Messaging |  Realtime Database    |
+------------------------------------------+

The Flutter Firebase ecosystem is maintained through FlutterFire — a set of officially supported Dart packages that wrap the native Firebase SDKs.

Firebase Services Overview

Service	Purpose
Authentication	Secure login with email, Google, Apple, phone, and more
Cloud Firestore	Scalable, real-time NoSQL document database
Realtime Database	JSON tree database with real-time sync
Cloud Storage	Store and serve user-generated files (images, videos)
Firebase Analytics	Understand how users interact with the app
Cloud Messaging (FCM)	Send push notifications to users
Crashlytics	Real-time crash reporting
Remote Config	Update app behavior without a release

Setting Up Firebase

Step 1 — Create a Firebase Project

Go to the Firebase Console
Click Add project
Follow the guided setup wizard

Step 2 — Add Your App to the Firebase Project

For Android:

In the Firebase Console, click the Android icon
Enter your app's package name (e.g. com.example.myapp)
Download the google-services.json file
Place it in the android/app/ directory

For iOS:

In the Firebase Console, click the iOS icon
Enter your app's bundle ID (e.g. com.example.myapp)
Download the GoogleService-Info.plist file
Add it to the ios/Runner/ directory in Xcode

Step 3 — Add Firebase Plugins

flutter pub add firebase_core
flutter pub add firebase_auth
flutter pub add cloud_firestore
flutter pub add firebase_storage
flutter pub add firebase_analytics
flutter pub add firebase_messaging

Update pubspec.yaml and run:

flutter pub get

Step 4 — Configure the Android Project

In android/build.gradle, add the Google services classpath:

buildscript {
  dependencies {
    classpath 'com.google.gms:google-services:4.4.0'
  }
}

In android/app/build.gradle, apply the plugin:

apply plugin: 'com.google.gms.google-services'

Step 5 — Initialize Firebase in Your App

Initialize Firebase before calling runApp():

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

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

Firebase Authentication

Authentication provides secure user login without managing passwords yourself.

import 'package:firebase_auth/firebase_auth.dart';

final auth = FirebaseAuth.instance;

// Sign up with email and password
Future<UserCredential> signUp(String email, String password) async {
  return await auth.createUserWithEmailAndPassword(
    email: email,
    password: password,
  );
}

// Sign in with email and password
Future<UserCredential> signIn(String email, String password) async {
  return await auth.signInWithEmailAndPassword(
    email: email,
    password: password,
  );
}

// Sign out
Future<void> signOut() async {
  await auth.signOut();
}

// Listen to authentication state changes
auth.authStateChanges().listen((User? user) {
  if (user == null) {
    print('User is signed out');
  } else {
    print('User is signed in: ${user.email}');
  }
});

Cloud Firestore

Cloud Firestore is a flexible, scalable NoSQL database that syncs data in real time across clients.

Firestore Data Model
---------------------
Collection (users)
  └── Document (user_id_123)
        ├── name: "Amr Tarek"
        ├── email: "amr@example.com"
        └── Subcollection (posts)
              └── Document (post_id_456)
                    ├── title: "My Post"
                    └── createdAt: Timestamp

import 'package:cloud_firestore/cloud_firestore.dart';

final db = FirebaseFirestore.instance;

// Write a document
Future<void> addUser(String uid, String name, String email) async {
  await db.collection('users').doc(uid).set({
    'name': name,
    'email': email,
    'createdAt': FieldValue.serverTimestamp(),
  });
}

// Read a document once
Future<void> getUser(String uid) async {
  final doc = await db.collection('users').doc(uid).get();
  if (doc.exists) {
    print('User: ${doc.data()}');
  }
}

// Real-time stream of a collection
Stream<QuerySnapshot> getUsersStream() {
  return db.collection('users').orderBy('name').snapshots();
}

// Update a field
Future<void> updateName(String uid, String newName) async {
  await db.collection('users').doc(uid).update({'name': newName});
}

// Delete a document
Future<void> deleteUser(String uid) async {
  await db.collection('users').doc(uid).delete();
}

Listening to Real-Time Data in the UI

StreamBuilder<QuerySnapshot>(
  stream: db.collection('posts').orderBy('createdAt', descending: true).snapshots(),
  builder: (context, snapshot) {
    if (!snapshot.hasData) return const CircularProgressIndicator();
    final docs = snapshot.data!.docs;
    return ListView.builder(
      itemCount: docs.length,
      itemBuilder: (context, index) {
        final data = docs[index].data() as Map<String, dynamic>;
        return ListTile(title: Text(data['title'] ?? ''));
      },
    );
  },
)

Cloud Storage

Store user-generated content like profile photos and videos.

import 'package:firebase_storage/firebase_storage.dart';
import 'dart:io';

final storage = FirebaseStorage.instance;

// Upload a file
Future<String> uploadFile(File file, String path) async {
  final ref = storage.ref().child(path);
  await ref.putFile(file);
  return await ref.getDownloadURL();
}

// Delete a file
Future<void> deleteFile(String path) async {
  await storage.ref().child(path).delete();
}

Firebase Cloud Messaging (Push Notifications)

import 'package:firebase_messaging/firebase_messaging.dart';

final messaging = FirebaseMessaging.instance;

// Request permission (required on iOS)
await messaging.requestPermission(
  alert: true,
  badge: true,
  sound: true,
);

// Get the device token (send this to your server)
final token = await messaging.getToken();
print('FCM Token: $token');

// Handle foreground messages
FirebaseMessaging.onMessage.listen((RemoteMessage message) {
  print('Foreground notification: ${message.notification?.title}');
});

Firebase Architecture in a Flutter App

Flutter UI Layer
       |
       v
Service Layer (Dart classes wrapping Firebase)
       |
       +----> AuthService      (firebase_auth)
       +----> DatabaseService  (cloud_firestore)
       +----> StorageService   (firebase_storage)
       +----> MessagingService (firebase_messaging)
       |
       v
Firebase Backend (Google Cloud)

Keeping Firebase calls in dedicated service classes — rather than directly in widgets — makes the code testable, maintainable, and easy to swap out if you change your backend in the future.