Flutter + Firebase Setup Tutorial | Easy Firebase Integration Guide Flutter

hello everybody in today's video I'm going to be showing you a super simple way in which you can integrate Firebase with your flutter application we're going to be taking a look at how to integrate Firebase with both IOS and Android and the steps that I'm going to be showing you will also help you in integrating Firebase with your flutter application in the case that you're building for either desktop or web so with that said let's get into the video so to get started the first thing that we're going to be doing is installing the Firebase CLI tool within our system so that we have actually access to it and we can use it to basically configure our flutter projects directly to work with Firebase so to do that what I'll recommend is that firstly you come to a website called nodejs.org and then from here you can install the long-term stable version for nodejs whatever that may be for you and once you're done with that then what you can do is actually come onto your terminal in the case of Windows this is going to be partial and here I'm just going to increase the size for you guys so that it's easier for you guys to actually see what's going on and I'm going to basically type node-- version and if you get an output that basically means that node is now correctly installed on your system and then you can do npm dash dash version as well which stands for node package manager and if you get outputs for these then you're good to go from here the next thing that we're going to be doing is actually installing the Firebase CLI tools so for that what you can do is type in npm then after this installed ash- G for the global flag and then from there you're going to do firebase-tools once this is done you can press enter and this is going to go ahead and install the CLI tools for you so now that node is properly installed on our system and we have access to the Firebase CLI tools what we can actually do is close down terminal and I'll recommend that you restart your Visual Studio code instance as well and then open up a terminal window within that making sure that you're within the directory that contains the source code for your flutter application and then after this the first thing that I'm going to be doing is just Firebase log in and then it's going to basically open up a web browser window for you where you can actually authenticate with Firebase and then make the CLI actually have access to the Firebase account and actually take a look at all of the projects that you have within Firebase we're going to get an output saying success you're logged in successfully now so you can clear the terminal window and this command is going to be the same whether for Windows or Mac OS and you can move on to the next step so for the next step what I recommend doing is actually going to Firebase logging into the appropriate account with which you logged in through the CLI as well and then going to create a project clicking on it and giving your project a name so in this case I'm going to call it flutter Firebase tutorial um I could have named it something cheesy like subscribe but you all know the gist so subscribe if you haven't um then I'm going to say unable Google analytics for this um an account for this just do default account then create the project and wait for the project to be created and once the project is created then I'll resume the video Welcome Back everybody so now that our Firebase project has been created I'm going to click on continue and and after this it's going to basically take me into the actual Firebase console where I can manage my project and I'm just going to dog this window to the side so the next thing that now I'm going to be doing is just performing a quick sanity Tech to make sure that my Firebase CLI tool has been integrated properly so for that I'll just do Firebase projects and then colon list and make sure that the output I get corresponds to whatever projects I have within Firebase since I only had one I'm just getting one output so this basically means that our Firebase CLI tools are now properly installed integrated and we actually have a project created within Firebase then now we're going to be linking with flutter so to do the actual linking process within flutter and Firebase we're going to be using a CLI tool called flutter fire and we're going to be installing it by doing the command. pub Global activate I believe and then I'm going to say flutter un fire uncore CLI like so and press enter and this is going to go ahead and install the flutter fire CLI for me once this is going to finish with that it's execution it's going to let me know that it installed flutter fire and it's activated it as well so now that we have the flutter fire CLI ready to go what I'm going to be doing is making sure that my current working directory for the terminal is the same place where I have all of the code for my flutter project and here what I'm going to be doing is typing in flutter fire and then configure like so and then pressing enter and what this is basically going to do is now it's firstly going to interact with the Firebase CLI it's going to get all of the projects for me now I can use the arrow keys to actually go between the options that I have available here to select whatever Firebase project I want to link with my flutter app so in this case I'm going to be doing the first one which is this you can use the arrow keys to go between this then using the same methodology of using the arrow keys it's going to ask me which platforms do I want to support in my case I'll just restrict it to Android or iOS so to select or deselect them you can use the space bar and use the arrow keys to move up and down so I'll keep Android and iOS checked I'll uncheck Mac OS and the web and then to proceed press enter once this is done it's going to basically go ahead do all of the setup process foru this includes the tedious process of getting the info. pist files configuring them properly setting up the Firebase options files and everything like that and at the end you will have a project that is completely configured properly set up so that all you have to do is drop in the dependencies for Firebase for whatever plugins you want to use and then you are on your way so now that this is done at the end it's going to ask you a bunch of options just reply yes to all of them um and then it's going to give you an output saying that now the Firebase configuration file was generated successfully here it is it contains all of the information that you need and we'll fix there in just a bit so with this I'll clear the terminal and now I have the actual app configured properly the last thing that we need to do is include the dependencies for Firebase that we want to use within our project so regardless of whatever actual products you use from the services that Firebase offers there's always one plugin that you need to include if you're using Firebase and that is the Firebase core package as a side note links to all of the resources that I use in this video are down in the description below so feel free to take a look at them if you're confused at any point so I'm going to come to my pbsp back. yaml I'm going to come to the dependency section and then I'm going to add the Firebase core dependency here like so and besides this I want to add Firebase analytics as well so I'll basically copy the depend for Firebase analytics and paste it under Firebase core as well and then I'll do command save with this done I'll let flutter PP get do its magic and install the actual dependencies and you're going to notice that now the error that we were getting for Firebase options is fixed and it's no longer giving us that error so now that the actual dependencies have been installed what I can do is actually give my application a test run before I do anything else and make sure that it builds properly welcome back everybody so now that the application is actually running on the simulator properly I know that the actual dependencies were installed properly and they're not causing any kind of conflicts so the last thing we need to do is before we actually start running our application is to initialize Firebase so that our application has access to it so to do that what I'll do is that within my main function I'll mark it as asynchronous and then after this I'm going to go ahead and import two packages which is the Firebase core and then the Firebase options file and then after this what I'm going to be doing is basically in my main function before I called run app to Firebase do initialize app and then here I'm going to give it a options parameter to be the Firebase options file so just do default Firebase options and then I'm going to do do current platform um and then add a semicolon at the end to command save and I'm also going to mark this as an evade call so that we wait for the app to initialize before we actually run the app then I'm going to restart my application and if you get an error which says flutter error where bindings have not been initialized well an easy way to fix this is just to stop running your application and then do flutter bindings or widget flutter bindings do ensure initialized like so and then if you do this then it should pretty much fix the error for you so do command save and start running your application again and hopefully this time we shouldn't get the actual bindings error welcome back everybody so now you can see that we were able to successfully initialize our application and then initialize Firebase and then run it so everything's working as intended so the last thing that I'm going to be doing is at the very top of my actual application I'm going to go ahead and import the Firebase analytics package as well and I believe we have nothing else to do besides just importing the package and it does everything by itself so once this is done I'm going to basically stop running my application I'm going to start debugging it again and while this happens I'm going to go to Firebase and I am going to show you guys that what the actual uh flutter fire CLI did so remember that when we actually created our Firebase project we had it as empty and there were no actual platforms that were connected to it but now if I reload the same flyer based project you are going to be seeing that the flutter fire CLI actually created a Android app for us a IOS app for us and in the case that we were actually creating a desktop application or a web-based application that it would have created those apps as well within our Firebase project so with this done we know that everything is working the last thing that I'm going to be doing is making sure that this app works for IOS as well so for that I'll just shut down my Android simulator I'll open up a iOS simulator and then I'll start debugging the application for it welcome back everybody so as you can see the application is cing correctly on iOS as well so that basically means that there is nothing else for us to do besides celebrate and that's pretty much it for the tutorial as well so if you enjoyed the tutorial then please don't forget to leave a like on the video as well as subscribe to my channel so that you get notified every time I upload a new video if you have any question comments or concerns leave them down in the comments below and I'll try my best to answer them for you and as always stay happy stay healthy keep learning keep growing and I'll see you guys in the next video bye-bye

Channel: Hussain Mustafa

Views: 2,814

Keywords: flutter 2 firebase, flutter database tutorial, flutter firebase android setup, flutter firebase beginner tutorial, flutter firebase easy, flutter firebase for beginners, flutter firebase ios and android setup, flutter firebase setup, flutter firebase tutorial for beginners, learn flutter firebase, flutter tutorial - firebase setup 2023, flutter firebase 2023, how to add firebase in flutter app, how to setup firebase in flutter, flutter firebase setup android, flutterfire cli

Id: VCWRxy0G4_Y

Length: 10min 26sec (626 seconds)

Published: Tue Oct 17 2023