🚀🔥 Setting up Firebase for Flutter 2024 & Run Your App on Real Device | Android, iOS, Web

hello guys it is Shivam here Welcome to our new video where we are going to explore the process of setting a Firebase for your flutter app in 2024 whether you are developing for Android iOS or even the web we have got you covered but that's not all we are not stopping at just setup we also walk you through the steps to run the flutter app on the real devices Yes you heard it right Android iOS and web by the end of this tutorial you will have your flutter app running smoothly on the platform your users love so do not forget to hit that like And subscribe button so that you won't miss out on any of the upcoming videos we upload on this channel now let's get started so now let's move to the Firebase and first we'll create a project in the Firebase then we will connect the Android I iOS and web app with the Firebase so let's move to the Firebase and we need to give a project name here so I'm writing practice app now I will click to the continue button now continue again now we need to you select a default account for Firebase now click in the create project again so as you can see Firebase is creating a project so wait for a few seconds so our project is ready now let's move to the fire base and here you can see that there is a three option to connect the Android iOS and web app with the Firebase so first we are going to connect with the Android app then with the iOS and at the last with the web so we need a Android package name here so let's move to the vs code and we need to go to the Android app build. gridle file and here you can see the application ID now copy the application ID from here and paste it inside the Android package name now click in the register app so it will take just a few seconds now download the Google services. Json file from here and we need to paste it in the vs code basically in the Android app folder so one more thing I want to tell you that make sure that it should be Google service. Json if anything is written rather than this then make sure you edit them now paste it in the app folder now click in the next now copy the plugin from here and we need to go to the Android build. gridle and we need to paste it in the class path now we'll paste it in the class path here now I will make some changes in the code that I have just pasted in the class path now make sure that the line I'm writing in the class path it should be exact do not miss any colon or Dot from here otherwise it will frequently throws the error when you will run the app in your real device now copy the ID from here and we need to go to the Android app build. GLE file and we'll paste it in the apply plugin section now we'll paste it here and we'll remove a inverted commas and bracket and we'll copy the dependency from here and we'll paste it inside the dependencies section now I will copy the second implementation and we'll paste it inside the dependencies so it is done now click on next continue to the console so as you can see that we have successfully added the Android app with the Firebase as you already know that I have already made a chat app food delivery app Todo app news app Etc in my channel so if you haven't followed that series then I will paste the link in the comment box so you can follow that series and can learn lots of thing regarding the flutter and Firebase though in that series I already show you how to connect the flutter and fire base for Android and iOS so in this video we are not just going to connect the Android app with the Firebase because I usually do this in my all of the video series but as I've told you before the special thing in this video will be that I will show you how to run the app in your real real device so this may help you to show your app in your real Android device and can use the app in your way but before running the app to the real device and we need to change some of the code in our vs code so let's move and we need to change a minimum SDK version to 19 so I will write 19 here so I have a small hint for you basically in the application ID you can see that com. example. practice app and this application ID we have used to connect the Android app with the Firebase so if you are uploading the app to the Google Play store then make sure you didn't use a com do example here rather than you can use your company name or your website name like com do company name so I'm writing Shivam for an example so you can use this type of application ID whenever you want to upload the app to the Google Play store though I'm not going to upload this app to the Google Play store so I have kept this package as it is in the Firebase now let's move to the main do. file and here we need to add a few lines so that we can initialize the Firebase with our app so let's move to the Pu Dev and we need to copy a Firebase core package from here so that we can enable the Firebase for our flutter app so we'll copy this package from here and we'll paste it inside the ppec ml file now run this package in the ppml file now in the main. do file we'll write a sync which is flutter binding do incr initialized now await Firebase do initialize app do not forget to paste this line in the void main otherwise it will frequently throws the error whenever you will run the app in your emulator or real device so we have done our complete setup to run the app in our real device so to run the app in your real device first we need a USB cable here so connect your USB with a PC and with your phone device now after connecting the PC with a USB cable you need to open a phone settings though I'm using a redmi phone here so if you are using using any other smartphone so it may show a different setting section but the process will be remain see so let's move to the about phone section now I will click a multiple times in mi version now as you can see that after clicking the multiple times it is telling us to click two more times to become a developer so it is done now you can see that we have got a toast message that you are now a developer so this is a fastest way to become a developer now let's move to the search bar and I will search a developer option here because we need to enable a USB debugging option here so let's move and we need to enable USB debugging here now click on okay so it is done and we have got a message that our USB debugging is on now as you can see that after enabling the USB debugging it frequently shows our phone device name here and we can run our app so let's move to the terminal and we'll call a flutter run command so that we can run the app now wait for a few seconds we have got a message that install via USB so we'll click on install here and our app has launched successfully so here I've shown you how to run the real app in your Android device so by this way you can run as many apps in your real device by just using the USB cable so today if you have learned how to run the app in your real device then do not forget to hit that like button down down below now let's move to the IOS app here and we'll connect the IOS app with the Firebase now I will click to the add app option and here we need to click to the iOS and we need a apple bundle ID so let's move to the X code and we need to copy the bundle ID from there and paste it in the Firebase so we just need to open the X code now move to the runner then signing and capabilities now copy the bundle identifier from here and we'll paste it inside the bundle ID now click in the register app now download the Google service Das info. pist file from here and we need to paste it in the X code and again I want to tell you that it should be exactly Google service- info. pist file if anything is return rather than this then and make sure you edit them now paste it below the info and click on finish now click on next again on next next now continue to the console so as you can see we have successfully added the Android and iOS app here now I will show you how to run the app in your iPhone emulator now many of the viewers might thinking that how to run the IOS app in the real iPhone device so to run the app in your real iPhone device then you need to use a text flight here basically first you need to buy a apple developer ID and through the Apple connect you can test the app by using the text flight but for now I'm just installing the app in our iPhone emulator but if you want to know more about the text flight then let me know in the comment box before running the app to the emulator let's move to to the port file and we need to rename the iOS version here so I will change from 11 213 now I will run flutter run command in our terminal now wait for a few seconds so as you can see that our app has launched successfully and we can use the app in our iPhone emulator so by this way you can run as many app you want in your iPhone emulator now let's move to the web app so here you can see the web app option now we need to provide a app nickname so I will write practice web app now click in the register app now we need to copy this some of the API key project ID message sender ID in our main. do file so that we can easily access a Firebase for our web app so let's move to the main. file and I will write if K is web it means that if our app is web app then we'll call the API from the Firebase so we'll write Firebase do in app and in the options I will pass a Firebase options and we'll copy the API key from the Firebase and paste it inside the main do. file and we'll do same for the app ID message sender ID and project [Music] ID [Music] so it is done now click to the continue to the console now here you can see that we have successfully connected our three apps with the five Bas so first one is Android second one is IOS and third one is web now let's move and run the app in our web app so we'll run the app in our Chrome web browser browser so we'll select a Chrome web browser from here and we'll run a flutter run command so our app has launched successfully and here you can see the web app and we have successfully load the app in our web browser I hope you found the today's tutorial on the Firebase for flutter in 2024 helpful and inspiring for your projects before you go I want to share something interesting with you so as you can see on the screen this is not just a channel it's a community of passionate developers and we want you to be part of our journey introducing the code crafter clubs and exciting exclusive membership program where you can take your support for this channel to the next level where so by becoming a Cod crafter you can unlock a some loyalty batches for this Channel and a priority reply to the comments in the comment box or you can also directly DM me on my Instagram ID so that by a code Crafters member you can get a quick reply and can solve a problem regarding the flutter app we have kept the membership fee at the nominal amount because we believe that each and every one of you can become a part of this allite Club your support means the world to us it helps us to create more inep tutorials and explore The Cutting Edge Technologies and build a stronger community so if you ever found value in our content and want to see this channel to reach a new heights considered becoming a code crafter today until then keep coding keep having fun I will see you next time thanks for watching

Channel: Shivam Gupta

Views: 2,789

Keywords: flutter firebase setup, flutter, flutter firebase setup 2023, flutter firebase, flutter firebase android setup, firebase, flutter firebase setup android, firebase flutter, how to setup firebase in flutter, flutter firebase tutorial, flutter firebase ios and android setup, flutter firebase for beginners, flutter firebase auth, flutter firebase crud, firebase setup in flutter, flutter firebase 2023, flutter 2 firebase, flutter firebase tutorial for beginners

Id: HNvRg-S8ejA

Length: 16min 27sec (987 seconds)

Published: Tue Jan 16 2024