Lottie files not showing/rendering properly in flutter

Question

When using Lottie files on flutter, it seems to change the way it looks.

Container(
  child: Lottie.asset('assets/animations/location_lottie.json'),
)

This is how its supposed to look:

This is how it turned out in the app:

Tried downgrading lottie, tried with different files, but it's just like that only..

Answer 1

To everyone facing the similar issue, it has already been raised in github and the problem basically occurs due to issue with the rendering of the lottie files. The rendering issue arises when you choose a custom color for the lottie file.

So, I've just found a temporary workaround for the issue, the issue basically arises whenever you're using a custom-colored JSON file. Instead, download the original file, and manually edit the JSON file to change the color.

How to edit:

In a lottie file this is how color is structured in a lottie file:

{
"ty": "fl",
"nm": "Fill",
"o": {
    "a": 0,
    "k": 100
},
"c": {
    "a": 0,
    "k": [
        0.710,
        0.192,
        0.278
    ]
},
"r": 1

• So, open the json in your code editor and find the "Fill" objects within the "shapes" section of each shape group. These objects define the fill color for each shape.

• Within each "Fill" object, locate the "c" property, which represents the color. It will be an array of RGB values expressed as fractions between 0 and 1.

• Modify the RGB values to change the color. For example, if you want to change the color to red, you can set the RGB values to [1, 0, 0]. If you want to change it to blue, you can set the RGB values to [0, 0, 1].

• If you notice the value of rgb will be all values less than, so to achieve a color, for eg:- RGB(207, 248, 11, 1), you gotta divide each value by 255: R: 207 / 255 ≈ 0.8118 G: 248 / 255 ≈ 0.9725 B: 11 / 255 ≈ 0.0431

• You got to apply it to each color that you want to change and then just use the file.

The above steps actually worked for me, thanks to gpt for breaking the json down.