Flutter Web + Netlify: Continuous Deployment The Right Way In 2 Minutes
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).
- Connect your Flutter web Git repository to Netlify using the
New site from Gitbutton. - 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 --releasePublish directory:build/web - Click Deploy site
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).
