Firebase is a Google-backed application development software that allows developers to develop iOS, Android, and Web apps. Firebase provides different tools for tracking analytics, reporting and fixing app crashes, and creating marketing and product experiments. The Firebase Realtime Database allows you to build rich, collaborative applications by allowing secure access to the database directly from client-side code. Your data remains local, and even while offline, real-time events continue to fire, giving the end-user a responsive experience. After the dart setup and several other steps to start coding, here is a complete guide to getting started with how to integrate firebase projects with the Flutter app.
Related Topic – Flutter CSV Field matching
Create a Project in Firebase
Creating a project in firebase is just more than easy. It takes simple 3 steps to get done.
Steps:
- Head over to Firebase official website.
- Click on the โGet Startedโ button appearing on the webpage.
- A new page will open. Click โAdd Projectโ.
- Enter your project name in the tab appearing in front of you and press continue. Letโs move on with a sample name as โTest Projectโ.
- Select the checkbox appearing after clicking Continue and then click โCreate projectโ. A new page will appear saying โYour new project is readyโ. And you have successfully created a Firebase project. Click continue.
Adding Firebase to Flutter App
After you created the firebase project. Now you can this firebase to your flutter android, iOS, or web app easily.
How to Add Firebase in Android App
Steps:
- Click on the android icon among the three icons which are iOS, Android, and web.
- A new window will appear as shown below.
- You need to add โandroid package nameโ. Where to find that? Here you go.
- Go to the android folder in your project. Then go to app>src>main and there you will find a file named โAndroidManifest.xml. There you will find the package name as selected in the window below.

- Copy the text and paste it in the โandroid package nameโ tab above.
- Enter the optional texts and click โregister appโ.
- After that, you will get an option to download the โgoogle-services.jsonโ file. REMEMBER: you should not change this fileโs name. Or this all will be a total waste.
- Move the google-services.json file that you just downloaded into your Android app module root directory and then click Next. As shown here:

- The Google services plugin for Gradle loads the google-services.json file you just downloaded. Modify your build.gradle files to use the plugin.
- Now you need to add the line in dependencies as shown in the figure below. You need to check if the lines are available in the repositories. If not, then add them.
- Now you have to add plugins to the project-level build.gradle (
<android>/build.gradle
):

Similarly, you have to add plugins tothe app-level build.gradle (<android>/<app-module>/build.gradle
):

After adding the lines to โbuild.gradleโ click โcontinue to consoleโ and you are done with adding firebase to your android app.
How to Add Firebase in Apple app
To add the firebase project to your apple app, you need to have a macOS with XCode installed in it.
Steps:
- The same goes for the Apple app. Click on the iOS icon after clicking get started, same as you did for android earlier.
- Now the same page will open asking โApple Bundle IDโ to register your app. Now, again, where to find that? Just follow these steps.
- Run XCode, go to the ios folder in your project and you will find there a file named โRunner.xcworkspaceโ. See the image below

Run this file and there youโll get Bundle Identifier having an id written in it as shown here.

- Copy the id and paste it into the register app portion in the โApple Bundle ID tabโ.
- Enter the optional fields, and click โRegister appโ.
- Next you have to download the file as you did earlier. Click โDownload GoogleService-Info.plistโ and the file will download automatically.
- Now click next and skip the next two options (Add firebase SDK & Add initialization Code) by pressing the next button.
- After this, press โcontinue to consoleโ.
- Now it is the last step to finish adding firebase to your apple app to add the โGoogleService-Info.plistโ file in the runner folder as shown below.

- A dialog window will appear, click Finish, and thatโs it. You have successfully added the firebase project to your apple app.
How to Add Firebase in Web App
- Click on the web icon appearing on the firebase webpage to add firebase to your web app.
- Same as before, you have to register the app giving any nickname to it. In the case of web apps, we donโt need packages to get started. So, enter a name and click โRegister appโ.
- Now simply, you have to put https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js to the script portion in the body text.
- Then add the following text in the respective fields of your project as shown below.

- Add the const text into the body of your script and Initialize Firebase text shown in the picture above.

- Click โcontinue to consoleโ and you have successfully added Firebase to your web app.
Over to You
That was it for getting started with firebase projects and adding them to your flutter app. I hope it helps you in starting your development career with Flutter. Leave a comment below if you have any queries or suggestions. FlutterDesk is always there to help you get out of any complex problems. you can also hire a flutter app developer if do not have time to do all this