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

[@palashshendre6824]

This is the best tutorial I have ever seen. Short, simple and on point. Thank you!

[@AIWithFlutter]

Thanks ! Appreciate that 🙏

[@michaelwambua3372]

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

[@AIWithFlutter]

Thanks ! Appreciate that 🙏🙏

[@mohammedaziz8635]

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

[@AIWithFlutter]

Thanks ! Appreciate that 🙏

[@jayasri4821]

The best time-saver video!....

[@AIWithFlutter]

Appreciate that 🙏

[@VaibhavC-co1bi]

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

[@AIWithFlutter]

Glad I could help 🙏

[@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

[@mr_sufi...829]

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

[@AIWithFlutter]

Thanks. Appreciate that 🙏

[@user-ie6yg4bd8w]

It's work!!! Thaks a lot!

[@AIWithFlutter]

You’re welcome ! Glad it helps !

[@poulmbogo1770]

This is amazing tutorial you help me so much i can't talk more but you are most great one

[@AIWithFlutter]

Thanks for your feedback ! Appreciate that 🙏

[@binarysensei]

Thx for saving me time, love you.

[@AIWithFlutter]

Welcome ! Appreciate that 🙏

[@raves_r3177]

if my web app has a firestore backend, will it still work? is the steps needed the same as shown?

[@user-qn4cd9zk6e]

Despite using sudo I still keep getting the error "command npm not found" when trying to install the firebase cli.

[@p_o_634]

Simple and fast. Cudos to you man !

[@AIWithFlutter]

Thanks man 🙏

[@Aryan-oc1fq]

Thank you so much, everything is working!

[@AIWithFlutter]

Welcome ! Appreciate that 🙏

[@GaryCuriano]

Thank you so muchhh. u saved my life 10 times

[@AIWithFlutter]

Welcome. Glad that it helps ! 🙏

[@thisaragunasekara924]

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

[@jesusmedina9356]

He desplegado 3 páginas por Firebase, ya tienen un tiempo desplegadas y ahora no me cargan, pero cuando uso una VPN si cargan, no entiendo..... Estaran bloqueadas para Venezuela???

[@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

[@nosjin666]

Amazing tutorial, thank you sir!

[@AIWithFlutter]

You're very welcome! 🙏

[@ALIButt-xi8tu]

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

[@registrationhelper]

Very much helpful .Thanks

[@AIWithFlutter]

Welcome ! Appreciate that 🙏

[@angelominoia4627]

Very helpfull, thank you so much!

[@AIWithFlutter]

Welcome ! Appreciate that 🙏

[@MuhammadAnas-r1x]

King

[@AIWithFlutter]

🫶

[@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

[@danielfemenia8996]

Amazing, thank you!

[@AIWithFlutter]

Welcome ! Appreciate that 🙏

[@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 !

[@lcd11001]

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

[@developerbs]

very clear and nice. Thank you

[@AIWithFlutter]

Welcome ! Appreciate that 🙏

[@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 ?

[@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 !

[@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.

[@user-pp5vm5kq2m]

Great...❤❤❤❤

[@AIWithFlutter]

Thanks ! Much appreciate 🙏

[@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

[@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.

[@rabarhusen9170]

thank you sir, it is pretty useful.

[@AIWithFlutter]

Appreciate that 🙏

[@DilipKumar-qp3mv]

Thanks, Man.

[@AIWithFlutter]

Welcome 🙏

[@yejiayang]

great work !!! thanks

[@AIWithFlutter]

Appreciate that 🙏

[@user-cw8pm8hd9q]

What about DNS ??

[@AIWithFlutter]

Hi, Firebase Hosting itself does not provide DNS services directly. However, it integrates smoothly with DNS providers to manage custom domains. When you set up Firebase Hosting with a custom domain, Firebase will guide you through the process of configuring DNS records with your domain registrar or DNS provider. You typically need to add DNS records (such as A records or CNAME records) provided by Firebase to your domain’s DNS settings to point your domain to Firebase Hosting. We will make a tutorial guide on this soon but if you are looking for the tutorial urgently, checkout the video link below. Thanks. kzbin.info/www/bejne/jIXPpZawZdFoftE

[@user-fs9vl9vs3p]

Is this avail for using api from backend?

[@HinduBhaktiii]

Is it possible to deploy the mobile app for the preview

[@suhaibalhayek5369]

thanks bro

[@AIWithFlutter]

Welcome 🙏

[@datumacademy9224]

How to add a domain

[@AIWithFlutter]

Hi, Firebase Hosting itself does not provide DNS services directly. However, it integrates smoothly with DNS providers to manage custom domains. When you set up Firebase Hosting with a custom domain, Firebase will guide you through the process of configuring DNS records with your domain registrar or DNS provider. You typically need to add DNS records (such as A records or CNAME records) provided by Firebase to your domain’s DNS settings to point your domain to Firebase Hosting. We will make a tutorial guide on this soon but if you are looking for the tutorial urgently, checkout the video link below. Thanks. kzbin.info/www/bejne/jIXPpZawZdFoftE

[@datumacademy9224]

@@AIWithFlutter Thank you very much! ❤️

[@umaluno2023uniaene]

Procurando comentário português

[@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