Flutter - Play 2 or more Lottie files in sequence

Question

I want to play to 2 Lottie files in sequence, i.e. after one Lottie has completed its animation it should play the second Lottie file.

I tried to achieve this by adding a statuslistener (via AnimationController) to the Lottie widget and calling setstate() on the asset file after first Lottie has completed its animation. It did work but there was a lag while switching to the next Lottie file.

void statusListener(AnimationStatus status) {
    if (status == AnimationStatus.completed) {
      setState(() {
        asset = asset2;
      });
      controller.reset();
      controller.forward();
    }
  }

Can anyone help me figure it out? Thanks.

You can achieve this by creating function as well, When first Lottie is completed at that time call second function which include second Lottie animation code — Aamil Silawat, Jan 09 '21 at 05:07
@AR Yes, I've tried that. The lag issue still persists as I've to replace the Lottie widget. — Nithish Naidu, Jan 09 '21 at 06:14

score 0 · Answer 1 · answered Jun 09 '21 at 09:28

Define two different controller for both the animations. then play the first animation and hide the second animation for now. After the first animation gets completed, hide it through visibility. for example :

Visibility(
  child: Text("Gone"),
  visible: false,
),

Refer this for more detail : stackoverflow : how to hide widget programmatically

then play the second animation and hide the first animation. for the time delay, use Future.delayed. this will execute the code after specific time which you chosed. example : Let's say your first animation completes in 2 seconds then, you will play the next animation after 2 seconds so that you will execute the next line of code after 2 seconds.

Future.delayed(const Duration(seconds: 2), () {
                        setState(() {
                          _controller.forward();
                        });
                      });

score 0 · Answer 2 · answered Aug 21 '22 at 18:39

There is an example in the lottie repo.

I effectively spent an entire day figuring out a solution, so posting this to calm the mind.

Repo Example that plays many different lottie files in sequence:

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

class App extends StatefulWidget {
  const App({Key? key}) : super(key: key);

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> with TickerProviderStateMixin {
  int _index = 0;
  late final AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(vsync: this)
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          setState(() {
            ++_index;
          });
        }
      });
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      color: Colors.lightBlue,
      home: Scaffold(
        backgroundColor: Colors.lightBlue,
        appBar: AppBar(
          title: Text('$_index'),
        ),
        body: SingleChildScrollView(
          child: Center(
            child: Column(
              children: [
                Lottie.asset(files[_index % files.length],
                    controller: _animationController, onLoaded: (composition) {
                  _animationController
                    ..duration = composition.duration
                    ..reset()
                    ..forward();
                }),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Flutter - Play 2 or more Lottie files in sequence

2 Answers2