Add Firebase into Your Flutter App — Within 100 Seconds

The Flutter Way
3 min readMay 7, 2023


You might be 🔎 how to add Firebase 🔥 to your project, or maybe you already know how to do that. One thing you know for sure, it takes longer than 100 seconds. But, what if I told you that you can add Firebase to your new 🆕 or existing Flutter project in under 💯 seconds? 😱 Sounds too good to be true, right? Well, stick with me, and I’ll prove it to you!

Step 1: Install Firebase CLI

Before getting started, make sure you have the Firebase CLI installed on your machine. If not, simply run the following command to install it globally:

npm install -g firebase-tools

Optional — If you’re on a Mac or Linux 🐧 and Node.js is not installed, you can install the Firebase CLI using the following command:

curl -sL | bash

Run the following command to log in to your Firebase account:

firebase login

Let’s test it by the following command to display all the projects associated with your Firebase account:

firebase projects:list

Next activate the FlutterFire CLI by running the following command

dart pub global activate flutterfire_cli

If you are on Mac it may show you a warning 👇

To solve this warning, First, you need to identify which shell you’re using.

echo $SHELL

This command will output the path to the shell you’re currently using, such as /bin/bash, /bin/zsh, or another shell.

Based on the shell you’re using, the configuration file will vary:

  1. For Bash, the configuration file is typically ~/.bashrc or ~/.bash_profile.
  2. For Zsh, the configuration file is ~/.zshrc.

Now you know the path, you can use a text editor like nano or vim. For example, if you're using Zsh and want to edit the ~/.zshrc, run the following command:

nano ~/.zshrc

Add the path and save it

export PATH="$PATH": "$HOME/.pub-cache/bin"

Step 2: Add Firebase to New or Existing Flutter App

You have the option to integrate Firebase into a new Flutter project or an existing one. In this tutorial, I’ll demonstrate adding Firebase to the FlutterShop UI kit. This UI kit comes with 100+ pre-built screens that help you create any type of e-commerce app using Flutter. By using FlutterShop, your app will have a professional appearance also save up to 70% of your development time. You can download the source code for free or check the live demo.

After downloading the project, open it in your preferred IDE. Next, add the firebase_core package to your project. Or, you can execute the following command from your Flutter project directory to install the package:

flutter pub add firebase_core

We’re almost there! To connect your Flutter project to Firebase, simply execute this single command from your Flutter project directory:

flutterfire configure

You have the option to use an existing project or create a new one. 🔄 For this demo, let’s create a new project and name it FlutterShop-100s-challenge As it creates the project, we’ll select the platforms we want to use. Once you are done, upon checking the lib directory, you'll discover a new file named firebase_options.dart created by the FlutterFire CLI. 📂 Impressive, isn't it? Now, let's return to the main.dart file. We'll proceed by converting the main function to an asynchronous one and initializing Firebase using the DefaultFirebaseOptions.

await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,

And we are done with the Firebase integration 🔥. Now, suppose you wish to integrate Firebase into another project. All you need to do is execute the flutterfire configure command from that project's directory, and you're all set.

I would love to hear your thoughts on this tutorial and how you found it helpful. If you enjoyed it and found it useful, please don’t forget to give it a clap 👏. Your feedback is important to me and helps me to create content that is valuable and useful to you. Thank you for taking the time to read this tutorial.



The Flutter Way

Want to improve your flutter skill? Join our channel, learn how to become an expert flutter developer and land your next dream job!