Question 91187 in Apache Question posted in
Some documentation to get you started can be found here.

How can I run flutter web app without internet connection – Apache

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

Tags:

3

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0
    1. Download and set locally from asset policy for your web application
    2. Add link to local Canvaskit as bellow :

    flutter build web –web-renderer=canvaskit
    –dart-define=FLUTTER_WEB_CANVASKIT_URL=/canvaskit/

    Login or Signup to reply.
  3. 0

    To make it work for a dev build, I incorporated Spanching’s answer above in the following steps.

    1. Run: flutter clean to clean up all build cache (this is important to have canvas kit re-downloaded in step 4 below).
    2. Run: flutter pub get to download packages per pubspec.yaml
    3. If you’re using build runner: dart run build_runner build --delete-conflicting-outputs

    At this stage you should have a clean /build folder (I also have an ios sub-folder as I’m also developing for iOS)

    1. Run: flutter build web

    At this stage you should have a clean /build/web added with a canvaskit folder underneath it. Full path: /build/web/canvaskit/

    Then:

    1. Open index.html under /web (note – do not open the one under /build/web)
    2. Add the script mentioned in the answer above to the body of the html file. I just added it above the existing script that’s already there.
    3. Run your project in deubg mode (with Wifi turned off).
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search