Flutter - Play 2 or more Lottie files in sequence - flutter

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.

Answer 1

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();
});
});

Answer 2

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