Flutter for web Build Pipeline Script

Use Flutter for web with your existing cloud build tools.

Installation

The installation of this script is as lightweight as possible.

1. Place the build-web.sh script beside your pubspec.yaml file.
2. Add the following command to your pipeline.

sh ./build-web.sh

You may need to change the path called depending on your repo structure or tools.

Build Config Example with Netlify

See it in action at flutter-for-web-build-script-demo.netlify.app

Here is an example config for Netlify that would be stored in their netlify.toml file at the root directory of your repo. In a monorepo structure, you would only have to change build to point to your flutter app directory.

[build]
  # Directory to change to before starting a build.
  base = "./"

  # Directory that contains the deploy-ready HTML files and assets generated by
  # the build. This is relative to the base directory if one has been set, or the
  # root directory if a base has not been set.
  publish = "build/web"

  # Flutter build for web command
  command = "sh ./build-web.sh"

Netlify File-based configuration Docs

How it works

The script installs the beta version of Flutter to your deploy pipeline container. If your build pipeline caches build artifacts Flutter will only be downloaded once.

Assets

Flutter for web moves your static assets listed in the app's pubspec.yaml under a new /assets/ folder. Flutter only does this during build, not development mode.

The path in your web app bundle looks now like /assets/myAssets/.... This results in your app having many 404 errors.

To make the web file structure match that of your iOS or Android app, the build script makes a copy of the new /assets folder and places them in your project's root folder, mirroring what is found in Flutter's development mode.