Flutter Tutorial - Firebase Setup | iOS, Android & Web

hi tech family welcome to another video from etec viral and in this video we're gonna do is to set up the firebase for our flutter app and we're gonna set up the firebase for our android ios and also for the web so we are on our android studio and we have this simple demi counter application and nothing have to do it in here just move to your browser and that's our console of firebase just press this add project and you'll see the enter your project name so we will specify the name of our project firebase project and then press continue as this is just a tutorial so i will disable this google analytics for the project and we will also talk about these google analytics of the far best in the upcoming videos so next press this create project and it will take some time and it's done you simply have to press this continue and we got our firebase project and firebase provide us many things like the authentication for our applications and it also provides files to database extension real-time database and storage for our storing the images and many other things in our firebase storage and hosting functions and machine learning and we'll also talk about all these things in our upcoming videos but first we are gonna set up our firebase for for the flutter app you will see the icon ios here first we will set up the ios for our flutter app so you simply have to press this icon and here it requires the apple bundle id so from here you can get this apple bundle id you simply have to move to your android studio and then you'll see the folder or the directory here ios and inside this runner dot x code project open it and here you will see the project pbx project open it again and press ctrl f to find out the bundle identifier and type bundle you will see the product bundle identifier here and copy that and just move to your browser again and paste it right here and the app nickname is optional so if you want to pass you can and if you don't want so you can leave it empty i don't want to pass it so i will just press this register and there is also app store id optional you can also pass it if you want so next press register app and after that that screen will be appear in front of you you simply have to download this google service info.plist and after the downloading you simply have to move to your folder and just cut it from here and move to your android studio and paste it inside this runner and we got our google service info plus inside our ios app and it contains all the details to work with our firebase for the ios and that was the setup for our ios it's not completed so let's move to browser again and press next and you simply have to ignore all these things next and next and continue to console and we got our app for ios to check it out it's correctly working so you again have to move to your android studio and close this ios file or folder and then move to your main dot dot and just simply run your main dot dot and yes we got our app and it runs correctly it means we have successfully set up the ios and there is no found issues to crash our applications and it works fine so it means we have set up successfully and now next we have to set up the firebase for our android so simply move to your browser again and press this adapt and now we are going for the android and here it needs the android package name and so to get that android package name we have to move to again our android studio and here you will see the android directory open it again and from the app and build gradle scroll a little bit and you will find the com dot example the application id com example filter firebase setup just copy this and and again the app nickname is optional and the debug sign in certificate is also optional so we have just register the app and now we have to download again this googleservices.json file i will simply copy it from here and move to my android studio inside this app i will paste it right here and like the previous it contains all the details of our firebase project the name of our project package and project id project number client id client type and all these things to work with our firebase so it was the file and now we have to do some other configuration for the android app so now we have to press next and here you will see the project level build gradle so for the project level build gradle we have to do this configuration class path google services gms so i will copy that and go let's see our app level build gradle and there you will see the another build gradle that's our project level so inside this i will simply pass this the class path which i have copied from the browser so that's it and again go here and we also need this apply plugin for now this will be app level build gradle so again i will copy that and go to android studio now there is no work for us to in the project level build gradle now we have to go to build cradle and here you will see the apply plugins already and you simply have to paste it here and you also have to change the mini sdk version to 21 so to avoid some stack errors or the exceptions and we are all set for the android and just simply close this directory and just stop this main.dart and again run it so if there were some issues so it will throw exceptions if they are not so we will see again our counter application so run it and wait for it and we got our app running it's correctly fine and working and now we will initialize our app in in the main.dart so for that we need a package that's the firebase core and i will copy that and move to my android studio in the spec.gml right after this flutter sdk i will paste it and simply pub gate and after that you have to move to the main. and inside this main we will do first widgetsflutterbinding.ensure initialize and and we also have to make it future because we are initializing the firebase and it will be async and here it will be avait firebase dot initialize app just like this and simply import that firebase call library we have added here and again i think we have to close our main and again run it so stop the main.dart and run it again and after initializing that we again got our app it's working fine like previous and the next remaining thing is to set up the firebase for the web so for that we again have to move to our browser firebase console and next is continue to console and we also got our android app and at the app this time it will be the web and it's required the app nickname so it's not optional for now so we have to firebase flutter and register the app and there are some configurations for the firebase web so i will copy these things from here this is the firebase config and move to our android studio and just for web here we will check the condition if if is web so we will do firebase dot initialize app that will be a weight just because that asynchronous and inside this there is options firebase options and you can see here it requires all the things i have copied so i will have to first paste it here and also delete these mess things things from here and in the else condition we will do this so just like this we also can set up the firebase for our web application and the next thing in the browser we have to continue to console and we also got our web application so the next thing i have to run the app on the web browser so for that i will run a command which is flutter run chrome web renderer html with no sound null safety and press enter so if the web runs fine so it means we also have set up the firebase for our web app and there are no issues found also in the web application and then we got our web running file it's resided and that's our web it's correctly fine and it means there are no issues found in our web application when initializing the firebase for our web application so if you found this video helpful hit a thumb on a like button and leave a comment if something is not clear to you for now goodbye and i will see you in the next video

Channel: eTechViral

Views: 17,593

Keywords: getting started with firebase on flutter, how to get started with firebase on flutter, introduction to firebase on flutter, intro to firebase on flutter, getting started with firebase on flutter tutorial, firebase on flutter, flutterfire, dart, futurebuilder, android, ios, developer, firebase developers, flutter developers, firecasts, firecasts for firebase developers, firebase, flutter, google, google developers, firebase updates, web, etechviral, daily flutter

Id: PbUTQTMBFVI

Length: 11min 35sec (695 seconds)

Published: Fri Apr 15 2022