Flutter Web Deployment on Netlify — Manual & Automated (continuous)

Mubeen Ur Rehman Jazib — Tue, 11 Oct 2022 18:59:56 +0000

Out of several platforms supported by Flutter, the web has the easiest deployment process. Just one command away and then place the output code on the server. That’s all!

Netlify is a modern, high-performance platform to host websites, e-commerce stores, and web apps (as well as many other functionalities). We can also host Flutter web on Netlify.

There are two ways to host Flutter web on Netlify:

1: Manual Deployment

This is a relatively easy process. First of all, we build the web app for release using a simple command.



flutter build web

This command will build the web app located at /build/web. This folder contains all the assets, and files related to the app.

Next, you need to drag and drop the web folder or browse the folder in the Netlify project “deploys” tab.

After some time taken by the deployment process, the site will be deployed.

Manual deployment is straightforward but must be done repeatedly after the app changes or updates. So let’s make it automated, the right way.

2: Automated Deployment (recommended)

To make the deployment automated, you need to follow these simple steps.

1: Connect the git repo to your Netlify site. (If your site already exists, then go to Site settings -> Build & deploy -> Continuous Deployment.)

2: Select the git provider.

3: Then select the repository.

4: Set up the deployment settings. Fill up the fields with these values: Publish directory: build/web and build command:



if [ -d "flutter" ]; then cd flutter && git pull && cd ..; else git clone https://github.com/flutter/flutter.git; fi; flutter/bin/flutter build web

5: Click the deploy site button and your site will be deployed. Congrats!!!

Thinking about the build command given in step 4? 🤔

Whenever the repo is updated, Netlify will start the deployment, and the build command will be executed.

The command to build the web is really small, so why other complex commands? The answer is that we need Flutter SDK to build the web.

We will fetch the Flutter SDK directly from GitHub by cloning it into our project git clone https://github.com/flutter/flutter.git. A new folder “flutter” will be created on the root directory, which is why we need to get into it, then the bin folder, and at last execute our command flutter/bin/flutter build web.

After the first deployment, the deployment will run into an error because the flutter will have been already cloned and can’t be cloned again. To dodge this problem, we need to place the git code into the conditional statement. If the flutter folder exists, then it will be updated to the latest version, else flutter will be cloned.



if [ -d "flutter" ]; then cd flutter && git pull && cd ..; else git clone https://github.com/flutter/flutter.git; fi;

On every deployment, the latest version of flutter will be pulled. But what if you wish to stay on a specific version of flutter?

Try this command.



if ! [[ -d "flutter" ]]; then git clone --single-branch --branch <BRANCH_NAME> https://github.com/flutter/flutter.git; fi; flutter/bin/flutter build web

The site I uploaded is https://ngflutter.netlify.app/

DEV Community: Mubeen Ur Rehman Jazib

Flutter Web Deployment on Netlify — Manual & Automated (continuous)

1: Manual Deployment

2: Automated Deployment (recommended)

Thinking about the build command given in step 4? 🤔