As you know Flutter provides an outstanding possibility to have one single code base for all platforms, such as Android, iOS, Windows, Linux, Web, and more. Cross-platform frameworks are not new things, but Google engineers challenged themselves enough to follow the core of Flutter’s principle - compile Dart code into true native code for every supported platform. As you know for Web browsers the native code is JavaScript, HTML, and CSS. Thus, you are getting ready to deploy the Progressive Web Application. At 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. Codis There are very detailed official docs on how to deploy Flutter to Firebase Hosting, GitHub Pages, and Google Cloud Hosting . In this article, I am going to show you how to quickly deploy Flutter Web App to or similar web hosting. here Vercel 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: <script src="main.dart.js" type="application/javascript"></script> Before releasing a new version just add/increase the suffix version of like that: main.dart.js <script src="main.dart.js?v=1.0.1" type="application/javascript"></script> So, coming back to Versel. First of all, you need to create a new project and connect a Git repository: As Vercel doesn’t yet have a Flutter template we have to set up a few parameters in the section: Build and Output Settings Build command: flutter/bin/flutter build web --release Output Directory: build/web Install Command: 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 There is one important option for command: . flutter build --web-renderer The option can be: , , or . --web-renderer auto html canvaskit (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. auto - always use the HTML renderer html - always use the CanvasKit renderer canvaskit The option works well, but if you need to speed up the first load time, the option helps you with it. auto html After all, the Web App is ready to be deployed! Also published . here

Figma to Flutter converter >>>

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How to Deploy Flutter Web App

Too Long; Didn't Read

Olex Tkachuk

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Deploy Flutter Web App

Too Long; Didn't Read

Olex Tkachuk

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES