Flutter Firebase Setup | iOS, Android, Web & MacOS using FlutterFire CLI | Fastest way [2024]

hello everyone welcome to the new video on it first of all if you're new to this Channel and you want to learn FL from beginning to advance we are creating a complete 7 weeks of flter and fire best developer boot camp you can check out the play link by clicking the link here at the top right corner or I will also give the link in the video description and 3 weeks of the boot camp are already completed and we are ahead of creating something big so like And subscribe and hit the Bell icon to get notified on every new updates on the channel so you might be familiar from the title of the video we are going to set up the fire Bas for our flutter application using flutter fire CLI so that you don't have to create the Android and iOS application separately in your farbest project and then to set up them with the thir application but instead everything will be done so quickly like the magic happens and the reason I'm creating this video is that on setting up manually far best for for your flter Android and iOS application the platform exception is very common and it's so frustrating and most of the developers cannot figure out that what's happening behind the scenes even though the Firebase is setup for your Android and iOS fter application but it still keeps throwing the platform exception or saying the Firebase is not completely initialized and something like that and setting up fire base using flutter far CLI for flutter fix this issue so without further Ado let's get started so I have this very simple fter application currently running on the iOS simulator so to set of fire Bas in this application using flutter fire CLI simply you have to move to your browser and then go for add the project and then name your project I will name this project farb demo and then go for continue and also keep the Google analytics for this project enable then go for continue and then select the def default account for the far best analytics and then go for creating this project this will take some while and then your far best project will be created so let's wait for it so once your farb best project is created you can go for continue then this will navigate us here where we can create the iOS Android and the web application and then to set up them with our further application but in this part we are not going to do this we are not going to touch these three of the options but instead we will go for this flutter specific because we going to use the flutter fire CLI to set up the fire base for our flutter application so that click this flutter and this will navigate you here prepare your workspace this is the first step so it's saying the easiest way to get you started is to use the flutter fire CLI so that before you continue make sure you have install your fed fire CLI so we will click this link and this will navigate us to a page here in the page install the far best CLI according to the operating system you have Windows Mac OS or Linux So currently I'm on the Mac OS so I'll click this and this will navigate me here and then I have to run an npm command to install the ferier CLI or if you don't have the npm so simply you can download this npm package manager so that it will allow you to download the packages like that so you can go for the npn and then you have to copy this command npm install minus G which means globally fire best tools and then move to your project and then search for the terminal so after the terminal has been opened simply what you have to do is to pass that command and hit enter so this will take some while and will install the far best tools and will allow you to use the FL fire CI in your system so after the far best tools has been installed so what you have to do is to again move to the browser here next step is to run the Firebase login to log into your account where your fireb best project is created so that again copy this fireb best login command from here and then go for the terminal and paste it in here and hit the return in case of MacBook or in case of some other keyboard you can click you can go for the enter so when you do this this will take some while and it is saying the another account is already log in so in your case this will not be the case but instead this will give you a link so that you can copy this link and paste it in the browser where the account is login where you create your fireb project so then using that account we will set up the fireb for flutter application for the different platforms so I have the account login where I don't have the project that I just created so what I will do is just do do farb best log out so that it will log out that account because I don't have the project created in that account but I have the project in other account so that I will do again fireb best login so then this will give you the option of allow farbest to collect the CLI and emulator suit usage and error reporting information so you can go for yes and this will navigate you here directly or this is also the link that I talk about that you have to copy this and paste it in the browser where that specific account is login where you create your fireb best project so that it's directly navigating me in here so that I will select that account because in that account I have here the Firebase project so I'll go for the sign in to that account and after some time this will be sign in and it is saying to allow okay I allow this and it's saying the Firebase CLI login successful that's it now here it was saying successfully logged in as that account where I have the fireb best project so the next step would be to go to install the thir SDK so if you don't have the thir SDK so you have to install the thir SDK by clicking this link and install the SDK according to your platform or if you don't know how to install the third SDK I already have created the videos on these topics in the week one of the seven weeks of third and fire best developer boot camp so I'll also give the link of the video in the description so you can also watch that video if you don't know how to set up the FL SDK in your system of Mac or windows so that's it in the fireb best demo application it's saying to create your flutter project so we already already have the third project so you'll skip that part and go for the next and then it's saying from the from any directory run this command okay we will copy this and go to the terminal again and past that command Pub Global activate flooded fire CLI so now we are going to activate the fireb CLI and then it is resolving some dependencies and this will only be possible if you have the far best tools downloaded so first thing you have to do is to download the fireb tools using the npm nde package manager so that if you have the fireb tools so you will be allowed to activate this flare fire CLI so it is activating the flare fire CLI and after some time you will got the message of the activated flare for CLI and its version after that go back to the browser and it's saying then at the root of your thir project directory run this command so you'll copy this and we'll paste it in here and hit enter so it will say the thir app required exception the current directory does not appear to be a thir application project yes we're outside from the project so what we have to do is to go to the third project that we have and then in the terminal we will simply do PWD to extract the path of the project and copy that path go to the terminal again and go for a CD and go to that flut project directory so now we are on our flut project directory so now we have to run that command which is the thir configure the project that we have in the fireb best account so hit enter then it will fetching the available fireb best projects so as we have already passed the fire best demo ID so it is doing the setup for the specific project so it will take some while and we'll fet the available projects and we'll tell us what to do next so first when I run the flutter fire configure the project I got an exception of the Firebase command exception and error a card on the farb C when attempting to run a command that is because of the internet issue so when I run it again so it happens like that so now it is asking which platform should your configuration support use the arrow keys and SP to select okay so we can select the platforms using the arrows and and then when the space is clicked this will select or unselect the platforms that you want to set up for base for or not so you can select or unselect this so I want to select for all of the platforms so I will keep each platform selected and we'll go for enter and it's switching the register and write fireb apps for project fireb demo and registering everything and after some time it will complete the processing and the farb will be set up for the platforms that I selected so after some while this will ask you that the files Android build Gradle and the Android app build. grad will be updated to apply the fireb configuration to the G build plugins do you want to continue like on regular basis when we are setting up the fireb for Android application we had to do some configuration for example adding the Google class parts and the plugins and the implement ations like that so it is asking do you want to continue and allow the FL fire C to do these changes in your project yes so we will go for why and it will continue and it is saying the Firebase configuration file in the LI Firebase options generated successfully with the following fireb apps and it's successful the fireb is set up for the platforms of web Android iOS and the Mac OS so that was the last command then we go we can go for the next and it is saying import the farb score in your Manda Dot and then initialize the fireb best like that so we will go for copying this the a fireb best initialize app then we can go for our flutter application we have gotten an error in the lib that is because we got the fire best options and we can go for the main and here we have to first make it asynchronous that is because we have to the a farb best initialize app and for this farb best initialize app we have to add one dependency in here that is the farb best score so after adding that simply go for pubget and once the pubget has been completed you have to go to the Mand Dot and then simply for this Firebase import the Firebase score and for the default Firebase options simply import this here as it's already generated and inside that generated file we we have the setup for the Android iOS Mac OS and windows Linux and it's saying unsupported error here and the fire best options for Android iOS and Mac OS the four platforms that we have selected and then we can go for the men and with that we can go back to the browser and continue to the console so you can see we don't have the projects in here but once you restart the tab you will create the four projects directly in here so that you don't have to manually create each and then set up each manually in your for application so we got the four application Android iOS Macos and the web and then now it's time to stop the M tart and close the project and run it again test if it's correctly set up or not so if it runs correctly so it means the Firebase is correctly set up in our third application with third fire CLI so that we didn't create the Android iOS Macos and the web applications manually in the Firebase project but it's directly done by the FL fire CLI and that was the very quick action so now let's wait when the application runs so the application run successfully but we also have to do one more thing that is suggested is here flare binding. insure initialized so that it will be good for that now again rerun the application and now it's loaded you can see we got the demo homepage we can increment and our application run successfully on iOS and in case of Android and web this will also work the same that is because everything is done by the farb CLI so that's it for this video if you have any questions please let me know in the com section and I would love to answer your questions and also leave your thoughts on the boot camp so that I can get the idea what improvements I can make in the upcoming videos that's it see you in the next one

Channel: eTechViral

Views: 3,485

Keywords: cli, firebase, flutter, flutter 2 firebase, flutter firebase android setup, flutter firebase for beginners, flutter firebase ios and android setup, flutter firebase setup, flutterfire, flutterfire cli, getting started with firebase, flutter and firebase, flutter firebase macos setup, flutter firebase web setup, how to use flutter, getting started with firebase on flutter, how to get started with firebase on flutter, flutter developers, tutorial, introduction to firebase on flutter, ios

Id: -_3iOlzsC9I

Length: 14min 12sec (852 seconds)

Published: Mon Oct 23 2023