Connect Firebase with Flutter Web!

foreign welcome back to a new video in this video I'm going to show you how you can connect Firebase with your flutter web right so a sample app is currently running on my Local Host that's a flutter web application and you can see that in the home I I just have a scaffold I don't have the app but so let me just draw an Amber and then we can go on Firebase create a sample project and connect this flutter web project with my Firebase project so you can see that I can see the app bar right now and now let's just go to Firebase let me click on get started and from here we are going to add a new project let's give it flutter web connection right so let's click on continue click on continue select the default account for your Firebase that will be your Google account basically so you can also go on Google Cloud console and check your projects analytics dashboards and everything right so let's wait for it to uh like collect all the resources and all that perfect we are ready click on continue and now we will be inside our Firebase project and over here we need to click on this web icon you can see right so click on this web icon give the name to your web app so let's say the app name is flutter web connection and for now I don't want to also set a Firebase hosting so I'll let it go click on register app so now you can see some code is there in front of us right so first of all just copy this npm install Firebase go to your project and don't focus on this mobile emulator it's not useful right now and open the terminal of your project in the vs code right and paste that npm install Firebase so it will install the Firebase plugin for node.js so our Firebase plugin for node.js is also added in the package.json now I can come over here and copy this complete code that you can see over here right so this we need to paste inside the script tag let me just open my previous project that I connected you can see over here right so this is a script tag and I have imported the initialize app then get Analytics everything so just Define a script tag and inside that I have pasted the complete code that Firebase is giving to me right you can see over here the Firebase is given to me all this code I just need to paste that inside that script tag right so let me just copy this first and come over here and go inside a web folder then index.html and you can Define your script tag over here so you can Define one more script tag so just come over here paste it right so this is all set and now I need to copy this part so everything will remain same constant 5S configuration will change because the API Keys everything is now different right just save it so this is all set now now what I need to do is one more step I need to do go in the main dot dot and over here in the void main function I need to first of all Define widgets widget flutterbinding dot insure initialized and after that I need to Define and one more thing in the pub spec.tml you need to now Define one more dependency that is Firebase core and apart from this if you are integrating authentication then Define Firebase auth then Cloud firestore real-time database or Firebase storage all those dependencies you can Define but this we only need to set up so in the main.dot over here just write first of all make this function as asynchronous and Define a await 5 is dot uh okay sorry Firebase provides okay I did not download the dependency so come over here and just run flat up get so Firebase code is now added and now I can go inside main.dart and write Firebase app Dot Firebase Dot initialize app and inside this you need to Define your Firebase options so options Firebase options and inside that also you need to Define all your parameters let me just save it and you can see API key app ID message sender ID and project ID so just come over here in index.html and try to copy all these things API key then let's just take all this stuff from here go in the main dot dot and just let's just paste it so from here now we don't need API key app ID so app ID is nothing but your uh over here you can see this is my app ID right so let's remove auth domain we don't need this odd domain project ID we need so let's remove project ID from here app ID we have also added message sender ID is over here right so message uh measurement ID we don't need project ID storage bucket we don't need right and let's remove message sender ID from here yes so we have defined all these four parameters as you can see now we are all set let's just stop the app and try to rerun it and let's hope it works perfectly now you can see that my web app is running that means the Firebase connection was successful otherwise it would not have run and you can see that in the debug console we don't have any error that means our Firebase connection is successful right so now you can go in the Firebase continue to console so everything is now set right your web app is or already added so you can just refresh and you will be able to see one web app connected you can see flutter web connection is now added so this was it guys I hope you liked it just for a review you can see that the main stuff that I've done is I've done three steps first of all create a 5S project and then go inside your index.html and paste the script tag right script type module and inside that everything will remain as it is as a Firebase is suggesting you to add right everything is same so this was index.html part in the main dot dot in the void main function you need to Define uh you need to initialize all your widgets and then you need to initialize your app with all those parameters that Firebase is providing you for your project and then you can run your app so this was it this is a so simple uh you know these were so simple steps to connect your Firebase with your flutter web project I hope you liked it and the legend and keep coding keep innovating and thanks

Channel: Akshit Madan

Views: 23,450

Keywords: #developer, #flutter, #appdevelopers, #ios, #android, #google, #apple, #data, #datascience, #collegestudents, #engineering, blockchain, freelancer, college, students, internship, web3, solidity, python

Id: -O1tTejaBZk

Length: 6min 10sec (370 seconds)

Published: Wed Sep 14 2022