DEV Community

Cover image for Integration of Cloud Database on Flutter by using Firebase
Frouen Medina Jr
Frouen Medina Jr

Posted on

Integration of Cloud Database on Flutter by using Firebase

So many people still confused on how to intergrate firebase in 2024?
So we will discuss in this section on how to intergrate our flutter in firebase.

First is to add the firebase dependency on your project, the filename is pubspec.yml
Image description

as you can see in this image we added firebase.core , and you can also others firebase dependencies like:

  1. Firebase real time database
  2. cloud storage
  3. Firestore
  4. Firebase Machine learning
  5. and other types of firebase dependencies

For integrating the firebase on android you need to add the project on the firebase

Image description

select add app then select android app

Image description

Add the package name on the register project which you can find on the android manifest

Image description

go to the app then src, and you can find the android manifest file
Image description

Then download the file

Image description

Don't forget to add the google services json file

Image description

Add the required dependencies on the gradle app and project

Image description

Build Gradle - Module
Image description

Build.Grade - App
Image description

For IOS

Add the package name on the register project which you can find on the

Image description

Go to IOS folder in your flutter project and find project.pbxproj and go to line 371

Image description

Then press register and next go to download the google-services

Image description

Next is go to back to the IOS folder and Runner and Base.lproj and extract the GoogleService-info.plist, just press next to add the IOS app on the firebase.

Next is to Create an connection on your flutter project to initialize the firebase

Create a dart file that initialize the firebase details



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

class FirebaseRun {
  static Future<void> run() async {
    await Firebase.initializeApp(
        options: const FirebaseOptions(
          apiKey: 'your-api-key',
          appId: 'your-app-id',
          messagingSenderId: 'your-messaging-sender-id',
          projectId: 'your-project-id',
          storageBucket: 'your-storage-bucket',  // Add this line
    ),
    );

    if (Firebase.apps.isEmpty) {
      Fluttertoast.showToast(
          msg: "Firebase initialization failed",
          toastLength: Toast.LENGTH_SHORT,
          gravity: ToastGravity.BOTTOM,
          timeInSecForIosWeb: 1,
          backgroundColor: Colors.black,
          textColor: Colors.white,
          fontSize: 16.0
      );
    } else {
      Fluttertoast.showToast(
          msg: "Firebase is already initialized",
          toastLength: Toast.LENGTH_SHORT,
          gravity: ToastGravity.BOTTOM,
          timeInSecForIosWeb: 1,
          backgroundColor: Colors.black,
          textColor: Colors.white,
          fontSize: 16.0
      );
    }
  }


Enter fullscreen mode Exit fullscreen mode

Then call the class file on your main.dart and make sure don't forget to add async and WidgetFlutterBinding.ensureInitialized.

Image description

And done you successfully Intergrate your firebase into your flutter project.

Credit for the Photo Cover : https://www.easternts.com/blog/the-dynamic-duo-flutter-and-firebase/

Top comments (0)