|
2 | 2 |
|
3 | 3 | [](https://github.com/felangel/mason) |
4 | 4 |
|
5 | | -A brick that creates a smart web entrypoint for Flutter that pre loads its assets before starting the app |
| 5 | +A brick that creates a smart web entrypoint for Flutter and preloads any type of asset before starting an app. |
6 | 6 |
|
7 | 7 | _Generated by [mason][1] 🧱_ |
8 | 8 |
|
9 | | -## Getting Started 🚀 |
| 9 | +## Flutter Web Preloader |
10 | 10 |
|
11 | | -This is a starting point for a new brick. |
12 | | -A few resources to get you started if this is your first brick template: |
| 11 | +This brick will override the default `web/index.html` that is created with a web Flutter project. |
| 12 | + |
| 13 | +The `index.html` file generated by this brick will add additional JavaScript code |
| 14 | +in order to preload assets used by the Flutter app. Ensuring that when the app is |
| 15 | +presented to the user, the assets are already cached by the browser. Doing so prevents |
| 16 | +the application from loading piece by piece. |
| 17 | + |
| 18 | +While the assets are being preloaded, a progress bar will be presented |
| 19 | +to the user. |
| 20 | + |
| 21 | +## Variables |
| 22 | + |
| 23 | +| Name | Description | Default value | |
| 24 | +| ------|------------------|-------------- | |
| 25 | +|`project_title`| The title of the project | value on the `pubspec.yaml`| |
| 26 | +| `project_description`| The project description |`name` attribute in the `pubspec.yaml`| |
| 27 | +| `batch_size`| How match assets will be loaded at the same time | `20`| |
| 28 | +| `canvaskit`| If the app uses `canvaskit` mode or not |`true`| |
| 29 | + |
| 30 | +## FAQ |
| 31 | + |
| 32 | +### Can I customize the progress bar? |
| 33 | + |
| 34 | +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). |
| 35 | +For example, we can change the `background-color` to red by doing: |
| 36 | + |
| 37 | +```html |
| 38 | +<div id="progress-bar" style="border: 1px solid blue; width: 250px; height: 50px;"> |
| 39 | + <div id="progress-indicator" style="background-color: red; height: 100%; width: 0%;"></div> |
| 40 | + </div> |
| 41 | +``` |
| 42 | + |
| 43 | +### What would be the optimal `batch_size`? |
| 44 | + |
| 45 | +The `batch_size` depends on the number and average size of your assets. |
| 46 | + |
| 47 | +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. |
| 48 | +On the other hand, the `batch_size` should be decreased when the size of the assets are large. |
| 49 | + |
| 50 | +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. |
| 51 | + |
| 52 | +In any case, we advise on testing when changing this value to make sure that it |
| 53 | +won't break your app. |
13 | 54 |
|
14 | | -- [Official Mason Documentation][2] |
15 | | -- [Code generation with Mason Blog][3] |
16 | | -- [Very Good Livestream: Felix Angelov Demos Mason][4] |
17 | 55 |
|
18 | 56 | [1]: https://github.com/felangel/mason |
19 | | -[2]: https://github.com/felangel/mason/tree/master/packages/mason_cli#readme |
20 | | -[3]: https://verygood.ventures/blog/code-generation-with-mason |
21 | | -[4]: https://youtu.be/G4PTjA6tpTU |
|
0 commit comments