How to Deploy Flutter Web App on Netlify?

In this article, we will deploy a counter flutter web app which is a single page application on netlify. 

Netlify:

It is a web development platform that makes CI/CD, deployment, and scaled hosting. It supports multiple frameworks which include Flutter. It does not require money to deploy websites but is limited to certain features.

Firstly, let’s create a flutter web app. We need to upgrade the flutter before if the current version does not support the web app. Run the following commands to upgrade flutter to a stable channel.

Now, let us make sure we have flutter devices to render web apps on browsers. To ensure this, type the below command in your terminal.

It will show all the devices available for running the app and a webserver to serve the app. Here, it is Chrome. 

Create and Run:

The method of creating a new project with web support is the same as an android or iOS app. Create a new app from the terminal and it will automatically create an app for android, web, and iOS. Remember, if you have not upgraded Flutter it will not create a web app for your project. If you want to support web for an existing project type (flutter create . ) in the terminal inside your project folder. Otherwise, for the new project just type the below command. 

To serve your app on localhost in Chrome, go to your app folder and do the following:

You should see something like this on your localhost port – 

Since the web app is working great. It’s time to deploy it to netlify. There are many methods to do deployment but here only the easiest method will be discussed. It’s time to head build the app for release using a simple command in the terminal. 

This will create a web folder inside the build folder that is a master of everything here. 

Deployment:

Create an account on Netlify if hadn’t till now. The dashboard will look something like this:

We can deploy using Git also, but here we are going to see a simple drag and drop method which is a direct method using a folder instead of pushing your code onto Github first then deploying it. If you are a beginner you can get stuck between Github and Netlify in the case of flutter web app deployment which is different from JavaScript website. Now, click on Sites, and it will take you to a page that looks like – 

At the end of the site’s page, there is a box for drag and drop purposes. But which folder do we need to drop there? Drag and drop the web folder inside the build folder and Netlify will automatically start deploying the web app. It will create a link to your web app which you can share with your anyone to see your website. 

You can change the domain name if you don’t like the one generated by Netlify. If you have face any difficulty in deploying this way do tell us in the comment section.