Reputation: 227
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.
Upvotes: 2
Views: 571