Flutter Web App Deploy on Firebase

Learn how to deploy flutter web app using Firebase. Firebase Hosting provides fast and secure web hosting for your web app, static and dynamic content, and microservices. In this tutorial, I will be showing you step by step how to host your flutter web using firebase so that your web app can be accessed through internet by everyone and most importantly it is Free of charge for hosting in firebase.
Subscribe to our channel 👉 shorturl.at/uCET4
#flutter #fluttertutorial #flutterwidgets #fluttercourse #flutterinhindi #mobileappdevelopment #vscode #reactnative
Build a Flutter Todo App in 1 minute using ChatGPT
• Build a Flutter Todo A...
ChatGPT: Here's how to get a job at Google, Meta, Tesla ...
• 5 Tips to get a job at...
ChatGPT generates NFTs ! New Passive Income With ChatGPT !
• How to generate images...
I Lost $XXX after OpenAI's Secret Key LEAKED !!
• I Lost $XXX after Open...
Web Scraping using ChatGPT | Coded by ChatGPT
• How to create a Web Sc...
Flutter ChatGPT using OpenAI's GPT-3 | Flutter Chatbot
• Flutter ChatGPT using ...
How to Manage State Using Flutter GetX | Flutter State Management • GetX State Management ...
How to Manage State Using Flutter Provider | Flutter State Management • Flutter Provider State...
How to Solve Vertical viewport was given unbounded height | Flutter Common Error
• How to Solve Vertical ...
Installation & Configuration | Flutter Firebase Tutorial #1
• Installation & Configu...
Firebase RealTime Database (CRUD) | Flutter Firebase Tutorial #3
• Firebase RealTime Data...
How To Create A Flutter Table Calendar In Just 5 Minutes!
• How To Create A Flutte...
Dropdown in Flutter for creating flexible, reusable user interfaces
• Dropdown in Flutter fo...
Object-oriented Programming in Dart
• OOP Tutorials
Flutter Project Ideas
• Flutter Project Ideas
Flutter Package Tutorials
• Flutter Package Tutorials

[@michaelwambua3372]

This is the best step by step guide for deployment!!!!

[@AIWithFlutter]

Thanks ! Appreciate that 🙏🙏

[@jayasri4821]

The best time-saver video!....

[@AIWithFlutter]

Appreciate that 🙏

[@mohammedaziz8635]

Short, Clear & to the Point tutorial, Keep it Up!

[@AIWithFlutter]

Thanks ! Appreciate that 🙏

[@thisaragunasekara924]

My web site in mern stack with vite had client and server two parts how i host it in firebase

[@ALIButt-xi8tu]

after click on url it shows import the firestore plugin??

[@p_o_634]

Simple and fast. Cudos to you man !

[@AIWithFlutter]

Thanks man 🙏

[@binarysensei]

Thx for saving me time, love you.

[@AIWithFlutter]

Welcome ! Appreciate that 🙏

[@lcd11001]

Hello, where can I find full tutorial instead of only publish to Firebase Hosting step? Thank you

[@VaibhavC-co1bi]

Thank you man your video really helped me i have wasted literally half day for this setup

[@AIWithFlutter]

Glad I could help 🙏

[@developerbs]

very clear and nice. Thank you

[@AIWithFlutter]

Welcome ! Appreciate that 🙏

[@HinduBhaktiii]

Is it possible to deploy the mobile app for the preview

[@mr_sufi...829]

Short , Clear and Simple That's my brother keep it Up

[@AIWithFlutter]

Thanks. Appreciate that 🙏

[@nosjin666]

Amazing tutorial, thank you sir!

[@AIWithFlutter]

You're very welcome! 🙏

[@registrationhelper]

Very much helpful .Thanks

[@AIWithFlutter]

Welcome ! Appreciate that 🙏

[@caualeite3537]

thank you!!!!! well made tutorial!

[@AIWithFlutter]

Welcome ! Appreciate that 🙏

[@abhishekbansal8798]

did your application deployed easily mine didn't it is showing you have successfully deployed but not showing my web app pages

[@angelominoia4627]

Very helpfull, thank you so much!

[@AIWithFlutter]

Welcome ! Appreciate that 🙏

[@rabarhusen9170]

thank you sir, it is pretty useful.

[@AIWithFlutter]

Appreciate that 🙏

[@krishnareddy5228]

I am getting this error
Error: It looks like you haven't created a Realtime Database inst
ance in this project before. Please run firebase init database to
create your default Realtime Database instance.

[@tariiqd]

If you get to "Firebase Hosting Setup Complete" after deploy, try to run the firebase deploy from the build/web directory instead of your project root

[@keshanwishvajith7456]

thank you so much

[@yejiayang]

great work !!! thanks

[@AIWithFlutter]

Appreciate that 🙏

[@GaryCuriano]

Thank you so muchhh. u saved my life 10 times

[@AIWithFlutter]

Welcome. Glad that it helps ! 🙏

[@DilipKumar-qp3mv]

Thanks, Man.

[@AIWithFlutter]

Welcome 🙏

[@tarunnayak9197]

Why I get this error
beginning deploy...
Error: Directory 'build/web' for Hosting does not exist.

[@AIWithFlutter]

Hi, the error means you have not generated web hosting folder in your build directory. Run the following command to generate it .
👉 flutter build web

[@user-pp5vm5kq2m]

Great...❤❤❤❤

[@AIWithFlutter]

Thanks ! Much appreciate 🙏

[@jengjacklim2954]

HI , some of my web images and widgets (like graphs) not showing after I have deployed it. Any idea why ? Thanks !

[@AIWithFlutter]

Hi 👋, this could possible because when you run ‘flutter build web’, it don’t compile your asset images together. My suggestion would be to host your images somewhere on cloud (firebase cloud storage, AWS S3 bucket, ..). Then, display your image as NetworkImage().

[@pauloalves2840]

Because for browser it defaults to canvaskit, but you want to use html:
flutter build web --web-renderer html

[@jengjacklim2954]

@@pauloalves2840 It works. Thanks a lot !

[@pam24]

how you could find main.dart.js and flutter.js? I have no those files in my project

[@Jepixo]

run flutter build web first then those files will be created

[@aadityasagar]

thanks for this tutorial😄 i deployed the web but there is an issue, my assets images are not loading

[@AIWithFlutter]

Hi, thanks for your reply. This happens because you might added your assets images locally and display through relative path. There are 2 possible solutions. Firstly, upload your assets image folder together with the web folder and update the relative path. Secondly, host the images on cloud platform like firebase and display through as network images instead of asset images in your web application. Thanks !

[@peshalele951]

I always find myself back to Firebase Hosting Setup Complete. How do I solve this so i can open my flutter web app?

[@AIWithFlutter]

Do you manage to run “flutter web deploy” command ?

[@suhaibalhayek5369]

thanks bro

[@AIWithFlutter]

Welcome 🙏

[@100yrsdeath]

How can I update my website?

[@AIWithFlutter]

Hi, update your website is the same way as how you deploy the website for the first time.
step 1: run "flutter build web"
step 2: run "firebase init hosting"
step 3: run "firebase deploy"
If you have deployed your website once, you can skip step 2 and go with step 1 and 3 directly.

[@RNBnewsIndia]

How much will it cost for , chat app with 10k users

[@AIWithFlutter]

Hi, it depends on the firebase services that you used on the chat app. For chat app, you are required to use Cloud Firestore to read, write and store chat messages. Firebase has a Spark Plan that allows you to store 1 Gigabyte data , 20K writes/day and 50K reads/day for FREE. While this plan support 50K monthly active user. For more details, you can check out to firebase official pricing page.
firebase.google.com/pricing

[@RNBnewsIndia]

@@AIWithFlutter first of thanks for simple and quick reply ,
20k writes means ,in total
users will be able to send 20k massages daily ?

[@AIWithFlutter]

@@RNBnewsIndia yes, 20k messages can be written into firebase. For example, if you have 10k users, each user can only send 2 messages per day which don't really make sense to me. So I would suggest you to try out firebase Blaze Plan which pay as you use. Blaze Plan will still have all the benefits from Spark Plan such as 20k writes with No-Cost. After 20k writes, Blaze Plan will start charging as you use. For more information on the charging, you can checkout to firebase blaze plan pricing calculator.
firebase.google.com/pricing#blaze-calculator

[@umaluno2023uniaene]

Procurando comentário português