flutterdartflutter-layoutflutter-animationflutter-image

Stop GIF animation on click in flutter


I am new in flutter. I am try to pause animation of GIF image on click and resume animation on second click but i have not idea about how to implement that in flutter. I am using asset image for that,

Image.asset('images/xyz.gif')

but problem is that image continuously animate. So, anyone have idea about that how to implement, please help me.


Solution

  • As far as I know, in Flutter, you can't use an Image widget to control a gif's speed, duration, looping et cetera.

    But I do know this library called flutter_gifimage that helps you do just so.

    Using it, you can control how the gif animates using something similar to an animation controller. Here's an example of what you can do with it:

    enter image description here

    Example usage:

    First declare a GifController and a GifImage which is basically an 'Image' with a controller.

    GifController controller= GifController(vsync: this);
    
    
         GifImage(
              controller: controller,
              image: AssetImage("images/animate.gif"),
         )
    

    Now you can control it just like any other Animation Controller:

    // loop from 0 frame to 29 frame
     controller.repeat(min:0,max:29,period:Duration(millseconds:300));
    
     // jumpTo thrid frame(index from 0)
     controller.value = 0;
    
     // from current frame to 26 frame
     controller.animateTo(26);