How to add Firebase to Flutter web? | Complete steps without error (2021)

hi i am and welcome back to my youtube channel in this video i will show you how to initialize firebase for your flutter web app so what we'll do is we'll go over to firebase.google.com and go over to console here i'll get started by creating a new firebase project and call this firebase demo click on continue and you can choose to add google analytics for your project totally optional and we let it create so after you're done creating uh your firebase project let us also create a new flutter project so i'll create a new flutter project if you will run this uh project right now on a web emulator you will get the default flutter app which is the counter app so this is the demo app that is running on our emulator now let us try adding firebase to it so what we'll need is the firebase plugin so i'll go over to pub.dev and get the firebase core plugin click on firebase code copy the latest package name go back to our pubspec.yaml and add it under in the dependencies under cupertino icons so i'll do a quick pop get so after getting the required files what i need to do is i'll go over to main inside your main.dart you need to make a few changes first of all you need to import the firebase code.dart then inside your main function you need to add widget flutter binding dot insure initialized so after you're done with this uh you need to create a future called initialization which would initialize our flutter app you'll add a line called final future firebase app initialization which would basically be firebase dot initialize app and get rid of this const keyword and the one up here as well so we'll come down to our home widget and here uh wrap this my home page with the future builder so after you do this a future builder takes in a future builder takes in a future as well as a builder in our case the future would be the initialization that we have specified and the builder and the builder would take in the context and the snapshot now if we get some error if the snapshot has error it should print out error if we are successfully able to connect then it would uh normally proceed for forward and just return the home page widget otherwise it will return a progress indicator while it loads so that is it that is the part where you do the initialization of the firebase next we might also have to remove the const keyword from the test so now we need to add our web app so we'll go over to web and type in a name flutter web right and if you also want to set up hosting so you can click it here you can choose a hosting site or like if you want a specific uh url as in dot web dot app so you can type in a url of your choice like flutter web demo app and you'll get that url for your hosting i already had made one which is flutter website demo and i can just register app you can make a url of your choice and then what we need to do is we need to add sdk so you can either do it using npm or you can use the script tag now you need to add this script to your web index.html go here go down to where the script tag is closing and between the body here you need to paste this hole or what you can do instead since some have been getting error you can paste a script source which is the firebase app.js and then if you want to use you know analytics or firestore so you can paste the script for that as well then what you need to do is create a new script tag and inside type in firebase dot initialize app and pass in the firebase config if you're using analytics to so write about that as well now you need to add this firebase config which you can basically go over to your project and copy this constant fire base config from here and replace the one that you have here so it will give you the api key the author domain and all the other stuff that you will need in your project and after you're done with it you can go over to next you can install firebase cli using this copy this and paste it in your terminal but i have it already installed and then here are some steps of how you can host a website i'll also show you how to host it so after done with this after you had added the required tags you can find it in the description come back to our main and again run it and if some error shows up if nothing no error shows up then it is working fine otherwise we'll have to debug it so it is asking you to change it to the latest 8.6.1 so now if you run your app it should load up fine without any error and there you have it and so we have successfully initialized uh firebase for a flutter web app and that is it for this video thank you so much for watching if this video helped you consider subscribing the channel i am adri dhakur and i also have a community of 400 plus developers that you can join in using the link in description so it is on discord where you can interact with the few mentors we have mentors for web development app development native as a last cross platform and blockchain etc so you can join in the community ask your queries questions there we also post regular internship opportunities that you can check out on the server itself so thank you so much for watching [Music] [Music] you

Channel: Aditya Thakur

Views: 35,064

Keywords: flutter, firebase, flutter web, flutterdev, web app, add firebase, web initilization, firebase core, firebasejs, aditya thakur

Id: l0cFOUJJcGQ

Length: 8min 11sec (491 seconds)

Published: Wed Sep 08 2021