I want to show some animation when user tap on the screen. The animation need to be controllable too as it needs to be reset after each tap.

What I have tried: 1. Show a Gif image in Overlay.

RenderBox renderBox = context.findRenderObject();
var size = renderBox.size;
var offset = renderBox.localToGlobal(Offset.zero);

_myGif = Image.asset('images/mygif.gif', width: 100, height: 100,);

return OverlayEntry(
  builder: (context) => Positioned(
    left: offset.dx - 50.0 + size.width/2,
    top: offset.dy - 50.0 + size.height/2,
    child: Container(
      child: _myGif
    ),
  )
);

Problem: The Gif animation is not controllable. The animation also appears to be played from random frames and end at random frames each time.

  1. Use third party widget (gif_ani)

    _animationCtrl = GifController(vsync: this, duration: new Duration(milliseconds: 1000), frameCount: 38); _mygifAnimation = GifAnimation( width: 100.0, height: 100.0, image: AssetImage('images/mygif.gif'), controller: _animationCtrl, );

Problem: It only works when it's not on an Overlay. When the GifAnimation is added as a child in Overlay it doesn't display at all.

  1. Use Flame to run sprite sheet Problem: AnimationAsWidget doesn't fit my requirement as I need to control the animation. Other ways would make my code too complex as I'm not building a game.

Is there any solution on this? Thank you in advance.

0 Answers