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:
Let’s test it by the following command to display all the projects associated with your Firebase account:
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.
This command will output the path to the shell you’re currently using, such as
/bin/zsh, or another shell.
Based on the shell you’re using, the configuration file will vary:
- For Bash, the configuration file is typically
- For Zsh, the configuration file is
Now you know the path, you can use a text editor like
vim. For example, if you're using Zsh and want to edit the
~/.zshrc, run the following command:
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
Chrome or Brave browser recommended for previewLive previewFlutterShop is a premium E-commerce UI kit that you can use…
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:
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
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.