In this flutter firebase tutorial, we will learn, how to set up a firebase in a flutter. We will use a simple and quick way to set up a firebase.
Learn to setup firebase in flutter with a quick and easiest way! In this flutter firebase tutorial, we will learn Flutter Firebase Setup [2022] from scratch. We will use latest Flutter Firebase CLI method to setup firebase in flutter. We will use the node.js npm command to install flutter firebase. Also see the warning of Path variables while setting up the firebase and add it in environment variables.
Watch Youtube tutorial
Create a new Firebase Project
To set up a firebase in flutter, we first have to create a new project in Firebase Console.
So, to create a new project. Open Firebase in your browser.
Select Firebase Console from the browser’s top right corner and sign in using your Gmail Account.
Once Logged In, click on the + icon to create a new firebase project and when the project will be created you have to select Firebase Icon on the dashboard.
List of options will be opened to configure your firebase project. All those steps are given below.
Step 1: Install the required command line tools
To install Firebase, first and foremost we have to setup Firebase CLI. Open the firebase documentation to setup firebase in Flutter and choose the desired Platform (Android in our case).
Make sure you have IDE downloaded, Flutter SDK install and Flutter project created.
There are two ways to setup Firebase CLI.
- stand alone binary (.exe)
- npm (Node.js)
We will use 2nd method using Node.js. To use npm
(the Node Package Manager) to install the Firebase CLI, follow these steps:
1. Install Node.js using nvm-windows (the Node Version Manager). Installing Node.js automatically installs the npm
command tools.
2. Install the Firebase CLI via npm
by running the following command:
npm install -g firebase-tools
npm install -g firebase-tools
npm install -g firebase-tools
This command enables the globally available firebase
command.
3. Continue to log in and test the CLI.
Log into Firebase using your Google account by running the following command:
firebase login
4. Install the FlutterFire CLI by running the following command from any directory:
dart pub global activate flutterfire_cli
Step 2: Configure your apps to use Firebase
Use the FlutterFire CLI to configure your Flutter apps to connect to Firebase.
From your Flutter project directory, run the following command to start the app configuration workflow:
flutterfire configure
Step 3: Error while configuring flutterfire
If you get the following error while Flutterfire configuring in Android Studio, you have to add the path in the system environment variable first.
Search Edit the system environment variables => in Advanced tab => open Environment Variables => in users variable for PC, click on PATH, and then click the edit button => click on New and add the following text(after changing YOUR-PC-NAME
to your PC name) in new line.
C:\Users\'YOUR-PC-NAME'\AppData\Local\Pub\Cache\bin
After adding the path in Environment variable, you have to restart your system.
The term 'flutterfire' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again.
Step 4: Initialize Firebase in your app
From your Flutter project directory, run the following command to install the core plugin:
flutter pub add firebase_core
From your Flutter project directory, run the following command to ensure that your Flutter app’s Firebase configuration is up-to-date:
flutterfire configure
In your lib/main.dart
file, import the Firebase core plugin and the configuration file you generated earlier:
import 'package:firebase_core/firebase_core.dart'
import 'firebase_options.dart';
Also in your
lib/main.dart
file, initialize Firebase using the DefaultFirebaseOptions
object exported by the configuration file:
flutter run
OTHER USEFUL LINKS
- Install Android Studio
- Install Flutter
- Create a new flutter app
- Create Folder Structure
- Setup Theme in Flutter for Light & Dark Mode
This is the tutorial of our Flutter Login App Series.