How to Integrate Firebase with Flutter for Real-Time Apps

byOrkitt -February 08, 2025

0

Real-time applications have become a staple for delivering interactive and dynamic user experiences. Whether you're building a chat app, a collaborative platform, or a live data feed, integrating Firebase with Flutter can help you streamline this process and bring your ideas to life quickly.

In this blog post, we’ll walk you through how to integrate Firebase with Flutter to build real-time apps, from setting up Firebase to writing the necessary code.

So What is Firebase?

Firebase is a powerful platform by Google that provides developers with a variety of backend services such as authentication, real-time databases, storage, and cloud functions. For Flutter developers, Firebase offers out-of-the-box integrations, enabling seamless app backend management and data synchronization across platforms.

Why Use Firebase with Flutter?

When developing real-time apps, Firebase offers multiple advantages:

Real-Time Data Sync: Firebase's real-time database and Firestore make it easy to sync data in real-time across all connected devices.
Easy Setup: With FlutterFire, Firebase’s Flutter plugin, you can easily connect Firebase services to your Flutter app with minimal configuration.
Cross-Platform Support: Firebase and Flutter both work seamlessly across Android, iOS, and web platforms, ensuring your app works everywhere.
Scalable Backend: Firebase allows you to scale your application as your user base grows, with cloud services handling the heavy lifting.

Step-by-Step Guide to Integrate Firebase with Flutter

1.1 Set Up Firebase Project [Legacy Mode]

First, create a Firebase project and enable necessary services.

Go to Firebase Console: Navigate to the Firebase Console and click on "Add Project".
Create a Project: Follow the on-screen instructions to create a new Firebase project.
Enable Firebase Services: In the Firebase Console, enable the services you need for your real-time app (like Firebase Authentication, Firestore, or Realtime Database).
Add Firebase to Flutter: For both Android and iOS, you need to download the google-services.json (for Android) and GoogleService-Info.plist (for iOS) and place them in their respective folders (android/app and ios/Runner)

1.2 Firebase CLI Setup for Flutter [Recommended]

The Firebase CLI (Command Line Interface) allows you to manage Firebase services such as Firestore, Authentication, Firebase Hosting, Firebase Functions, and more. It simplifies tasks like initializing Firebase in your project, deploying cloud functions, and managing Firebase projects.

Here’s how to set up Firebase CLI to use with your Flutter project:

Step 1.2.1: Install Firebase CLI

First, make sure you have Node.js installed because the Firebase CLI requires it.

Install Node.js (if you don't have it already):
- Go to the Node.js website and download the latest stable version.
Install Firebase CLI:
- Once Node.js is installed, open your terminal or command prompt and run the following command to install the Firebase CLI globally:
```
npm install -g firebase-tools
```
This command will install the Firebase CLI tool globally on your machine, allowing you to use firebase commands anywhere.

Step 1.2.2: Authenticate with Firebase

Now, authenticate Firebase CLI with your Google account. This will allow you to access your Firebase projects.

Run the following command in your terminal:
```
firebase login
```
This will open a web browser asking you to sign in with your Google account. After logging in, the CLI will authenticate you.

Step 1.2.3: Initialize Firebase in Your Flutter Project

To initialize Firebase services in your project, you need to link your Firebase project with your local Flutter app.

Run Firebase Initialization Command:
Once inside your Flutter project folder, run the following command to initialize Firebase in your app:
firebase init
Choose Firebase Features:

The firebase init command will present you with a list of Firebase services to enable. You can choose the services you want to use, such as:
- Firestore: For cloud databases
- Authentication: For user sign-in methods
- Firebase Functions: For cloud functions
- Hosting: If you plan to host your app’s frontend on Firebase
- Storage: For file storage (images, videos, etc.)
You can use the arrow keys to select the project and services and press Space to enable them. Once selected, hit Enter. It will automatically configure everything for you.

2. Install Firebase SDK for Flutter

Now, let’s set up Firebase in your Flutter app.

Open your pubspec.yaml file and add the necessary Firebase dependencies. Here’s an example for integrating Firebase Core and Firestore:

dependencies:
flutter:
sdk: flutter
firebase_core: ^2.10.0
cloud_firestore: ^5.0.0

3. Initialize Firebase in Flutter

Before using Firebase services, you need to initialize Firebase in your app.

Open the main.dart file and ensure Firebase is initialized in the main() function. Modify your code as follow

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

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Firebase App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
}
}

Now that you’ve set up the basics, run your app on a device or emulator. In the next post we will learn more about firebase.Stay tuned.

Additional Tips for Building Real-Time Apps with Firebase

Firebase Authentication: For a real-time chat app, integrating Firebase Authentication helps in managing users and their sessions.
Firestore Rules: Set security rules in Firestore to protect data access. You can set permissions based on user roles and other criteria.
Offline Capabilities: Firebase supports offline data persistence, so your app will continue working even without an active internet connection.

Bonus Tips: Deploy Your App on Firebase

If you’re planning to deploy Firebase Hosting for your web app (for example, if you’re building a Flutter web app):

Build the Flutter Web App:

Run the following command to build the Flutter web app:
```
flutter build web
```
Deploy to Firebase Hosting:

Once the build is complete, you can deploy it using:
```
firebase deploy --only hosting
```
This will upload your Flutter web app to Firebase Hosting.

Conclusion

Now you’re all set to use Firebase in your Flutter project! You’ve successfully installed the Firebase CLI, authenticated, and initialized Firebase services in your Flutter app. From here, you can proceed with integrating Firestore, Firebase Authentication, or any other Firebase services into your Flutter app for real-time functionality.

With Firebase and Flutter together, building scalable and real-time applications becomes easier and faster. Happy coding!

Material AppBar