How to display an animated picture in Flutter?

Question

I want to display an animated picture, whatever its format, in Flutter. The fact is that currently there seems to be only one solution available, video_loader. This works on

Answer 1

In order to run gif animation only once, there are 2 solutions.

First solution.

List<int> listGifDuration = [0,0,22,26,31,27,30,29,29,23,29,24,25,27,33,33,29,29];
List<int> listGifDurationDs = [0,0,1,0,0,0,0,0,0,0,0,0,0,0,5,2,5,0];
List<double> listGifFrames = [0,0,315,389,310,294,435,423,425,331,425,360,365,395,309,384,426,435];
strgif = "assets/gif/motion-all.gif"
fetchGif(AssetImage(strgif)).then((value)  {
 controller= GifController(vsync: this,duration: Duration(seconds: listGifDuration[widget.storyid]));
 controller.addListener(() => setState(() {}));
 TickerFuture tickerFuture = controller.repeat(min:0,max:listGifFrames[widget.storyid],period:Duration(seconds: listGifDuration[widget.storyid]));
              tickerFuture.timeout(Duration(seconds: listGifDuration[widget.storyid]), onTimeout:  () {
                controller.forward(from: 0);
                controller.stop(canceled: true);
              });
        });

2nd solution.

Convert the property of the gif file from the infinite loop to 1 loop.

Please use following link to convert gif file looping count.

https://ezgif.com/loop-count

and then

child: new Image.asset(strgif),

Answer 2

Now, Image widget Supports GIF. (April 18)

For Ex.

new Image(image: new AssetImage("assets/ajax-loader.gif"))

Answer 3

You can split the frames into separate images using https://ezgif.com/split and add them as assets in your pubspec.yaml.

Then use an Animation<int> to select the correct frame to display. Make sure to set gaplessPlayback: true to avoid flickering.

For example, the following code displays the frames of an animated GIF that was created by Guillaume Kurkdjian.

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      theme: new ThemeData.dark(),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State createState() => new MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<int> _animation;

  @override
  void initState() {
    _controller = new AnimationController(vsync: this, duration: const Duration(seconds: 5))
      ..repeat();
    _animation = new IntTween(begin: 0, end: 116).animate(_controller);
  }

  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new AnimatedBuilder(
            animation: _animation,
            builder: (BuildContext context, Widget child) {
              String frame = _animation.value.toString().padLeft(3, '0');
              return new Image.asset(
                'assets/frame_${frame}_delay-0.04s.png',
                gaplessPlayback: true,
              );
            },
          ),
          new Text('Image: Guillaume Kurkdjian', style: new TextStyle(fontStyle: FontStyle.italic)),
        ],
      ),
    );
  }
}