Photo by Luca Bravo on Unsplash

Building a website using Flutter is easy. Automated code change deployments to specific branches should be easy as well.

Netlify makes it a breeze to setup auto publishing of code. A simple build script will make Netlify compatible with your Flutter web project. You can setup your Flutter website for continuous deployments in 5 easy steps (given you have registered an account with Netlify already).

Landing page after you login to Netlify

Git provider selection

Connect your Flutter web Git repository to Netlify using the New site from Git button. Select the Git provider. (Netlify currently support GitHub, GitLab, and Bitbucket) Select your code repository Setup the branch to deploy and build settings. Paste the below build command and publish directory values (the fields are explained in the section below).

Build command: if cd flutter; then git pull && cd ..; else git clone https://github.com/flutter/flutter.git; fi && flutter/bin/flutter config --enable-web && flutter/bin/flutter build web --release

Publish directory: build/web Click Deploy site

Pick a repository

Setup deployment

Explanation

The only thing that is even remotely unique about this article is the build command. I’ll break the build command apart and explain how it works.

We need to install the Flutter SDK by cloning the Flutter Git repository, enable web support, and build the project.

Since we can’t guarantee that the build bot/agent that Netlify uses to build your site will be the same, we have to employ a caching technique that will basically check if the working directory has the Flutter SDK folder. If it does, it just pulls latest on it. Otherwise, it clones the Git repository. This helps make the build process faster.

The next step enables web support by running a config command passing in the appropriate flag (Flutter Web Support).