Flutter web website takes a long time to load initially

Question

Flutter web website takes a long time to load initially

21.9k Views Asked by bobdub At 19 October 2024 at 22:44

I am currently creating a flutter web application for a client, however, when the website is navigated to for the first time in the browser, the page loads to a blank screen and a few seconds later shows the actual homepage widgets. After the page has been cached in it seems to be quicker on subsequent reloads.

Is there something that I can change about my flutter web app in order to decrease this initial load time? I know that flutter web is still in beta, so it may just be that -- will this be fixed when flutter web becomes deployment ready?

Any help is appreciated.

Original Q&A

There are 4 best solutions below

**Govarthanan Venunathan** · Answer 1

Please refer to this flutter example to resolve the bootstrap white screen initial load.

Flutter Gallery web example

The instance of the white screen will display the app icon loading animation once the flutter app bootstrapped the loader icon will hide and the flutter app show.

<div id="loading">
<style>
  body {
    inset: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    position: fixed;
  }

  #loading {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
  }

  #loading img {
    animation: 1s ease-in-out 0s infinite alternate breathe;
    opacity: .66;
    transition: opacity .4s;
  }

  #loading.main_done img {
    opacity: 1;
  }

  #loading.init_done img {
    animation: .33s ease-in-out 0s 1 forwards zooooom;
    opacity: .05;
  }

  @keyframes breathe {
    from {
      transform: scale(1)
    }

    to {
      transform: scale(0.95)
    }
  }

  @keyframes zooooom {
    from {
      transform: scale(1)
    }

    to {
      transform: scale(10)
    }
  }
</style>
<img src="icons/Icon-192.png" alt="Loading indicator..." /></div>
<script>
window.addEventListener('load', function () {
  var loading = document.querySelector('#loading');
  _flutter.loader.loadEntrypoint({
    serviceWorker: {
      serviceWorkerVersion: serviceWorkerVersion,
    }
  }).then(function (engineInitializer) {
    loading.classList.add('main_done');
    return engineInitializer.initializeEngine();
  }).then(function (appRunner) {
    loading.classList.add('init_done');
    return appRunner.runApp();
  }).then(function (app) {
    // Wait a few milliseconds so users can see the "zoooom" animation
    // before getting rid of the "loading" div.
    window.setTimeout(function () {
      loading.remove();
    }, 200);
  });
});

**Aashar Wahla** · Answer 2

Before running certain views, especially the first time the web app is built, it takes a moment to load everything up. The best thing to do in such case is to add a loading screen/widget.

You should have a look at this article by Juan Curti.

**Marcus Rabello** · Answer 3

Marcus Rabello On 17 August 2022 at 18:01

Consider using ditman's solution in

https://github.com/flutter/flutter/issues/76009#issuecomment-1095663169

He puts an example of his solution at

https://dit-tests.web.app

**Nico** · Answer 4

I think a found a solution for that, let me know if it works!

I posted it here... Basically you need to add two lines to the <head>...</head> tag on your index file to start loading the CanvasKit binary from the beginning.

<script src="https://unpkg.com/[email protected]/bin/canvaskit.js"></script>
<link rel="preload" href="https://unpkg.com/[email protected]/bin/canvaskit.wasm" as="fetch" crossOrigin="anonymous">

Be careful with which URL you use above, there is a better explanation on the link above! Hope it helps at least a bit with your initial loading time!

Flutter web website takes a long time to load initially

There are 4 best solutions below

Related Questions in FLUTTER

Related Questions in WEB

Related Questions in FLUTTER-WEB

Trending Questions

Popular # Hahtags

Popular Questions