Flare-flutter: Loop animation, wait until it finish a lap to start another one

[jaumard]

Hey :) I'm having trouble implementing a feature for flutter_splash_screen, my idea was to make a loop animation idle until the initialization of the app is done, then switch to a "finish animation" before pushing the next screen. Problem is that the callback is not called for a loop animation, so I do know when a lap is finished to chain the second animation in a smooth way.

I guess my only way is the FlareController, do you have some code somewhere that does similar things ?

In any way I think it will be nice to have a finishedCallback and a loopCallback, will be very handy :) or at least that the callback is called on each lap

[asjqkkkk]

FlareActor has a FlareCompletedCallback, But this is only valid in non-loop animations.

just like

new FlareActor(
                  "xxx.flr",
                  fit: BoxFit.scaleDown,
                  animation: animation,
                  callback: (name) {
                    if (name == "animation_one") {
                      ...
                    } else if (name == "animation_two") {
                      ...
                    } else if (name == "animation_three") {
                      ...
                    }
                  },
                )

But i don't kown how to use FlareController,I hope the official has a simpler example than bear animation

[luigi-rosso]

We can definitely introduce a callback for the loop, but yes the FlareController might be a better way to go for now. There are a few examples of FlareControllers in the example folder here (the penguin uses it and so does the space_reload).

Have you tried simply swapping to your "finish animation" regardless of where the "idle" animation is? This should work as we have a 0.2 second mix value currently hardcoded into FlareActor. That means it'll smoothly interpolate the two animations.

In the meantime I'll cook up a sample controller, just need to finish a few things but I should be able to get it to you later tonight.

[asjqkkkk]

Thank you very much, I really like flare ^_^

[luigi-rosso]

Alright I put together a simple example here:
https://github.com/luigi-rosso/sequenced_loader

Controller and widget code are coupled together as it was pretty self contained, might be nice to split them up if you want to support other flare files/layouts/etc.
https://github.com/luigi-rosso/sequenced_loader/blob/master/lib/flare_progress_indicator.dart

Flare file is here:
https://www.2dimensions.com/a/castor/files/flare/sequencedloader

[jaumard]

Works really nicely @luigi-rosso ! Thanks a lot ! I'll integrate this into flare_spalsh_screen :) it will help me understand better FlareController as for now it's still obscur to me ^^

[jaumard]

flare_splash_screen has been updated to use this ! I also customize it a bit to be able to do intro, loop, complete animation with all animation optional to be able to mix whatever combination we need/want.

I was thinking ok it's great for a splash screen but it can be use for all sort of loading widget in fact ! So I created flare_loading https://github.com/jaumard/flare_loading that offer the same capabilities but that you can use for all kind of loading process.

Thanks a lot for the help @luigi-rosso !