CODEWITHSUNDEEP
flutterdartflutter-layoutflutter-animationflutter-image
Kaushik Bhingradiya
Kaushik Bhingradiya

Reputation: 907

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.

Upvotes: 5

Views: 9114

Answers (2)

Mahboob Ahmed
Mahboob Ahmed

Reputation: 175

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();

Upvotes: 2

Wilson Wilson
Wilson Wilson

Reputation: 3737

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);

Upvotes: 7

Related Questions