CODEWITHSUNDEEP
dartflutter
Rémi Rousselet
Rémi Rousselet

Reputation: 277037

How to display an animated picture in Flutter?

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 only on full screen, but it doesn't fit my use case.

Any idea on how I could sort this out?

Upvotes: 29

Views: 34611

Answers (5)

Sanju Bhatt
Sanju Bhatt

Reputation: 1142

We can use Image widget to load any type of image whether it is a normal image or the gif.

We can load them from our asset as well as from network with the help of Image widget

Image.asset('name');
Image.file(file);
Image.memory(bytes);
Image.network('src');

There are some dependency for load the gif also

Upvotes: 0

Shubhamhackz
Shubhamhackz

Reputation: 7973

2021 Update

As of now flutter does supports playing gif files using the Image widget.

Image.asset('assets/logo.gif')

But there's a problem with current way of loading gif in flutter. The gif plays in a loop and you can't stop the gif after playing it once. There are other ways of showing animated pictures using Rive and Lottie and both of them comes with a pretty well maintained flutter package that gives lots of features out of the box.

Workaround :

  1. Convert your gif to mp4 (Gif to mp4)
  2. Convert mp4 to Lottie json (Mp4 to Json)
  3. Upload your Lottie json to lottiefiles.com or add to your assets folder
  4. Use Lottie package to load your animation

Example from Lottie package docs :

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView(
          children: [
            // Load a Lottie file from your assets
            Lottie.asset('assets/LottieLogo1.json'),

            // Load a Lottie file from a remote url
            Lottie.network(
                'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json'),

            // Load an animation and its images from a zip file
            Lottie.asset('assets/lottiefiles/angel.zip'),
          ],
        ),
      ),
    );
  }
}

For sure this is not the most ideal way of loading a gif as this is just a workaround. You can simply use an Image widget if you're not doing much with your gif. But if you will use Lottie then you get lots of things that you can do with your gif with much more control.

Upvotes: 6

persec10000
persec10000

Reputation: 1065

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

Upvotes: 1

UpaJah
UpaJah

Reputation: 7334

Now, Image widget Supports GIF. (April 18)

For Ex.

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

Upvotes: 52

Collin Jackson
Collin Jackson

Reputation: 116728

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)),
        ],
      ),
    );
  }
}

Upvotes: 42

Related Questions