How can I run flutter web app without internet connection

Question

I created a flutter web application, and I finished building it with the command .. flutter build web --release , and then transferred it to a local server , The site does not work unless it is connected to the Internet ,

I want the site to work without an internet connection , As I work in an organization and some users do not have internet permissions .

Please, I want a solution to this problem .

Thanks

Answer 1

The problem is, that flutter has some dependencies, that can not be resolved when you, as the client, are offline. Mostly consisting of canvaskit and certain google fonts.

There are multiple solutions for that. The easiest being to use the html web-renderer:

flutter build web --release --web-renderer html

this should work for most applications, however it has lower performance than canvaskit, especially with high widget density.

Therefore you can also use canvaskit locally as it is automatically built when you build your release. But you have to set it as base url, by adding the following lines in your index.html:

<script>
  window.flutterConfiguration = {
      canvasKitBaseUrl: "/canvaskit/"
  };
</script>

This makes sure your flutter application uses the local source for canvaskit. However, another problem could be the usage of google fonts, e.g. Roboto, as those often need to be downloaded as well. But you can just add those to the pubspec.yaml explicitly to account for that, like explained here.

Some sources for more informations:

flutter web-renderers

The same issue but on github

Making Flutter offline capable