Flutter Web + Netlify: Continuous Deployment The Right Way In 2 Minutes

Shahrukh Siddiqui
Nov 16, 2019 · 3 min read
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
  1. Connect your Flutter web Git repository to Netlify using the New site from Git button.
  2. Select the Git provider. (Netlify currently support GitHub, GitLab, and Bitbucket)
  3. Select your code repository
  4. 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
  5. 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).

Finally, the build command builds the web project and the resulting build is available in the build/web folder by default (used by the Publish directory field).

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade