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.
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.
- 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.