How to setup firebase in flutter – Firebase Setup 2022

Basics, Flutter, Flutter Firebase, Flutter Login App

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.

  1. stand alone binary (.exe)
  2. 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

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

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.

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:

await Firebase.initializeApp(
  options: DefaultFirebaseOptions.currentPlatform,

);

Rebuild your Flutter application:

 

flutter run

CODING with T

🚀 Supercharge your Flutter skills! Subscribe to my YouTube channel now for mind-blowing coding insights, expert tips, and exclusive content. Don’t miss out!

23 - Product Detail Screen, How to create Products Details Screen in Flutter. Flutter eCommerce app UI Design

Source code

COURSES

Flutter E Commerce App Modern and latest
Flutter Login App UI Source Code - Flutter Complete App - Flutter App Design - Flutter App 2023 - Complete Flutter App 2023
Learn flutter from scratch in 4 hours - Flutter Crash Course - Coding with T

Learn Flutter

1.2 # How to install flutter on android studio 2022 - Flutter Basic Crash Course
2.2 - Add Image in Flutter - Assets Network- Flutter Basic Crash Course 2022

flutter Design

How to create a Custom Shape in Flutter. Flutter E Commerce app Design. Ecommerce app design Flutter. Flutter clippath tutorial
How to create a Custom Appbar in flutter. Custom Appbar Design. Flutter App Design
16 - Product Card and Grid Layout, How to create a Grid View in Flutter. How to add Products in GridView Layout. Flutter eCommerce app UI Design
Bottom Navigation bar in Flutter. Flutter Material 3 bottom navigation bar. How to design background color of Flutter bottom navigation bar. Flutter ecommerce app design
23 - Product Detail Screen, How to create Products Details Screen in Flutter. Flutter eCommerce app UI Design

Flutter Backend

33 - How to Setup Firebase - Firebase Basics - Flutter Firebase - Flutter ecommerce app with firebase as backend
38 - How to Sign-in with Google in flutter Firebase, Firebase Basics, Flutter Firebase, Flutter ecommerce app with firebase as backend
40 - Flutter Firebase CRUD,  Firebase Basics, Flutter Firebase, Flutter ecommerce app with firebase as backend