Home > front end >  Lottie animation glitch - Flutter
Lottie animation glitch - Flutter

Time:10-23

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 normal view

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.

  • Related