Deploy Flutter Web to Firebase: A Complete Walkthrough

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:

1     flutter create new_project
2     

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:

1     flutter config --enable-web
2     

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.

1     flutter build web
2     

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. ‍

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:

1     npm install -g firebase-tools
2     

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

1     firebase login
2     

‍

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.

1     firebase init
2     

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.

1     firebase deploy
2     

‍

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

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...🚀

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.