Promptless AI is here soon - Production-ready contextual code. Don't just take our word for it. Know more
Know More

Deploy Flutter Web to Firebase: A Complete Walkthrough


Nidhi Sorathiya


Kesar Bhimani


August 14, 2023

August 14, 2023

In the world of Flutter development, the ability to deploy Flutter web to Firebase is a critical skill. This blog post will guide you through the process of deploying a Flutter web application to Firebase hosting.

Getting Started

To begin, we need to ensure that we have the Flutter SDK installed on our system. The Flutter SDK is the backbone of any Flutter project, allowing us to create applications for various platforms.

If you don't have Flutter SDK installed in your system, click here.

Next, we need to either create a new Flutter project or use an existing project. For a new Flutter project, run the following command and start preparing your app:

If you have an existing Flutter app, navigate to the project directory in the command line.

Preparing the Flutter Web App

To prepare our Flutter firebase deployment, we need to ensure that the web framework preview is enabled in our Flutter project. This can be done by running the following command:

Once the web framework preview is enabled, we can build our Flutter web project. The flutter build web command compiles the Dart code into JavaScript, which is necessary for the web app to run in a browser.

This command generates a build web folder in the Flutter project directory. This folder contains the web application, including an HTML file that can be opened in a Chrome browser.

Setting Up Firebase

To deploy Flutter web to Firebase, we first need to create a Firebase project. Navigate to the Firebase console and click Create Project.

Deploy Flutter Web to Firebase: A Complete Walkthrough
Setting Up Firebase

Install the Firebase CLI

Once the Firebase project is set up, we need to install the Firebase CLI. The Firebase CLI allows us to interact with our Firebase project from the command line. Run the following command to install the Firebase tools:

Next, we need to log in to Firebase. Run the firebase login command and follow the prompts to log in to your Google account.

Deploying the Flutter Web App

With our Firebase project set up and our Flutter web app built, we can now deploy our app to Firebase.

First, we need to initialize Firebase hosting in our Flutter project directory. Run the firebase init command and select Hosting.

During the initialization process, we are asked to select the Firebase project to link to our Flutter web app. We also need to specify the public directory, which is the build web folder in our Flutter project to get firebase.json and .firebaserc files which have the details required to deploy the web application.

Finally, we can deploy Flutter web to Firebase by running the Firebase deploy command.

Deploy Flutter Web to Firebase: A Complete Walkthrough
Deploying a Flutter Web App

Once the deployment process is complete, we are provided with a hosting URL where our Flutter web app is live and accessible. And DEPLOYED!

Deploy Flutter Web to Firebase: A Complete Walkthrough

Deploying a Flutter web app to Firebase is a straightforward process that involves preparing the Flutter web app, setting up a Firebase project, and deploying the app using the Firebase CLI. With this guide, we hope you are now equipped to deploy Flutter Web to Firebase hosting with ease. Keep Deploying amazing Flutter Web apps...🚀

Frequently asked questions

How do I run a Flutter web build?

To run a Flutter web build, you first need to ensure that web support is enabled. If it's not, you can enable it by running:

Then, navigate to your Flutter project directory and run:

This command will build your Flutter web application and run it in Chrome.

Can I host Flutter web app on Firebase?

Yes, you can host a Flutter web app on Firebase. Firebase provides a hosting service that you can use to host your Flutter web applications. The process involves building your Flutter web app, initializing Firebase in your project, and deploying your app using the Firebase CLI.

Can I use Firebase for web hosting?

Yes, Firebase provides a hosting service that is perfect for web applications. Firebase Hosting provides fast and secure hosting for your web app, static and dynamic content, and microservices. It is production-grade web content hosting for developers with a single command deployment and automatic SSL.

Is Flutter good with Firebase?

Yes, Flutter works very well with Firebase. Firebase provides a suite of cloud-based services that can be used in Flutter apps, including authentication, database, storage, hosting, and more. Firebase's services are easy to use, scalable, and have good support for Flutter, making it a great choice for backend services in Flutter apps.

Frequently asked questions

No items found.