Flare animation appears slower than Icons

[addaedans]

I have a program that dinamically changes the icons/animations in Cards, but at the first time the Flare animations starts with around 1 sec delay. The Icons appear immediatly. Can I preload/cache the animation before building a widget somehow?

[umberto-sonnino]

You can take a look here at Flare-Flutter caching strategies: https://github.com/2d-inc/Flare-Flutter/blob/sync_load/loading_strategies.md

If you can provide a better example with files and code I can make probably give you a better suggestion..!

[luigi-rosso]

We just recently introduced a FlareCacheBuilder which can help you preload flr files for certain sections of your app!

Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: [
            Expanded(
              child: FlareCacheBuilder(
                ["assets/Filip.flr"],
                builder: (BuildContext context, bool isWarm) {
                  return !isWarm
                      ? Container(child: Text("Loading..."))
                      : FlareActor(
                          "assets/Filip.flr",
                          alignment: Alignment.center,
                          fit: BoxFit.contain,
                          animation: _animationName,
                        );
                },
              ),
            )
          ],
        ),
      ),
    );
  }

[addaedans]

Perfect. Thank you very much for this!

Luigi Rosso notifications@github.com ezt írta (időpont: 2019. nov. 7., Cs, 2:56):

We just recently introduced a FlareCacheBuilder https://github.com/2d-inc/Flare-Flutter/blob/stable/flare_flutter/lib/flare_cache_builder.dart which can help you preload flr files for certain sections of your app!

Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.grey, appBar: AppBar(title: Text(widget.title)), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.min, children: [ Expanded( child: FlareCacheBuilder( ["assets/Filip.flr"], builder: (BuildContext context, bool isWarm) { return !isWarm ? Container(child: Text("Loading...")) : FlareActor( "assets/Filip.flr", alignment: Alignment.center, fit: BoxFit.contain, animation: _animationName, ); }, ), ) ], ), ), ); }

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/2d-inc/Flare-Flutter/issues/180?email_source=notifications&email_token=AGKX7SMJXKFPKST46BGTG5TQSNYWFA5CNFSM4JFCNIKKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDIUAGY#issuecomment-550584347, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGKX7SNGL4PFN2IR7CONBIDQSNYWFANCNFSM4JFCNIKA .

[luigi-rosso]

Np! I'm closing the issue, for now, feel free to re-open if you run into any issues with this!

[Nijinsha]

How to cache the same animation globally?

[mohamedenab]

@luigi-rosso i have try your example but i get error The element type 'String' can't be assigned to the list type 'AssetProvider'.

FlareCacheBuilder( ["assets/images/justplay.flr"], builder: (BuildContext context, bool isWarm) {return FlatButton( onPressed: () => voices .textAreaControl .text .length > 2 ? listinOnPlay() : null, padding: EdgeInsets.all(0), child: FlareActor( 'assets/images/justplay.flr', fit: BoxFit.contain, animation: "Play", color: const Color( 0xff1f93a6), ), );} ),

[mohamedenab]

@addaedans can you provide me example of what you did

[tsinis]

@luigi-rosso i have try your example but i get error The element type 'String' can't be assigned to the list type 'AssetProvider'.

FlareCacheBuilder( ["assets/images/justplay.flr"], builder: (BuildContext context, bool isWarm) {return FlatButton( onPressed: () => voices .textAreaControl .text .length > 2 ? listinOnPlay() : null, padding: EdgeInsets.all(0), child: FlareActor( 'assets/images/justplay.flr', fit: BoxFit.contain, animation: "Play", color: const Color( 0xff1f93a6), ), );} ),

You are trying to cache animations old way — it's not working anymore since v2.0.1, here is proper way how to make it: https://github.com/2d-inc/Flare-Flutter/issues/224#issuecomment-576169853

Loading Strategies are not yet updated, there is open PR to fix it https://github.com/2d-inc/Flare-Flutter/pull/240

[mocha234]

Hello. By any chance there's way to pre cache bulk globally? Thanks.

[svn-arc]

Hello. By any chance there's way to pre cache bulk globally? Thanks.

You can warm up the cache globally in the main() function:

Future<void> preCache() async {
  await cachedActor(
        AssetFlare(bundle: rootBundle, name: 'assets/file_1.flr'),
   );
  await cachedActor(
        AssetFlare(bundle: rootBundle, name: 'assets/file_2.flr'),
   );
  await cachedActor(
        AssetFlare(bundle: rootBundle, name: 'assets/file_n.flr'),
   );
 ...
}

void main() async {
    WidgetsFlutterBinding.ensureInitialized();
    FlareCache.doesPrune = false;

    preCache.then((_) {
        runApp(MyApp());
    });
}

However, this adds an additional 3 or more seconds to your app startup time.

[kovalyovi]

You can warm up the cache globally in the main() function:

I've used your way and found out that with many files needed to be pre-cached, it takes really long time and I tried finding a way to speed it up, and I found one! It's a very small modification to your code but that cuts time twice in production. For my test, I have 5 .flr files that I needed to preload. If I 'chained' await functions, it took 10 seconds to preload all of them. In a release, it took 0.24 seconds (yes, a quarter). With my way, it took 8 seconds in debugging and 0.11 seconds in release (tested multiple times). In fact, without any 'warming up', it took 4 seconds in debugging and not noticeable in a release. Here is the updated suggestion:

Future<void> preCache() async {
  final futures = List<Future>();

  futures.add(cachedActor(
        AssetFlare(bundle: rootBundle, name: 'assets/file_1.flr'),
  ));
  futures.add(cachedActor(
        AssetFlare(bundle: rootBundle, name: 'assets/file_2.flr'),
  ));
  futures.add(cachedActor(
        AssetFlare(bundle: rootBundle, name: 'assets/file_n.flr'),
  ));

  try {
        await Future.wait(futures);
  } catch (e) {
        print(e);
  }
 ...
}