Flutter - The Correct Way to Add Firebase to Flutter (Android & iOS) | Firebase Tutorial

welcome back to the channel the growing developer ad in this video we're gonna learn about fire pace this topic has been most requested from you and here I am with the series everything will be from scratch and you know what I haven't even created a flutter project for this so in this video we are going to learn how we can add firebase to our flutter project both for Android and both for iOS if you're not even running on flutter you only want to check how you can integrate firebase in your Android app or your iOS app then this video is for you as well because this configuration is irrespective of any platform like any sdk like flutter or react so let's start this video [Music] so here we are we will be creating a new flutter project so there you go flutter application click next and the project name right now I'll be using firebase demo for this click Next make sure that you are using Android studio I prefer using Android studio because you have the option to select cotton support and support for iOS code and as well as click on use Android X artifacts so this is the package name the complete domain the growing developer at orz and then the five wisdom is just copy this package name so I will be copying this package name from here and click on finish I just fast forward this so as you can see that the project is created and the default Explorer is open this is our main dot dot file the skeleton code is written here so we're not gonna run this application right now let me show you the military as well so we're not gonna run this application right now so let me just increase the font size I hope it is clear to you well this part is not what we are concerned about in this video we'll be only concerned about the file structure and where we are gonna store some files so let's quickly go to the firebase console and see how we can add the project create a new flag create a new file based project and add firebase in it so I have already opened Google Chrome window so here it is so in this vid window go to firebase google.com click enter and you can see that this is the firebase website make sure that you are signed in to the Google account that you want so here it is I am signed in with this email id so let's get started and now you can see that the 5 will console has initialized and then you have the option to create a flat ripples up then you have the option to create a project click on create project and then you can enter your project name so I'll write firebase YT tgd right firebase YouTube they're going developer so it's totally your wish how you wanna totally your wish I wanna select the project name so click on continue and make sure that you are enable Google Analytics why because we will be using anything like firebase messaging and for all that stuff you need the Google Analytics so click on continue and now you'll get a screen which is asking for you to select an account so you'll be only having this default account for firebase I have also created another account so you click on default account for firebase click on it and click on create project it'll take some minutes and after that the your project will be created so as you can see that the project is now created will you can continue and we have opened the firebase project its closest now you have the option to set up an Android Android app an iOS app or of the web out with Android and then we'll move on to iOS so click on Android it is asking for your the package name so what was our package name I've already copied that package name in the first step so this is the package name ok now you want to know what is the package name or you want to know where is the package name so I'll tell you now go to your this is your project structure go to your Android folder now go to your app folder and inside this app you have a built out Gradle file open this and now you can see that here is that application ID this is the package name that we are concerned with now that's it click on register app after this step your application is registered with the firebase that is now firebase will use this package name to communicate with your application now it is saying that download config file so let's click on download and you can that the file is now downloaded let's click on this showing finder and you can see that this is the file I already had one more Google services file so let's copy this and I'll tell you where to paste it so you have this Android folder open this Android folder then you have this app folder open this app food rest well you have to paste this file right inside this app folder so you see how I'm dragging it you can either drag and drop I prefer dragging and dropping because you get more options with that so you will just click on this and drop it at this app folder right click on OK and you can see that we have the Google services dot JSON file now I have this one written here so I have to rename it make sure that the name of the file is just Google services or JSON that's it so it is inside Android and then app folder nothing more now let's move on to our clone window and see what it expects us to do next so click on next now this these are the steps to add the firebase SDK the actual code which will communicate with the servers at the backend so let's see project level build.gradle what does this project level means now this is your project if you click on android everything inside this is project level so this bill Todd Crandell file is a project level Gradle file and if you click on app you have the another build or title file so this Gradle file is our app level Gradle file so let's open this project level Gradle file and let's see what it does and now let's see what we have to add so it is saying embed script add repositories as Google and then add dependencies we add this will copy this stuff from here because this Google is automatically added and here also this google is automatically added by flutter so we had only concerned by this class path here so you see in this repository section Google is already there and in all project section as well Google is already there inside this dependency section after they just pasted so this is the class path so I've copied this class but from here and pasted it inside this the next thing is app level builder gradual file which is inside our app module so this is our app module and inside this app module this is a Gradle file so this is an app level file now let's see what we had to add first of all we have to add this line apply a plug-in not this line this is already added so we'll just copy this file and you can see that we have this apply plug-in so after this just paste it here you can either paste it in at the end or after this apply plug-in lines so after this we have dependencies and inside the dependency section we have to add this line just copy this now this is the SDK for your Google Analytics that we just enabled so we'll just copy this here and the dependency section scroll down you have this dependency section after this just paste let's see what all we have done we have already done we have added all the configuration lines that we needed that said nothing else need to be done so if you click on next noticing checking if the app has communicated with all servers you may need to uninstall Adderley install your application leave it here go to your flutter project and just run it along this I'll not be skipping this part I'll just fast forward it so that you can see that it is what it is so that the app is installed and it is now opening we'll quickly go to this and see if it has communicated with those servers or not let's see just wait for some time and the app is still loading let it load so the app is loaded and if we check here let's wait for some time it will take some time to confirm that we have connected with the firebase services or not so congratulations you have successfully added firebase to your application right so that's it we have all we have added firebase and now we are idroid application is able to communicate with firebase servers continue to console and that's it our Android setup is complete so now let's move on to our iOS application setup so we will click on add app click on iOS and will ask for iOS bundle ID the bundle ID is exactly same as what was for Android because we are using flatter so the same bundle ID is being served for both Android as well as iOS so to be org but the growing developer dot firebase demo that's it click on register application and it will take some time and after that we have the download config file you cannot so it will download the plist file and in Android we have dot JSON file and in iOS we have dot plist file so let's click on it and see where it is so so you can see that I have this plist file here so there is a different procedure for this click on Xcode and here you go open another project this is our firebase timer project open your iOS and click on this just click on Cooper now you can see that this project is now opened you can see that this is our bundle identifier so this is our P list file this is our project structure for those who are using or so for those who are already using iOS so they might be familiar with the structure so this is the project Explorer that we will get and we'll just drag this P list file and paste it inside this inside this runner folder below this info dot P list file click it and click on this runner and click finish see that's why I used Xcode because it is now adding all to the target if you will copy this just simply so it will not you know work so click on finish and you can see that this Google service info dot P list file has been added just below this infrared Phyllis file if you don't know where to paste it just look for infrared realist file and that's it that's the exact folder where you want to paste it and I guess that's just close this close this as well we'll now we'll just stop this application here and let's see what else we need to do so let's open the Google Chrome and click on next now it is saying to add firebase SDK use cocoapods to install and manage dependencies so what you need to do is you have to init a pod file and then inside that you have to paste it so how to do this let's see open up your terminal say this is my firebase demo project you can see that this is firebase demo we'll go to iOS folder CD iOS alright we went to the iOS folder and after that we'll try it pod in it just click enter and cocoa pods in now initialized in your flutter project things are just warning you can ignore that next thing you have to add this to our pod file now let's see where is it so we'll go to i OS folder this is our else folder this is our part file you can see that if you open this port file you have all this thing now we'll just copy all this stuff and add that here that you have added the firebase analytics pod so now next thing we need to do is just close this file and write quad and stop it will install the firebase analytics SDK click on next and now you can see that it will start analyzing dependencies and all the firebase dependencies are being installed in your clutter project these are some warnings and now that's are done you have added firebase to your and iOS application right so next thing next add initialization code so you have to import this firebase and then you have to add this way to do this let's see you have this runner inside this runner you have this app delegated shift open this and you can see that all the import statements and other statements are there it is import firebase and just after this paste it that's it we have imported firebase a next thing is to add this line firebase app configure it we'll just copy this and before this return statement before this return statement we just write this firebase app dot configure no need of semicolons so because this is swift so you can just check with this like it is with dot Swift extension so we are using the swift code if it is with dot G extension then you'll be using this Objective C so that's it we'll close this application and now we'll run it for our iPhone 11 Promax you can see that I have opened the simulator here and let's click on run and see if it works or not meanwhile let's click on next and now it is checking if the application has communicated without servers or not so let's see this so I'm not going to skip this step you can see what it is so let's see and how many seconds EdTech I will be just fast-forwarding this so as you can see the now the application has started on our iPhone and now let's see if it is able to communicate with the servers or not so yes it will take some time for sure our fault and my computer had to restart for some reason I have sent the report to the Apple Store so till then like I couldn't complete the setup due to this so I can show you one more thing like open up your Xcode and here it does click on your firebase demo project and let's run it from here sometimes the firebase servers does not detect that we have connected with them so for that I'll just show you that we have actually connected with the firebase services so let's wait for it to be completely installed so this was the previous application that I installed so it is now installing a new one so let's wait for it and we'll succeeded launching runner so now the application is now starting and just look at this console here just look at the output that you're gonna get here so let's see and now you are getting some kind of striker extract race so you can see that firebase analytics and again firebase screen reporting enabled and then firebase analytics so yes we are sending some data to the firebase analytics to analyze our application so that means that we are able to connect through sir firebase and one more thing if the firebase configuration was not properly done then I then the app itself would not have been installed on our device so yes so you can see that we have this decay name as a measurement firebase analytics so yes we have successfully installed fire based on our iOS device as well but this is still telling you that if the app has communicated with our servers or not so you can just skip this step this is not at all three so here also you can see that it is still asking for continued SDK setup so no worrys we are able to communicate through the firebase and in the next video we'll learn how we can sign in through firebase and what are all the steps that are needed to sign in without any errors so that's all for today hope you like this video hope you learned something from this video and this will be long series where I'll cover each and every aspect of firebase the real time database the cloud firestore cloud messaging the notification services as well as the Google sign-in and authentication so that's all hope you like this video hope you learned something from this video keep watching subscribe to the channel if you haven't done already that's all for today goodbye have a nice day

Channel: The Growing Developer

Views: 40,205

Keywords: flutter, firebase, firebase tutorial, add firebase to flutter, add firebase to android, add firebase to ios, firebase tutorial for beginners, flutter firebase, flutter firebase tutorial, add firebase flutter, flutter tutorial for beginners, the growing developer, firebase configuration, firebase for android flutter, flutter tutorial, google flutter, flutter ui, growing developer, flutter for firebase

Id: LKLLcrisa6M

Length: 19min 34sec (1174 seconds)

Published: Mon Jun 08 2020