flutter_web_preloader

A brick that creates a smart web entrypoint for Flutter and preloads any type of asset before starting an app.

Generated by mason 🧱

Flutter Web Preloader

This brick will override the default web/index.html that is created with a web Flutter project.

The index.html file generated by this brick will add additional JavaScript code in order to preload assets used by the Flutter app. Ensuring that when the app is presented to the user, the assets are already cached by the browser. Doing so prevents the application from loading piece by piece.

While the assets are being preloaded, a progress bar will be presented to the user.

Variables

Name	Description	Default value
project_title	The title of the project	name attribute in the pubspec.yaml
project_description	The project description	description attribute in the pubspec.yaml
batch_size	How many assets will be loaded at the same time	20
canvaskit	If the app uses canvaskit mode or not	true

FAQ

Can I customize the progress bar?

Yes, the progress bar can be customized. The generated web/index.html has a content division element (div) with an identifier of progress-indicator. This element can be styled using Cascading Style Sheets (CSS). For example, we can change the background-color to red by doing:

<div
  id="progress-bar"
  style="border: 1px solid blue; width: 250px; height: 50px;"
>
  <div
    id="progress-indicator"
    style="background-color: red; height: 100%; width: 0%;"
  ></div>
</div>

What would be the optimal batch_size?

The batch_size depends on the number and average size of your assets.

The batch_size can be increased when the average size of the assets is small, since the requests will finish sooner. However, keep in mind that a large batch_size may trigger too many requests at the same time and it may cause unexpected issues in the browser. On the other hand, the batch_size should be decreased when the size of the assets are large.

The default batch_size is 20, this should be a good number for most projects. It is not too high to cause unexpected browser issues, but also not low enough to cause the loading to take too much time.

In any case, we advise on testing when changing this value to make sure that it won't break your app.