Firebase Integration with Flutter

 

Hello,
In this article, I want to talk about how we can integrate our Flutter project into the Firebase platform.

Firebase is a platform offered by Google and includes comprehensive developer tools that enable rapid development and deployment of mobile and web applications.

Firestore Integration Step by Step

1. Firstly, we need to add our project that we have written or just started to Firestore. For this, we log in to Firebase Console. We log in with our Google account.

2. When we enter the Get Started section, click on the Add Project section on the page that opens.

3. On the screen that opens, we enter our project name and proceed as the page directs us. There is a selection to use GoogleAnalytics. This is a free web analytics service used to measure the performance and user interactions of websites and mobile applications. You can select it if you want to track and access real-time data such as visitor tracking, page views, accesses, traffic sources, etc. The next screen asks you to create an Analytics account. You can create and continue. If you do not want to use this feature, you can also leave it unchecked.

4. After our project connection is made, we see a screen like below. Here we need to make IOS, Android, Web integrations separately. Of course, it is logical to choose only on which of these platforms our application will be published.

5. Let’s start with IOS. Our screen looks like this:

The first information requested from us is Apple bundle id. This is like the identity record of our application. It can be determined by the system when creating a project, or we can ask for a specific id. We can access this information by opening our project in XCode. After the project is loaded, when we click the Runner tab, the General page is loaded on the right. The bundle id is there as shown below. Other information NickName and StoreID are optional.

6. The second part is downloading the configuration file. We download the file created specifically for our project from the link as shown on the screen below. And add it under the project folders. We do this addition on Xcode, not by finding the project folders in the Finder and transferring them into it.

When we drag the file to the XCode screen, a screen like the one below appears. It is important that we select all targets on this screen.

7. In the next step, we need to install firebase-ios-sdk in our project. A URL appears on the screen below, copy it and paste the URL from the File — Add Package Dependencies steps in Xcode and click Add Package.

8. After this stage, our project is saved in the Firestore database on the IOS platform.

9. On the Android platform, there are a number of different applications.

The first requested information is Android package name. It has the same feature as IOS bundle id.

10. Here, a json file comes as a configuration file. We add it under the app folder from the project folders as shown.

11. It’s time to add firebase-sdk. We enter the android/app/build.gradle file and add the following codes:

plugins {
    id "com.android.application"
    id "kotlin-android"
    id "dev.flutter.flutter-gradle-plugin"
    id "com.google.gms.google-services". //This line is added
}

dependencies {
      implementation platform('com.google.firebase:firebase-bom:32.8.1') 
//This line is added, figures may vary according to version. 
//The current figures are shown in the following routing screen.

In the android/build.gradle file, we add the following codes:

buildscript {.  //figures may vary according to version. 
                //The current figures are shown in the following routing screen.
    ext.kotlin_version = '1.7.10'
    repositories {
        google()
        mavenCentral()
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:7.3.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        classpath 'com.google.gms:google-services:4.4.1'
    }
}

12. After completing this step, we also register our project for the Android platform.

Firebase Key Features

1. Database (Firestore): Firebase provides Firestore, a real-time database solution. Firestore is a cloud-based, NoSQL database and is an ideal solution for storage and synchronisation of user data for web and mobile applications.

2. Authentication: Firebase Authentication manages authentication of application users. It facilitates authentication of users using email/password, Google, Facebook, Twitter, GitHub and other identity providers.

3. Storage: Firebase Storage allows users to store media files (images, videos, documents) in the cloud. In this way, users can securely store and share large files.

4. Analytics and Monitoring: Firebase Analytics, as I mentioned at the beginning of my article, offers comprehensive analytical tools to monitor and understand application usage. It monitors user behaviour and interactions and measures the performance of the application.

5. Messaging and Notifications: Firebase Cloud Messaging (FCM) is used to send push notifications to users. FCM is a powerful tool used to attract and engage users.

6. Hosting: Firebase Hosting is used to deploy web applications quickly and securely. It offers static and dynamic content and servers it securely with SSL support.

7. Artificial Intelligence and Machine Learning: Firebase ML Kit allows developers to add artificial intelligence and machine learning features in their applications. It can enrich applications with advanced image processing, text recognition, language translation and other features.

We can use Firebase with the services I mentioned above and many more tools that are not here. I will explain the most used Firestore and Storage features in detail in my following articles.

I hope my installation narrative helps.

Thanks for reading.

Selin.