If you are building web application with Flutter Web and paid attention to the network tab during load, you would notice three downloads that's not from your host. canvaskit.js, canvaskit.wasm and a cryptic font from Google. This is not good if you are building a web application for companies that cares about data privacy, especially enterprises from Europe. Downloading the canvaskit from unpkg is bad. Even downloading a font from Google is off limit too!

There are numerous answers from Stack Overflow and issue threads from Flutter's GitHub discussed this issue. Some outdated, some up to date, but none has a clear obvious solution to it. This post is hopefully the one can provide a workable solution at the end of 2022. Let's hope we have an official solution from Flutter team earlier next year!

Just two steps! First...

I tried a few of the suggested methods I found from the thread of GitHub issues, this one seemed to fix all situation: Add these line into web/index.html

<script>   
  window.flutterConfiguration = {
    // Use the bundled canvaskit.
    canvasKitBaseUrl: "/canvaskit/"
  }

  ...

</script>

Flutter web always download and keep copies of canvaskit.js and canvaskit.wasm in the /build/web/canvaskit/ folder. But for some reason it never uses these local files when it runs the web application, kept downloading new one from unpkg.com. Adding these lines above will force the web application to look there instead.

This will work for all situations. Be it debug/development run with flutter run, or release build with flutter run --release, or a deployed build folder, which is not hosted by flutter run but with other methods like python -m http.server.

Tricking the web application to use the already hosted canvaskit is not the only thing to fix. Because the web application still decide to download a font from Google out of nowhere. It is not out of nowhere, actually. This is a fallback font that Flutter web always prepare to prevent some crash or bug that arise when using canvaskit with a proper font. This font is just the one of the commons: Roboto.

A trivia fix for this, we just need to host our own Roboto font, and Flutter web will happily use it!

Download the Roboto font pack. Copy and paste the Roboto-Regular.ttf into the project. Register the font with pubspec.yaml:

flutter:
  # Fonts
  fonts:
    - family: Roboto
      fonts:
        - asset: resources/google_fonts/Roboto-Regular.ttf

Rebuild and we're done. Now the web application will "download" this font and never bother with the one from Google anymore.

If you are like me, making a framework that built on top of Flutter and let developers deploy to Web, you might be thinking you can help with hosting the Roboto font in your own packages instead. Well, unfortunately no.

For some reason, font assets from dependency packages are registered as fontFamily: 'package.name.Roboto' in the asset manifest file. The code that check for Roboto font existence is looking for the exact font family name of 'Roboto'. This might be an easy fix for Flutter's team. But not us, the users.