Animation from assets in Flutter

Question

I'm currently working over an app similar to good old Tamagotchi with modern twists. Right now I prepared some code and didn't need any character animations but now I'm stuck. I want to make a scaffold with title, line of buttons below it, yet still on top of the screen, second bunch on bottom and create some kind of interactivity inside between those two, with character made from assets, some animations and reactions on touch. To be clear - something like this:

class _AnimationState extends State<Animation> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        "some title here"
      ),
      body:
        Column(
          children: [
             Row(here some buttons)
             Column(with animation, height as was left on screen)
             Row(another line of buttons)
          ],
        ),
    );
  }
}

I was thinking about flame engine, found even tutorial, but when I'm trying to implement it i receive exception

The method '_mulFromInteger' was called on null. Receiver: null Tried calling: _mulFromInteger(0)

This is a tutorial I worked on: https://medium.com/flutter-community/sprite-sheet-animations-in-flutter-1b693630bfb3

And code i tried to implement:

Center(
  child:
    Flame.util.animationAsWidget(Position(70, 70),
    animation.Animation.sequenced('minotaur.png', 5, textureWidth: 50),
   ),
),

The other idea was to use Sprite Widget but I never used any animations in my previous projects, nor in Flutter, C# or whatever language i had in college.

I would appreciate any advices, tutorials or examples how to handle animation from assets.

Solution

That tutorial is quite old, a lot has happened in the world of Flame since then.

I'm guessing you are using version 1.0.0-rc9 of Flame?

Something like this should work with the that version:

final animationData = SpriteAnimationData.sequenced(
  amount: 5, stepTime: 1.0, textureSize: Vector2.all(50)); 
final spriteAnimation = await SpriteAnimation.load(
  'minotaur.png' animationData);

...

Center(
  child: SpriteAnimationWidget(
    animation: spriteAnimation,
    playing: true,
    anchor: Anchor.center,
  ),
)

An example of it can be found here. There is also some short documentation for it here.

Comments

[Lars]

have you added the minotaur.png to the asset path in pubspec.yaml?

[Newman]

Yes, I can see it in Image(AssetImage('assets/images/minotaur.png') but it just don't want to cooperate with full path or just file name