Search code examples
flutterdartflutter-layoutflutter-animationflame

Flutter setState() is not updating a Flame SpriteAnimationWidget


I am currently using a SpriteAnimationWidget from Flame, and I want to have different animations by clicking buttons.

To test out if this works, I am changing the animation parameter of the SpriteAnimationWidget with a button click. After 1 second, the widget has to return to its original animation.

Here is my code:

Future<void> playReaction() async {
  setState(() {
    isPlaying = true;
    state = 'reaction';
  });

  await Future.delayed(Duration(milliseconds: 1000));

  setState(() {
    isPlaying = false;
    state = 'idle';
  });
}

And inside the build, I am returning:

if(state == 'reaction') {
  spriteAnimation = reactionSprite!.createAnimation(row: 0, stepTime: 0.1, from: 0,  to: 10);
  print('reaction');
}
else if(state == 'idle'){
  spriteAnimation = sprite!.createAnimation(row: 1, stepTime: 0.2, from: 0,  to: 4);
  print('idle');
}

return Container(
  height: widget.size,
  child: Stack(
      fit: StackFit.expand,
      children: [
        Positioned.fill(
          child: SpriteAnimationWidget(
            animation: spriteAnimation!,
            anchor: Anchor.center,
          )
        ),
      ]
  ),
);

The variables sprite and reactionSprite are sprite sheets that I preload using SpriteSheet.fromColumnsAndRows().

The problem is that, although my app successfully runs playReaction() and reaches print('reaction'), the SpriteAnimationWidget is still playing the idle animation instead of the reaction animation. I know that it's being rebuilt somehow because I can see that there is a slight unnatural discontinuity in the animation when I hit the button (plus the print messages).

Why is setState() not updating the SpriteAnimationWidget with a new animation parameter?

I am relatively new to Flutter and Flame, so I would love some help or advice.

ps. I tried using the same sprite sheet for the change with a different row (instead of using a completely different sprite sheet as in the code above), but the result was the same.


Solution

  • This was actually a bug, we are fixing it here.

    Meanwhile, as a workaround, you can change the key of the widget every time that you change the animation and it should update the widget.