Set up Firebase for Flutter in 3 easy steps
If you prefer a video tutorial, then have a look here
In this short tutorial, we will learn how to set up Firebase for your Flutter project in 3 easy steps.
So let’s begin!
Step 1: Installing Firebase CLI
Go to the FlutterFire official website and follow the installation guide there.
As in the documentation, use the Node Package Manager to install the Firebase CLI tools using this command
npm install -g firebase-toolsYou need to have NodeJS installed in your machine to run this command. If you don’t have NodeJS, you can download it from their official website
Next, we need to activate the FlutterFire CLI globally on our machine, using dart
dart pub global activate flutterfire_cliOnce this is done, the flutterfire and firebase commands should be globally available.
You can verify both by running flutterfire --version and firebase --version to check if both have been installed correctly.
The commands should output their respective versions.
Now you need to configure your Firebase CLI so that it is logged in to your Firebase account. You need to run firebase login and follow the instructions to do that.
Once done, verify that Firebase CLI has access to your Firebase account by running firebase projects:list
This will render out your current Firebase projects in the terminal.
Step 2: Configure Firebase for your project
Now navigate to the root of your Flutter project where you want to configure Firebase, and run the flutterfire configure command.
In the output of this command, you will see a list of your current Firebase projects. You will also see the “create a new project” option at the end of the list.
Based on your preference, you can set up a new Firebase project, or integrate with an existing one.
For this tutorial, we will set up a new Firebase project and call it runtimesnippets-firebase-test
With the arrow keys, navigate to the “create a new project” option and hit Enter.
Now enter the project ID in the next prompt, in our case it is runtimesnippets-firebase-test
After a few minutes of processing, the terminal will prompt that our new Firebase project has been created.
In the next prompt, Firebase CLI will ask about the platforms for which you would like to configure Firebase.
For example, you might not want to configure the project for web, or for desktop. To do that, just use the arrow keys to scroll to the particular option, and hit space to unselect it.
Once you’re done, press Enter. The terminal will now create the required apps inside of your Firebase project. It will also iteratively check if the selected apps already exist inside your Firebase project, if not, it will create them.
At this point, the output should look something like this, with your selected apps’ IDs rendered on screen
If you selected Android in the options, you should have a prompt stating that build.gradle files in app and root directory of the Flutter android project need to be updated, asking you for consent.
Just hit enter, since this change is important.
Once done, we can now see that the apps you selected have been generated successfully
To verify this, you can also go to your Firebase console and see that your Firebase project, along with the apps that you selected, have been created.
Step 3: Integrate Firebase with your app
After Firebase CLI has generated your Firebase project and apps, you should be able to see a file called firebase_options.dart in lib folder of your Flutter project.
This file is responsible for passing platform specific settings for your firebase project when Firebase is initialized inside your app.
This information is held by the FirebaseOptions class.
There is an import error on line 3
This means that this file has a dependency on firebase_core package.
Let’s import it
Add the firebase core dependency to the pubspec.yaml file:
firebase_core: ^2.16.0and then run flutter pub get from terminal or your IDE, to fetch the package.
Once this is done, you will see that all the errors in your firebase_options.dart file are gone.
We can now start writing code.
Before we can use any Firebase service, we need to first initialize the Firebase app when the app starts. The most common place to do that is inside the main.dart file, before we call the runApp function.
So navigate to your main.dart file inside the lib folder and before writing anything above the runApp function, we need to ensure that the Flutter framework is ready.
To do that we need to call WidgetsFlutterBinding.ensureInitialized()
WidgetsFlutterBinding.ensureInitialized();Then, after this, we need to call the Firebase.initializeApp method
make sure to add await before the call, and make the main() method async so that the app waits for the Firebase plugin to initialize before the app starts.
Once the app runs successfully, it is safe to say that we have successfully integrated Firebase inside our Flutter app, and now we are ready to use other Firebase services.
Read how to perform CRUD operations using Firebase’s Cloud Firestore:
If you liked the tutorial...
Please follow me here and on my socials!
Follow me:
Youtube: https://www.youtube.com/channel/UCD2BEqL0wC7leFKm4i9_aRg
LinkedIn: https://www.linkedin.com/in/rawahamuhammad/
Github: https://github.com/coffiie
Medium: @RawahaMuhammad
Follow Runtime Snippets (bite-sized Flutter/Dart tutorials)
Youtube: https://www.youtube.com/channel/UCD2BEqL0wC7leFKm4i9_aRg
LinkedIn: https://www.linkedin.com/company/100042850
Twitter: https://twitter.com/runtimesnippets
