Flutter Firebase CLI | Connect Flutter With Firebase with Single Command
Step 1: Create Flutter App and Firebase Instance
How to connect Latest Firebase with flutter Learn how to connect firebase's new version with flutter using flutter firebase cli. We will install flutter firebase cli which will help in connecting android, IOS, macOS, and Web to firebase using a single command.
Install Flutter In order to connect Firebase with flutter, you have to install flutter first. In order to install flutter watch this video, here you will learn how to install all the necessary Files, Tools, packages, Emulators, Extensions, and IDE. Watch this detailed video it will help you. https://youtu.be/a3XkVqRQjZs Create new Flutter Project In order to Connect Firebase with Flutter, We will need a flutter App so, we can connect this app With firebase. To create a new Flutter App run the following command in the window terminal in any directory. Flutter new app_package_name this will create a flutter demo project with will be the default counter App.
Default Flutter App When we run the above command we will get flutter App which will look like this with a simple UI design having appBar and bottom Navigation Button. By Pressing the Plus button it will increment the counter and change will be shown in the UI.
Create Firebase App Firebase New Version provides an easy way of connecting the flutter App with Firebase. Firebase CLI Provides a single command with the help of which we can connect our flutter App to Firebase Android, IOS, macOS, and Web platforms. The first step is to log in to the Firebase console and create a firebase App with a name related to your flutter app so that it is easy to manage and organize the firebase app. Google FIrebase Console
Analytic Setup Google Analytics is used for Apps to be published to the play store. As we are connecting firebase to flutter App using Firebase CLI so I will turn off Google Analytics for it. If it is needed in your case, switch the button.
Progress Bar When we click on that create project button the creating process of the firebase App will start and you can check the progress made through the progress bar. After the creating process is completed, you will be redirected to the firebase App page.
How to connect Firebase new version with flutter After creating the firebase project, you will be redirected to the project page. Here click on that flutter logo and this will lead you to the firebase connection phase with flutter.
Step 2: Download and Install Firebase CLI
Download Firbase CLI On Firebase Connection Page, the first step is to download and install Firebase CLI. After that, We have to install flutter SDK and Create Flutter Project. As we have already installed flutter and created the flutter project so we will take start with downloading and installing flutter Firebase CLI. So let's click on that firebase CLI. Get Firebase CLI
Choose the Operating System After clicking that Firebase CLI anchor text, it will redirect you to the Firebase CLI page. Here you have to choose the Operating System, for which you want to download and install firebase CLI. In this post, I will download for windows Operating System so, I will click on the window.
Download Firebase CLI When we click on the Any Operating System Option Button it will move us to the download section of Firebase CLI for the selected Operating System. When I click on the window button, it redirected me to this anchor text to download Firebase CLI. If you click on that Anchor text, the download popup will show up, then select the directory in which you wanted to place that executable file. After selecting the directory, Click on that start button and the download process will start. It will take some time to download depending upon your net Speed. The faster the net speed the fast it will download. Download Latest Firebase CLI for Windows
Install Firebase CLI When the download process completes, the next step is to install Firebase CLI. So double-click on that firebase CLI executable file. This will Open Command Prompt for the installation, Configuration, and Authentication of Firebase CLI. It will take some time to make things ready for you, wait for some time in order to set up the envirenment completed for you.
Install Firebase CLI After making all the setup ready for you the next screen will show a message to you to accept for Firebase CLI which is Needed for Firebase CLI to collect usage and error reporting information. So replay with "Y" to allow the access and take start will installing and authenticate Firebase CLI
Window Defender Firewall Access to Firebase CLI Firebase CLI need access to some Feature which is blocked by the window firewall, this access may include access to a browser for authentication of your firebase account with Firebase CLI. So click on the allow access button, to install Firebase CLI Correctly.
Authentication of Firbase CLI The next step is to authenticate firebase CLI with the account with which you have created that firebase project. So whether click on the following link in the terminal or your browser will be redirected to the authentication page Firebase CLI.
Authentication Firbase CLI with Gmail Account Now Authenticate Firebase CLI with your Gmail account with which you have created the firebase App. Make sure you have selected the correct Gmail account otherwise you would not be able to connect that firebase App with flutter.
Firebase CLI Access to Firebase Account In the next step, it will show a message for access to the Firebae account. Click on allow a button to allow access to firebase.
Firebase CLI Access Success Message If firebase CLI successfully connected to your Firebase, then it will show this kind of login Success Message.
Firebase CLI Access Success Message in Terminal Also when you come back to the terminal you will get a success message there and there will be the email name with which you have login firebase CLI
Step 3: Node Js Download and Install
Download Node Js The Next step is to download Node Js. With help of Node Js, we will be able to install Firebase Packages and Dependencies. So search for Node Js Download and Click on the Firest Link Which will redirect you to the home page of Node Js. Visit Node Js Offical SIte
Choose Your Operating System for Node Js In the Next Step Choose the Operating System for which you want to install Node Js. Make Sure you have downloaded the Node Js File for the correct Operating System otherwise it will show an error and you would not be able to install it. . Download Node Js For Windows So I will click on the window Icon, and the download pop-up will show. Here you can select the directory where you want to place that Node Js Executable File.
Install Node Js When the installation process is completed then, the next step is to install Node Js. The installation of Node js is very simple as you have to double click on that executable file and the installation pop-up will show. To install Node Js Click on the Next button, Proceed with the Next Button Each time. During Installation Process you can select the directory for the node js, where you want to install node js. So Proceed with next in each step and don't change the default setup last you get that installation button, Click on the Install button, and Node js Will be installed on your Device. When the installation has been completed, then click on the Finish button to close this window.
Step 4: Download and Install Firebase tools
Download and Install Firebase Tools Open the Terminal and type the following command which will help in the installation of firebase tools packages. Make Sure you have opened a new terminal because in the previous one it wouldn't work. This may fail sometimes due to network issues. Try Again and Again and finally, it will install all the firebase tools that are required npm install -g firebase-tools this will install firebase tools on global which will enable you to connect any flutter app with firebase.
Install Firebase Tools Successfully If the Firebase tools are installed correctly then you will window on this type. So our firebase tools are installed correctly and we will move toward the next step.
Active FlutterFIre-CLI Open the new terminal window and type the following command. The will enable FlutterFire-CLI which will help in connecting any flutter App with Firebase dart pub global activate flutterfire_cli
Add FlutterFire Path to System Variables This will provide you with the Flutter Fire and we will add this path to System Path variables. So copy this Directory Path
Add Path To Add a path search for env and you will get this icon with text Edit the System Environment variables. Click on this Icon. 1) Click on Environment variables 2) Under System Variable select path and click on that edit button. 3) Click on New and a New line will be added the paste the Flutter Fire Directory here and Click on that Ok button. Also Proceed with Ok button to click these windows.
Flutter FIre Command Then Run the Flutter FIre Command Again and This time you get no Issue, We have successfully Made setup for FIrebase new version for Flutter
Connect Flutter App With Firebase New Version Back to the Firebase and Copy this Command. It will be like the following command. With help of this single command, we will be able to connect Firebase with flutter and we would not be making these configurations for firebase again and again. flutterfire configure --project=myapp-59f4d
Run FIrebase Command To Connect Firebase App with your flutter App run your copied command in root directory of your project and it will start fetching and connect you flutter app with firebare. In same window you will get options, choose Android and Press ENTER.
Connect Flutter Android, IOS, macOS, and Web using single FIrebase Command This Will connect your Android, IOS, macOS, and Flutter Web App with Firebase using a single command. Now Each time you want to connect Flutter App with Firebase you will paste a single command and it will connect your Flutter App with firebase for multiple Platform
Add Firebase Packages in Pubspec.YAML FIle Now Copy the Below Firebase Package and Paste it into your project pubspec.YAML file under dependencies. With help of these dependencies, we will get access to firebase for storing and fetching data. firebase_core: ^1.21.1 firebase_auth: ^3.7.0 firebase_storage: ^10.3.7 cloud_firestore: ^3.4.6
Edit main.dart FIle Now Copy the following code and replace it in your project main.dart file. In the following Code, We Initialize Firebase with is async call. void main() async { WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp( options: DefaultFirebaseOptions.currentPlatform, ); runApp(const MyApp());}
Edit main.dart FIle Now if you back to the project console in firebase, it will show your firebase is connected with the multi-platform flutter app. So this was all about connecting firebase's new version with flutter using Firebase CLI single command. Read the full article











