Firebase App: How to Setup Firebase in Your Flutter Project
Tags: flutter, firebase
Published: 2022-10-26 14:55:17

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/configuringfirebase_a5e6fa1605ac7b1aaad9015ffb50a985.jpg" alt="Set up a Firebase App cover image."/></figure>

## What Is Firebase?

Firebase, the mobile and web application development platform, has become one of the most popular BaaS (Backend as a Service) tools for developers around the world. With its wide range of features designed to streamline the development process and improve app performance, Firebase provides developers with a suite of tools and services that are both powerful and easy to use.

One of the key features of Firebase is its real-time database, which allows developers to store and sync data in real-time. Another important feature is authentication, which provides a simple and secure way to authenticate users using email and password, phone numbers, and social media accounts.

In addition to these features, Firebase also integrates with Google Analytics, which provides powerful insights into user behavior and app performance. This integration allows developers to track user engagement, measure conversion rates, and optimize their app for better performance.

Whether you're building a mobile app, a web app, or both, Firebase provides a reliable and scalable solution for hosting your app and serving static and dynamic content. And with its cloud functions, developers can run their code in response to events and triggers, making it easier than ever to build complex, server-less applications.

Firebase has become the go-to platform for developers looking to build high-quality apps across multiple platforms. Its integration with Google Analytics and its powerful BaaS features make it a must-have tool for any developer looking to build and deploy scalable, high-performance applications.

## What Will You Build? | Firebase App

Are you interested in integrating Firebase into a Flutter app but don't know where to start? Look no further! In this tutorial, we'll walk you through the process step by step.

We understand that some of the concepts and code blocks might seem a bit overwhelming at first. That's why we've glossed over non-essential parts and provided code blocks that you can simply copy and paste into your Pieces app. [Pieces](https://code.pieces.app/install) allows you to quickly save and access frequently used code blocks.

If you're new to Flutter and don't have an existing app to work with, don't worry! [We also have a step-by-step guide on how to build a Flutter app from scratch.](https://code.pieces.app/blog/building-a-flutter-web-app-from-scratch-a-complete-guide) This will give you a foundation to work with as we integrate Firebase into the app.

With Firebase, you can add powerful features to your app such as real-time data storage, user authentication, and push notifications and firebase analytics from the firebase console. By the end of this tutorial, you'll have a better understanding of how to use Firebase with Flutter and how to implement its features into your app.

So, let's get started and build an amazing Flutter app with Firebase!

## Set Up a Firebase project

After you've set up and created a simple Flutter app, go to the Firebase official website here: [Firebase Console](https://console.firebase.google.com/)

- Create a new project by clicking the **Create a project** button:


<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image6_c54eee87a79662c68c22934b6b5ca192.png" alt="Welcome to firebase! Firebase App."/></figure>

- Next, type in your **Project Name**, accept the **Firebase agreement** terms**,** and click **Continue**:


<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image5_34b7e60d64dabae33c0fa0454c20e67d.png" alt="Create a project page. Firebase App."/></figure>

- Enable **Google Analytics**, which will provide you with detailed analytics about your project. Then, click **Continue:**


<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image8_a2366b33f0bf625adc491c3b3ce04fe2.png" alt="Enable google analytics."/></figure>

- Next, you can select the Google **Analytics location** based on your projected users. If you’re not sure, you can choose the U.S. for a location. Now, accept the **Analytics terms** and click **Create project.**


<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image3_d9b4caceb196c73985d5d3601bb5328b.png" alt="Configure Google Analytics. Firebase App."/></figure>

- Now, you can select the **Android icon** to configure Firebase with your Android application:


<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image2_da16dab6b1af9ee48c0ec9c7c99f9169.png" alt="Add firebase to your app."/></figure>

- Next, you’ll have to **register** your app by providing your app **nickname** and **package name**. You can find your app package name in Flutter here, and as shown below: **project directory->android->app->src->main->AndroidManifest.xml**


<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image1_6c1903dec4daf39e50bebc6ee4a43e60.png" alt="Firebase App | Code example. "/></figure>

- Now, you can **download** your **google-services.json** file and put it inside your Flutter Project as shown below:


<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image7_1262f5a6ce86ab3bfe402524c9f5021b.png" alt="Download and configure."/></figure>

- To make the `google-services.json` config values accessible to Firebase SDKs, you need the Google services Gradle plugin.
- Add the plugin as a `buildscript` dependency to your **project-level** `build.gradle` file:
- Copy this line of code inside dependencies:


```
classpath 'com.google.gms:google-services:4.3.13'
```

[Save this code](https://mariah.pieces.cloud/?p=864548ba47)

Root-level (project-level) Gradle file (`<project>/build.gradle`): 

<figure><img src="https://d37oebn0w9ir6a.cloudfront.net/account_32099/image4_362c3029849f540d6d9ccf0911ec78c5.png" alt="Save code to Pieces. "/></figure>

- Then, Select Kotlin and in your **module (app-level)** `build.gradle` file, add both the `google-services` plugin and any Firebase SDKs that you want to use in your app.
- Replace following lines of code with your dependencies (last part inside `build.gradle` file (app-level):


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

[Save this code](https://mariah.pieces.cloud/?p=49b44e919b)

- After adding the plugin and the desired SDKs, Click **Next**, and **Continue to Console**.


## Add Firebase Packages 

Firebase is accessed via a variety of libraries, and there is one for each Firebase product (e.g., database, authentication, analytics or storage). Flutter provides a collection of Firebase plugins known as FlutterFire.

**Available FlutterFire plugins**

- cloud\_firestore
- cloud\_functions
- firebase\_admob
- firebase\_analytics
- firebase\_auth
- firebase\_core
- firebase\_crashlytics
- firebase\_database
- firebase\_dynamin\_links
- firebase\_messaging
- firebase\_ml\_vision
- firebase\_performance
- firebase\_remote\_config
- firebase\_storage


**Steps to Add Firebase Packages into Your Project:**

- Open the **pubspec.yaml** file from the root directory of your Flutter app.
- Add any package that you want to use, such as firebase\_core:


```
dependencies:
  flutter:
    sdk: flutter

  firebase_core: ^1.21.1
```

[Save this code](https://mariah.pieces.cloud/?p=ab7d48b55f)

### Running the Application

- Connect your Android emulator or physical device to test the application. Next, click Build & Run.


## Conclusion on Firebase App Flutter Project

By now, you should have a better understanding of how to use Firebase with Flutter and how to implement its features into your app. So, why not get started and build an amazing Flutter app with Firebase?