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

The Firebase CLI can be used to set up for the web! (Updated video soon)

Timestamps:
00:00 Introduction
00:09 Create a new Firebase Project
00:51 Create a new Flutter Project
01:14 Adding Firebase to Flutter Web
01:26 Adding dependencies (firebase_core)
03:57 Add Firebase to Web App
06:05 Final steps and execution
06:39 Use latest version of firebasejs in script
06:55 Successful Execution
07:11 Conclusion

The video also resolves the error in the initialization of Firebase in Flutter.

Also, join in on the Discord community to ask any questions or queries.

----------------------------------------------------------------------------
Hey!
I am Aditya Thakur, a Developer and Designer. I make videos on Flutter, Python, and other technologies. I also sometimes take up Profile Building and entrepreneurship!

📚 PROMOS
Get an exclusive 10% discount on every GeeksforGeeks course!!
Use code: ADITYAT

💰 INVESTMENT APPS

⚙️ My Gear

Want to talk business? Or ask a question?
----------------------------------------------------------------------------

Become a part of my community! (400+ Developers already 🥰)

[basheeral-momani]

what happened here at 4:59 I pasted and got errors

[trickswithandro]

ChromeProxyService: Failed to evaluate expression 'ui.webOnlyWarmupEngine': ERROR

[marouanebouzyt]

thank you so much, i dont have a PC powerful enough to run android emulator so I just use the chrome trick to see how it would look
as soon as i implemented firebases chrome wouldn't run the app but thank to u i can go on with my coding journey thanks again

[adamcolejones]

Thank you so much, I was getting a really weird error where my previous code would connect to android and ios but not web. I had to rebuild my connection from the ground up because I couldn't find any information on the error.

I'm new to programming in flutter, thank you for the clear explanation

[physicsmadness]

I dont get it....what does const keyword has anything to do with firebase connection? Why will firebase prevent connection with this keyword?

[sohankumar]

can you help me solve it ? it runs well on android .. but it is extremely slow and hangs my comp

[yashkhade]

Firebase to Flutter web is same for flutter windows desktop????

[oussamaalouache]

hello i got the errer (The error handler of Future.catchError must return a value of the future's type) pls can you help me

[Rodrigo-wfub]

Thank you so much, do you have an idea how to add crashlytics?

[reybars]

where can i get the script src links??

[umairsaqibbhutta]

Getting error as : Error: Mismatched anonymous define() module: function() {
return {
Howler: Howler,
Howl: Howl
};
}

[sauravgupta]

Hey bro, I'm using other firebase SDK too, like Auth, Firestore etc. where can I find import scripts for these?

[quecosache]

Great info Thanks! I got a question, this firebase config data is exposed when using the app. So if I do view source code I can see everything, is there not a security risk here?

[robertom]

Can you make a video about add App Check to flutter firebase project? Thank you Sir.

[owenjones]

Fantastic! Would you be happy to also demo adding Firebase web to the new template that you get when you run 'flutter create -t skeleton name.' This version of the starter app is a bit differently constructed.