Search code examples
flutteranimationlottie

Flutter: Lottie animation displayed incorrectly

I am currently working for a project which requires me to implement an animation via lottie. For this, I have used this package: https://pub.dev/packages/lottie

The animation is not displayed correctly though.

This is my current code:

Lottie.asset(
      'assets/animations/testcomp.json',
      frameRate: FrameRate.max,
      repeat: true,
);

which produces this output:

The colors don't blend correctly

It should, however, look like this: https://lottiefiles.com/animations/testcomp-uuu8ikPIjO

I have not found anything regarding my problem in this list https://lottiefiles.com/supported-features

Solution

  • I was facing the same problem and even tried to get the animation to work with the original Lottie animation package on a Swift-based demo app. But I was facing the same issue with the animation as in the Swift-based demo app.

    It has turned out that the blending mode was the problem. So I tried masking the animation, with a so-called "track matte" which is actually supported (according to Lottie).

    However, I still faced the same issue. I have now given the layer its own mask, and it's working now. Took me a few weeks, but that's the solution for me for both, Flutter and Swift.