How to deploy Flutter Web App
At Codis we believe that Flutter has great potential, it is the main reason why we are building a way to automatically generate Flutter UI from Figma to empower Flutter even more.
There are very detailed official docs on how to deploy Flutter to Firebase Hosting, GitHub Pages, and Google Cloud Hosting here. In this article, I am going to show you how to quickly deploy Flutter Web App to Vercel or similar web hosting.
Before deploying, it would be good to have a way to update a new version in users’ Web Browsers after deploying. Currently, Flutter CLI doesn’t support hash naming or another way to name output bundles.
The solution is pretty simple - after enabling Web in Flutter project you should have a file web/index.html. By default it has the next line:
Before releasing a new version just add/increase the suffix version of main.dart.js like that:
So, coming back to Versel. First of all, you need to create a new project and connect a Git repository:
Versel Hosting for Flutter Web App
As Vercel doesn’t yet have a Flutter template we have to set up a few parameters in the Build and Output Settings section:
flutter/bin/flutter build web --release
if cd flutter; then git pull && cd .. ; else git clone https://github.com/flutter/flutter.git -b stable; fi && ls && flutter/bin/flutter doctor && flutter/bin/flutter clean && flutter/bin/flutter config --enable-web
Flutter Web App settings
There is one important option for
flutter build command:
--web-renderer option can be:
auto(default) - automatically chooses which renderer to use. This option chooses the HTML renderer when the app is running in a mobile browser and the CanvasKit renderer when the app is running in a desktop browser.
html- always use the HTML renderer
canvaskit- always use the CanvasKit renderer
auto option works well, but if you need to speed up the first load time, the
html option helps you with it.
After all, the Web App is ready to be deployed!