I have a very simple animation for a splash screen of a shaking jar that I made in Adobe After Effects and exported it via LottieFiles extension as json, it works normal but every couple of times when I open the app the animation glitches (see pictures below), I can't figure it out and have tried searching for a solution without any success. The problem is the glitching happens random (sometimes it's a couple of times in row when I open app, sometimes it's every x times). This was tested on multiple android devices with same result.
Code for splash screen:
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: isDarkMode()? const Color(0xFF31302f) : const Color(0xFFfcfaf6),
body:
Align(
alignment: Alignment.topCenter,
child: Column(
children: [
SizedBox(height: height(context)*0.08),
Stack(
children: [
Image.asset(
isDarkMode()? 'assets/crnikruh.png' : 'assets/bijelikruh.png',
height: height(context)*0.3,
width: height(context)*0.3,
),
Padding(
padding: EdgeInsets.only(top: height(context)*0.01),
child: Lottie.asset(
'lottie/jaranimation.json',
width: height(context)*0.3,
height: height(context)*0.3,
frameRate: FrameRate.max,
fit: BoxFit.fill,
),
)
],
),
],
),
),
);
}
}
This is the animation with the problem
CodePudding user response:
I've found a workaround for this issue. It's not quite the solution but it works. So, I think the problem was it wasn't loading properly every time and the trick that helped me was that I wrapped the lottie asset with visibility widget and delayed the visibility by 50 milliseconds, so it got that extra 50 milliseconds on startup to properly load the asset.