How to start animation?

[lukepighetti]

My animation starts automatically, but I cannot figure out how to restart it after it's completed.

[luigi-rosso]

I'm assuming this is for a non looping animation, correct?

You're right, we don't have a good way to do this right now unless you use a controller to do your own mixing.

One way to do it right now would be to use the FlareCompletedCallback to set the animation to null when it completes. Then set it back to the animation you want to play when some event occurs.

This doesn't allow you to restart the animation while it's still playing, however. If you wanted to do that you could do this hideous thing:

String _animationName = "myAnimation";
...
// when you want to restart it
setState(() {
  _animationName = null;
  setState(() {
    _animationName = "myAnimation";
  });
});

What's your use case? Maybe we can find an all together better solution that would benefit others too.

[lukepighetti]

I've been swapping between "myAnimation" and "". My use case is that I don't want a looping animation but I want to trigger a play through at any time.

[inquisitev]

Could we just wrap the flare Actor widget with a stateful widget, do the refractoring to where the class is still named FlareActor, pass in all the possible variables for FlareActor, and expose a reset method using the ugly solution Luigi offered? so the end user just has to do actor.reset(); ..?

[kosiara]

I'm facing a similar issue. I have a "looping" animation:

which I can start and then pause. I cannot "reset" the animation state, however.

FlareActor(
            "assets/anim/success_check.flr",
            animation: _animationName,
            isPaused: _isPaused,
          )

void _startAnimation() => setState(() {
        _animationName = "Untitled";
        _isPaused = false;
      });

  void _resetAnimState() => setState(() {
        _animationName = "";
        _isPaused = true;
      });

[luigi-rosso]

You can use an instance FlareControls as the controller to your FlareActor widget. Take a look at how the Teddy example does this:

Flare-Flutter/example/teddy/lib/teddy_controller.dart

Line 129 in cc9354c

play("success");

A more basic version:

class SomeWidgetState ...
  final FlareControls _controls = FlareControls();
  @override
  Widget build(BuildContext context) {
      return 
        ...
        FlareActor("assets/myFlare.flr",
                alignment: Alignment.topCenter,
                shouldClip: false,
                fit: BoxFit.contain,
                animation: "idle",
                controller: _controls),
        ),
        ...
        FlatButton(
        onPressed: () {
            _controls.play("success");
        },