How to Connect Firebase with Flutter 2022 | Flutter Firebase Setup Android & iOS Tutorial 2022

hi everyone and welcome to codingjust.com guys in this twitter tutorial i will show you how you can connect your flutter application or your flutter project with firebase so first of all you need to create a new flutter project as you can see here i have already created a new project and then we will create a firebase project so to create a firebase project we will open up our browser and we will search for firebase console firebase console and make sure you are login with your email id okay and just simply click on this firebase console here we will create a new firebase project so click on create a project we will name it flutter firebase series okay and click on continue enable google analytics for this project and continue select the default account and create project okay guys click on continue our project is created and now we will add our android module here android application here and ios application here but let me tell you one thing if you are using mac macbook or mac os so you can add the ios application here but if you are using windows so you cannot add the ios application here because for that we need the xcode and xcode we can only run xcode on our mac os so if you are using windows you can add only android application here so first of all we will do it for android applications or click on this android and here we need to enter a package name so open up your project flatter project and go to android module inside the android module open application app directory and here as you can see here build.gradle open this file and scroll a little bit down and as you can see here this is our application id okay and this is our package name so we will just simply copy it from here you will go back to the browser paste it here and here if you want to add a name to your application so i will just simply name it flutter firebase sorry firebase okay and click on register app okay now we need to download this file this google service file and we need to add it in inside our android module inside the app directory as you can see here in the screenshot so simply click on this download it will download this configuration file and we will find find it in our folders and as you can see here here it is i will simply drag it from here and i will paste it here in this f module okay so i will paste it here like this and as you can see here our google services file is added inside this app directory okay so now we will close this and we will go back to browser click on next and now you need to add this class path in your gradle dot build but not the app level gradle this this will be added in the project level gradle file so here it is we will simply close this app directory from here and you and when you open the android module here so you can find this build.gradle uh project label file so simply paste that class path here okay we will paste it here save it and we will close it now we will open up our browser again and we need to add this plugin so simply copy it and now we will open the app level gradle file so go back to f directory open the build.gradle and here as you can see here we have plugins here so here below this pasted plugin and now we need to add these two dependencies so copy the first one and scroll down and here as you can see here the dependencies paste it here we will also add another one here okay so simply copy it from here add it here i will simply save it so our project our firebase our android application is added in firebase so click on next continue to console and as you can see here our application is added here so this is our android application now we will add the ios application but for ios application we need to run the xcode so if you are using windows so you you cannot run the xcode in windows and if you are using mac so go to your project and right click on this ios module as you can see here below this android and open it in xcode so it will open it in xcode this ios module okay guys as you can see here our xcode is open and this is our ios module just simply click on this runner on the top and we will copy this bundle identifier from here this is also a package name for our ios app so go back to your browser click on this plus icon add app and now select the ios one and here add this bundle id and we will name it flutter firebase ios ios okay and we will click on register app and now here we need to download this google service file for our ios so simply click on download and we will open it in our folders our files or here it is and i will open my xcode and we need to add this file inside this runner okay so as you can see here where the info info.plus file is located so what we will do we will just simply okay i will edit here so this is our file i will just drag it from here and i will drop it here so and make sure uh to check this box copy items if needed okay so it is already checked if in your version is it is not checked so please make sure you are you you check this uh copy items if needed okay so click on finish and now our google server file is added and i will just simply close the xcode okay and what we will do we will just finish this setup click on next and from here just simply click next next and here we don't need to add any dependency so as you can see here our ios application is also added in our firebase so our firebase is connected with our flutter project and now we will check so i will just simply run this for android okay i will run it from here and start debugging and you don't have an extension for debugging we should be fine okay just simply close it okay we will open this main or not okay so we will we can start debugging now okay so our app will be launching okay uh we've got some issues here and this says manifest manager failed uses sdk minimum hdk 1016 okay so if you got this error don't worry we will fix it now just simply open your android module go to app directory on and open will.gradle and scroll a little bit down where you can see the minimum sdk and here it is so we need to change it to 21. flutter says that it it it should be minimum to 19 but we will uh set it to 21 okay and save it and we will run this main.file again go to run start debugging okay guys so as you can see here our air is successfully launched on our android device and if i click on this button so it is working and it means that our android app or our android module is connected to firebase successfully now i will just simply uh close it from here okay and now we will run our application for for ios okay so let me disconnect my android device and here it is here is our ios emulator and we will just simply go to run and we will start debugging and it will run our application on ios module also okay so as you can see here main. on iphone 13 and debug mode okay here it is okay guys so our application is launched successfully on io is true so it means that our firebase connection is successful with our flutter application so that's how we can connect our flutter application with the firebase for both android and ios and if you like this video please share this video with your friends and if you are new to my channel so make sure you are subscribed to my channel and turn on the build notification option so you won't miss the upcoming videos

Channel: CodingZest

Views: 31,705

Keywords: CodingZest, how to connect firebase with flutter, connect firebase to flutter, firebase with flutter, flutter firebase setup ios, flutter firebase setup android, flutter firebase setup 2022, how to setup firebase in flutter, how to setup firebase in, connecting firebase to flutter app, how to connect firebase to flutter project, firebase with flutter tutorial, flutter firebase setup, connect firebase with flutter, connect flutter with firebase, connect flutter to firebase

Id: ok6se5sOthw

Length: 9min 54sec (594 seconds)

Published: Tue Jul 05 2022