in , ,

Simple widget for animating a set of images with full custom controls with flutter


For animating a set of images with full custom controls as an alternative to using a GIF file, this simple widget will help you.

To fully understand and inspect the full range of capabilities that can appear, reading the documentation and running the sample project on a real device are highly encouraged.

This simple widget for animating a set of images (a.k.a an image sequence) as an alternative to using a GIF file, it comes with full custom controls.

As far as I’m aware, GIF files are not controllable. However, you will have full control over your image sequence like controlling a video with this package. You can loop, boomerang, change the color, play, pause, stop, skip, rewind, restart, and more.


First, add your image sequence to your assets and update the “pubspec.yaml” accordingly.

Then create an ImageSequenceAnimator widget as shown in the example:

  "assets/ImageSequence",   //folderName 
  "Frame_",                 //fileName
  0,                        //suffixStart
  5,                        //suffixCount 
  "png",                    //fileFormat 
  60,                       //frameCount
 {Key key,
  fps               : 60,
  isLooping         : false,
  isBoomerang       : false,
  isAutoPlay        : true,
  color             : Colors.white,
  onReadyToPlay     : _onReadyToPlay,
  onStartPlaying    : _onStartPlaying,
  onPlaying         : _onPlaying,
  onFinishPlaying   : _onFinishPlaying})
void _onReadyToPlay(ImageSequenceAnimatorState _imageSequenceAnimator);
void _onStartPlaying(ImageSequenceAnimatorState _imageSequenceAnimator);
void _onPlaying(ImageSequenceAnimatorState _imageSequenceAnimator);
void _onFinishPlaying(ImageSequenceAnimatorState _imageSequenceAnimator);  

Further Explanations:

For a complete set of descriptions for all parameters and methods, see the documentation.

  • [isLooping] will override [isBoomerang] if both are set to true.
  • All [ImageSequenceProcessCallback] callbacks will return a reference to the created [ImageSequenceAnimator] state. You can save this instance for
    further actions.
  • Use [ImageSequenceAnimatorState]’s
    [void setIsLooping(bool isLooping)], [void setIsBoomerang(bool isBoomerang)], [void setColor(Color color)], [void play({double from: -1.0})],
    [void rewind({double from: -1.0})], [void pause()], [void skip(double value, {double percentage: -1.0})], [void restart()], [void stop()]
    methods for the corresponding actions.
  • Use [ImageSequenceAnimatorState]’s [double get currentTime] and [double get totalTime] methods to get the respective values.


Written by James

Used in video production from still imagery, a type of panning and zooming effect appeared

A free image video viewing App developed using flutter