Connect Flutter with Firebase using flutterfire CLI! Goodbye to Manual Setup👋

hey there this is AK manadan welcome back to a new video and this video is part of my flutter full Stack mobile app development course where we are learning nodejs expressjs typescript mongodb render and Postman with flutter so we are building full Stack mobile applications with our custom backend so if you have not seen this course you can check out the link in the description and hope to see you there right so in this video what are we going to learn we are going to connect a Firebase application or Firebase project with our flutter application and you already know it right you already know it but the Crux is we have to do it using CLI now because if we have to like first of all let's create a project right let me call it let's say flutter typescript Workshop flutter typescript project or flutter typescript uh course maybe right so we don't allow uh this underscores flutter typescript course right so this is the application that we're building in the course right let's click on continue and let's click on continue and let's choose a default project so this is how we build or we initialize a Firebase project and after that we have to add Android we have to add iOS we have to add web app or we have to add Linux Windows Mac and everything right but using this uh CLI what will happen just you have to write a few commands in your terminal right and your Firebase project will be initialized for or integrated for Android iOS Mac OS and everything right so that's the beauty of this CLI if you want to read the article then I would recommend you I'll put the link in the description you can read this article on this Firebase CLI just a few commands you have to type in the terminal and your Firebase project will be ready right so again let's click on continue so this you have to do it right there is no skip in this this you have to do it but after this Android iOS and web app this you can integrate using your CLI command line interface right that's the full form of CLI now first of all what you have to do is you have to hit a command you have to install the Firebase Tools in your computer right so whether you are on Windows Linux Mac you have to run this command npm install and yes you should have node installed in your computer so npm is a note package manager so you can use npm so npm install dasg that means Global Firebase tool so you need to have Firebase Tools in your uh project right in your uh not in your project in your computer right so I already have it so but still it will install so I got some issues uh so basically it is uh not allowing me because uh the permission is denied so if you get the same issue what you have to do is just before the command just hit pseudo or just write Pudo and after that you have to write the same command again so I'm going to paste the same command sudo npm install d g Firebase tools then it is asking you to enter the password of your computer so let's enter the password and let's hit enter now it should not give me any issue and it should work so after this the Firebase tools will be installed in my Mac right in my computer so it is giving me again that issue permission denied Libs node modules five permission denied rename to FS tools 5 tools okay I got it so actually it is already having that five tool so I won't install it again that is fine but I already have those tools right so that is fine and now after that I'm after this I'm going to run this another command that will be Dart Pub Global activate the flutter fire CLI so this again you have to run it in your terminal not in your project right so again let's hit enter and this is going to install this fire flutter fire CLI and you can see that it is activated and it is installed right so that is fine now what you have to do is you have to go inside your application so this is the application let me just refresh this is the application that we building in the course that is your tweets application right in this tweets application people can uh write tweets put tweets and this we are uh storing in the mongodb using node Express typescript server right now you have to go inside the terminal of this project now let me hit flutter fire configure or even before that let me hit clear okay now let me hit flutter fire configure okay now you can see all my projects are here and I want to install uh for this project that is flutter typescript types flutter typescript course right so flutter typescript course and hit enter right so which all platforms so you can see it as by default selected Android iOS Mac OS and web so I want to yes I want to uh install for all of these so let's hit ENT enter again right so I want to install Firebase for Android iOS web and Mac OS so it is automatically going to uh install or do everything that like you know you have to do build you have to make some changes in the build. gdel file then you have to add your Google services. Json then you have to add your uh uh what we can say in the app delegate. Swift for your is Project everything it is going to do it on its own we don't need to do anything so let's just wait and let it uh complete its project or complete its task right so you can see uh it has done for Android and it has done for Mac OS and now it is doing for web app let's wait so basically uh yes let's hit enter yes yes yes and we are done so now let's go to let me decrease the font size now let's go to Android let's go to app you can see Google services. Json file I did not add it has added it in by its own right and the build. gradel it has made all the changes that it had to made and everything that that was required it is now done maybe like one thing that we should do is multiex enable to so multi uh Dex multiex enabled true this we should actually do it right rest everything I think uh is done similarly let's verify for iOS let's go to Runner and let's see yeah Google services info. PS F let's add it I have not added it right similarly if I refresh my fir portal Let me refresh I think all the three four apps that we have integrated they should be already uh be here right you can see four apps so I did not add manually Android iOS or web right it has automatically added it so if I go to these four apps all of these four apps are already here if I go to Project settings it has automatically added all of these four apps right I have not added added these apps right so this is the beauty of this CLI uh like otherwise we had to do it on our own for all of these four applications right perfect now let's go to lib uh one thing that we have to do you can see this Fus options right you can see this Fus options we just need to add this package in our pspec DML so I'll just say add Firebase scoree to dependencies right so this is required we need to add this pspec Emil package and now go to main. do and in this main. dot you just need to import that file uh Firebase options and uh you can just write your code for Firebase initialize so I can see uh I can write it over here so let's say async so first thing that we have to do is your uh widget flutter binding any like FL uh widget binding flutter binding insure initialized this we have to do and after that you can say await Firebase uh await Firebase do initialize app initialize app and you can Define your options so from where are these options coming they're coming from this file so this file also we have not added it has autogenerated this file right where it is defining all the options for Android iOS Macos and windows right so this is also autogenerated so go to main do do and in the main uh in the options so just say default Firebase options which is coming from here so if I if you go over here you can see this default Fus option just copy it in the main do dot just say default FS options do current platform so it is going to automatically detect the current platform whether it is Android iOS web app Macos and it is going to uh do all the required settings that's it guys that's it what we had to do and I think we are done so let's just save it and I think we are ready to uh shut down this application and restart it so that if it works that means Firebase is configured perfectly right so let's go to terminal not in terminal basically in debu console and let's see if it works if it works that means it's done and now you can see it is working and it has worked without giving me any issue Firebase is again initialized and integrated in my flutter app so I think that's it that's the only thing that you that you had to do and if you face an issue feel free to use a comment section or join my community the link is in the description and I hope to see you in the flutter plus typescript full Stack mobile app development course so till the next video keep coding keep innovating and thanks a lot guys

Channel: Akshit Madan

Views: 9,358

Keywords: #developer, #flutter, #appdevelopers, #ios, #android, #google, #apple, #data, #datascience, #collegestudents, #engineering, blockchain, freelancer, college, students, internship, web3, solidity, python

Id: PFP8GnJcJHA

Length: 9min 17sec (557 seconds)

Published: Mon Feb 05 2024