Loading Flare actors in advance

[stx]

Hi there,

I'm seeing an empty/blank space load delay when even tiny FlareActor files are loaded and I need them to be visible immediately upon a screen load. Is it possible to preload these assets prior to runApp() or using some other strategy?

Thanks for your great work on Flare!

[luigi-rosso]

Hi @stx, this is how we did it in the developer_quest app:
https://github.com/2d-inc/developer_quest/blob/master/lib/src/widgets/flare/warmup_flare.dart

Basically one file that defines the files you want to preload and exposes a method to do so.

Then in your main you can call this directly before runApp:

warmupFlare();

[stx]

@luigi-rosso Brilliant! Thanks so much!

[stx]

I found that you can speed up load times surprisingly significantly by caching the assets in parallel. I'm seeing a ~40% improvement with just a few files.

Iterable<String> assets = ['path/to/file', 'path/to/file', ...];
Iterable<Future<FlareCacheAsset>> futures = assets.map((String asset) => cachedActor(rootBundle, asset));
await Future.wait(futures);

[luigi-rosso]

Oh great, thanks! I forgot to mention, you can also tell the cache to not prune:

FlareCache.doesPrune = false;

Do that in main before runApp too.

I wouldn't do this in projects that load an enormous amount of Flare files (or download a lot of them), but if you have small set, this helps keep them in cache.

We've been working on some new features in the embedding branch (which unfortunately isn't compatible yet) which brings down the load even further times and reduces jank while loading as even the smaller operations are pushed to an isolate. We might merge some of those improvements into master if we end up being too far off from getting that whole branch merged.

[stx]

Awesome, thanks! That's good to know. What triggers pruning?

[luigi-rosso]

It happens whenever a flare file is no longer referenced. FlareActor will reference count the Flare files it loads:

Flare-Flutter/flare_flutter/lib/flare_render_box.dart

Line 243 in 0230aab

asset.ref();

And then dereference them when they are no longer used (widget is detached or source is changed):

Flare-Flutter/flare_flutter/lib/flare_render_box.dart

Line 223 in 0230aab

asset.deref();

The cache gets pruned 2 seconds after the asset is no longer referenced:

Flare-Flutter/flare_flutter/lib/flare_cache.dart

Line 12 in 0230aab

static Duration pruneDelay = Duration(seconds: 2);