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. 

What is 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.

flutter channel stable
flutter upgrade

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.

flutter devices

Result:

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

flutter create counter_app

To know more about it refer this article: Creating a Simple Application in Flutter

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

cd counter_app
flutter run -d chrome

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 to build the app for release using a simple command in the terminal. 

flutter build web

Result:

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

- Deployment

Create an account on Netlify if you haven'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 a Flutter web app deployment which is different from a 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 show "Deploy Success" as shown in following image and create a link to your web app which you can share with your anyone to see your website. 

Final Output:

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