5

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.

2 Answers 2

7

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);
3
  • its showing empty gif for me
    – minato
    Commented Aug 24, 2022 at 11:31
  • 1
    @minato somthing broke in recent Flutter versions.
    – Hitesh
    Commented Sep 15, 2022 at 12:09
  • 1
    This package can be considered outdated now, unfortunately. It doesn't even support null-safety. Commented Jun 5, 2023 at 23:00
1

The Plugin mentioned by @Wilson is not supported now. This is the latest solution I found which works for all platforms including Web. plugin link

 GifView.network(
  'https://www.showmetech.com.br/wp-content/uploads/2015/09/happy- 
   minion-gif.gif',
   height: 200,
   width: 200,
   controller: controller,   
),

Controller:

GifController controller = GifController({
  this.autoPlay = true,
  this.loop = true,
  bool inverted = false,
  this.onStart,
  this.onFinish,
  this.onFrame,
});
controller.play({bool? inverted, int? initialFrame});

controller.pause();

controller.stop();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.