Flutter how to know if GIF done animated without looping

Question

How to know if GIF done playing? I want to build another widget and call a function but after the GIF done animated once. Is there anyway to achieve this?

Scaffold(
  body: Container(
    constraints: const BoxConstraints.expand(),
    child: const Image(
      image: AssetImage(
        "images/splas_screen.GIF",
      ),
      fit: BoxFit.fill,
      
    ),
  ),
);

This is currently how I display the GIF because I still have no idea how to play the GIF only once without looping and call a function after.

Answer 1

You can use flutter_gif and set repeat property to ImageRepeat.noRepeat, like this:

GifImage(image:AssetImage("images/splas_screen.GIF"), controller: controller,repeat:ImageRepeat.noRepeat ),

This is a full example of what you need:

class TestAnimation extends StatefulWidget {
  const TestAnimation({super.key});

  @override
  State<TestAnimation> createState() => _TestAnimationState();
}

class _TestAnimationState extends State<TestAnimation>
    with TickerProviderStateMixin {
  late FlutterGifController controller;
  @override
  void initState() {
    super.initState();
    controller = FlutterGifController(vsync: this);
    controller.animateTo(10, duration: Duration(milliseconds: 300)); // Note that animate to your last frame of your animation, here mine is 10.
    controller.addListener(() {
      if (controller.isCompleted) {
        print("compleate");
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Testing")),
      body: Column(
        children: [
          GifImage(
            image: AssetImage("assets/images/Pivot_Wave.gif"),
            controller: controller,
            repeat: ImageRepeat.repeat,
          ),
        ],
      ),
    );
  }
}

Update The flutter_gif no longer supported, so you can use gif_view and use onFinish property to know when it finished, like this:

class TestAnimation extends StatefulWidget {
  const TestAnimation({super.key});

  @override
  State<TestAnimation> createState() => _TestAnimationState();
}

class _TestAnimationState extends State<TestAnimation> {
  var controller = GifController();

  @override
  void initState() {
    super.initState();
    controller = GifController(
     loop: false,
     onFinish: () {},// do what ever you want when gif finished
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Testing")),
      body: Column(
        children: [
          GifView.asset(
             "assets/images/Pivot_Wave.gif",
             controller: controller,
             height: 400,
             width: 300,
          ),
        ],
      ),
    );
  }
}