Connect Flutter Web to Firebase - Flutter Web Development Tutorial with Flutter Null Safety 2022

hello guys welcome back so now let's just connect our footpanda admin web portal to the firebase so for that purpose that is how we can connect our flutter web application with the firebase so for that purpose we have to simply go back to our firebase footpanda clone app and you will see this gear icon click on it and click on project settings here if you scroll you will see this add app button just click on it and then you will see this web icon okay click on this web icon here in the app nickname you have to just write that is this is our web portal or you can say web portal food panda clone okay and then simply click on register app then scroll here and click on continue to console okay so our web portal food conduction has been created you have to simply click on it click on it and then in here click on this cdn okay and from here what we need is we need to simply copy from the syrian this whole script okay so just copy this whole script and come back to the project inside the project we have inside the web we have index.html and then here at the bottom above the ending body tag here okay you can simply paste it okay this one as you can see here i hope you can see it first of all remove these comments okay this comment as well as these two comments now we have to add sdks for firebase products okay that we want to use for example we will use the auth firebase auth and firebase firestore uh for our this project okay so for that purpose you need to simply copy this okay which is firebasef.js just copy this line of code and then paste it two times okay and just change this app with auth okay and the second one that we will use is basically the firestore okay so firestore and auth and then we have our firebase configuration okay app id and the using the storage and all the information project id and then we have to simply initialize which is here okay initialize firebase so initialize app firebase config so yeah that's it i mean this is how we do the firebase settings in our flutter web application okay please follow the exact same steps now we have to simply go to the main. and here we have to say future void we have to basically initialize our firebase so that we can see if it is working or not so as you know that we are using the auth and firestore so we have to basically add the auth and firestore dependencies in our pubspec dot hml file for using the oauth and firestore so for that purpose you have to simply go to the pub.dev site and simply search for firebase auth first firebase auth and click on installing and from here just copy the firebase auth and then here in our project below the kubertino icons we can simply paste it okay then the next one we have is basically the firebase firestore which is by the name cloud file store okay cloud firestore this first one cloud for firestore with null safety click installing copy this and then simply paste it here then finally the last one which we must use in order to initialize firebase and our web project is basically the firebase core okay firebase core with null safety click on installing and you have to simply copy this dependency and then inside our project above the firebase auth you can simply paste it here click pub get so it has been added successfully now let's go to the main. if you see this as a suggestion then simply click on get dependencies so it has been added successfully now we can simply say i mean we can initialize the firebase so we can simply say firebase dot rms dot initialize app and this basically belongs to the firebase core okay which is imported automatically here at the top as you can see so yes this is all about how we connect our flutter web application with the firebase now in the next video we will implement the login we will allow the admin to sign in using the firebase authentication

Channel: Muhammad Ali's Coding Cafe

Views: 8,863

Keywords: firebase hosting website, flutter web firebase hosting, flutter widgets, flutter firebase realtime database, flutter firebase crud, firestore flutter, firebase web login, firebase web push notification, firebase web authentication, flutter web, flutter web development, flutter web app, flutter webview, flutter website, flutter web firebase, flutter web tutorial, flutter web app tutorial, flutter website tutorial, web development full course, web, app, web app, web flutter app

Id: _PZIukxR4bw

Length: 6min 17sec (377 seconds)

Published: Wed Mar 02 2022