Add Firebase into Your Flutter App — Within 100 Seconds

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 https://firebase.tools | 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.

FlutterShop - Premium E-commerce UI kit for Flutter

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.