The lottie files downloaded from lottiefiles can not render

[OpenJarvisAI]

Why??

[Domestositos]

A similar problem occurs when using Lottie.asset. The animation I'm using: https://lottie.host/34058a8b-b777-412c-9dd2-dcd31d035e2b/Dt6WZU5Wu7.json Expected Outcome: What's happening:

The lottie version: lottie: ^3.1.0

[tkc-alien]

Same issue.

My Flutter version is 3.19.5, lottie is 3.1.0 (and I also tried 2.7.0 with the same results).

Expected: https://lottiefiles.com/animations/restaurant-website-pre-loader-YposeqGL8Q

But rendered:

[huangfengjing]

me too!

lottie: ^3.1.0

Flutter 3.19.5 • channel stable • https://github.com/flutter/flutter.git Framework • revision 300451adae (3 weeks ago) • 2024-03-27 21:54:07 -0500 Engine • revision e76c956498
Tools • Dart 3.3.3 • DevTools 2.31.1

[xvrh]

Can anyone provide a reproducible example?

• A link to the json file
• A minimal dart program (to see the parameters used).
• The flutter version used
• Whether this is in release, profile or debug mode
• Whether this on a native app or a web app
• The list of phone models were this is reproduced

I've tried the example from here https://github.com/xvrh/lottie-flutter/issues/342#issuecomment-2050635816 on 5 differents phones and various flutter version but it doesn't reproduce. So there is something I'm missing.

[Abdo-Nabil]

• JSON File Link

• Minimal Dart Program:

  
  import 'package:flutter/material.dart';
  import 'package:lottie/lottie.dart';

class CustomCircularProgressIndicator extends StatelessWidget { final Color? color; const CustomCircularProgressIndicator({this.color, Key? key}) : super(key: key);

@override Widget build(BuildContext context) { return Center( child: Lottie.asset( "assets/jsons/loading_animation2.json", height: 100, width: 100, ), ); } }

- Flutter Version Used:

Flutter 3.19.5 • channel stable • https://github.com/flutter/flutter.git Framework • revision 300451adae (4 weeks ago) • 2024-03-27 21:54:07 -0500 Engine • revision e76c956498
Tools • Dart 3.3.3 • DevTools 2.31.1

- lottie: ^3.1.0
- In debug mode
- In native flutter app (in android, I didn't test on IOS)

Phones:
- Realme 11 (Android 13) as a physical device
- Emulator (API 30)

@xvrh 

[xvrh]

@Abdo-Nabil thanks. Can you put the .json link or directly the json content here. That lottiefiles link doesn't work for me.

[Abdo-Nabil]

loading_animation2.json

@xvrh

[xvrh]

@Abdo-Nabil your animation indeed renders incorrectly compared to the web version. But it also render badly on the native iOS Lottie library and Android Lottie library (I tested on the Lottie and Lottiefiles app from the stores). My guess is that your animation uses some features that are not supported by all runtimes: https://lottiefiles.com/supported-features.

[Abdo-Nabil]

@xvrh Thanks for your interest, so the problem in some of the animations that are not fully supported by the package....right?

[xvrh]

@Abdo-Nabil in your case, yes. This Flutter library but also the Android and iOS library.

[OpenJarvisAI]

My case looks like not, the json without color modification works normal, but changed color abnormal

[Domestositos]

JSON code in default animation and JSON code in animation with changed color or other parameters are very different. It is quite possible that during editing functions that are not supported by the package are added to the code. JSON default: lottie default.json JSON with changed color: lottie with changed color.json

[mendoxe]

I have the exact same issue, any updates?

[Abdo-Nabil]

@mendoxe May be you need to select another animation

[mendoxe]

I have tried 6 files and 2 dotfiles, all of them have the same problem (they look distorted).

No settings applied

LottieBuilder.asset(_selectedCategory.lottie)

Lottie: 3.1.0

flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 3.19.6, on macOS 14.4.1 23E224 darwin-arm64, locale en-US) [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) [✓] Xcode - develop for iOS and macOS (Xcode 15.3) [✓] Chrome - develop for the web [✓] Android Studio (version 2023.1) [✓] VS Code (version 1.88.1) [✓] Connected device (5 available)

@Abdo-Nabil

[afradahsan]

I'm also facing a similar issue.

Expected output:

Output on flutter app:

I'm using an android emulator (not working on a physical device as well). Currently on the latest version of flutter. Tried downgrading the lottie package but didn't work.

If anyone has got a solution/workaround, please share.

[Domestositos]

@Abdo-Nabil in your case, yes. This Flutter library but also the Android and iOS library.

Is work underway to address this issue?

[afradahsan]

Guys, 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: { "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.

[hmartiins]

Same issue!

[BerviFix]

@xvrh same issue..

link to animation: https://lottiefiles.com/animations/astronaut-SnSmusJfcE?from=search

and this is my env:

• debug mode
• android and ios emulator same issue

I tried downloading other Lottie files randomly, all with the same problem.

[xvrh]

@BerviFix I downloaded this animation and tried it on 3 different phone (iOS and Android). The result looks correct everywhere.

Could it be that you use the "optimized" format of lottiefiles or somethink like that?

Can you post the json file here?

[BerviFix]

@xvrh this is the json, i use the lottie json not optimized version. astronaut.json

I made a video for you where I show you that I download a random Lottie file and it still doesn't work. this is the video: https://www.youtube.com/watch?v=RQ4_FjBolN8

[xvrh]

@BerviFix I think there is something wrong with the "Color palette" selector. Can you try some animations without the color palette?

[BerviFix]

@xvrh same issue with default color palette

new video with random lottie and without color palette selected: https://www.youtube.com/watch?v=domqVrsmGns

If you prefer, link a Lottie file and I'll show you that it continues to have this problem. I've tried dozens of random Lottie files and they all have the same problem. I can't use this library, mate!

[xvrh]

@BerviFix that last video is a different problem. The envelope animation you showed is not supported. It prints the warning Lottie doesn't support 3D layers.

In your previous example with the astronaut. Here is the file I downloaded: Animation - 1716750418960.json

and it works perfectly on Android & iOS. As you can try with:

Lottie.network('https://github.com/xvrh/lottie-flutter/files/15448625/Animation.-.1716750418960.json')

I think lottiefiles is altering the file somehow and make it erroneous in mobile libraries. I try to understand which setting is causing this.

[BerviFix]

@xvrh thanks for your help.

Using Lottie.network all lotties works fine, when i try the json file still issue

[xvrh]

@BerviFix I still think that the problem is not about network vs asset.

I think lottiefiles.com applies some erroneous modifications to the file before the download.

[famasf1]

Guys, 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: { "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.

This workaround actually work. Thank you!

Useful link for anyone who urgently need this solution. It will automatically divide RGB color for you. : https://www.rapidtables.com/convert/color/hex-to-rgb.html

Yeah i believe Lottie did something to the file if you set custom color palette instead of using default value. Took me way too long to realize that my search filter basically applied custom color palette automatically if you set it on something atleast once in your workspace.

[itdevpel]

How do you unselect the color palette. There are multiple color palettes present, which one is the default one? I've not created my own. And with any of those color palettes selected the issue doesn't go away. Anyone else?

This is a genuine issue, and we can't use this package at all, when we actually need to.

[feardriven]

Same issue here - with multiple lottie files :-/ Something is going on with Lottie, even when I export it as a gif, mov, mp4, etc ... the files are corrupt. A file that will work as json, will also work as gif, mov, mp4, etc ... and vice versa.

[xvrh]

It seems other renderer come to the same conclusion. This is a problem with the lottiefile.com exporter: https://github.com/airbnb/lottie-ios/issues/2345 and https://github.com/airbnb/lottie-android/issues/2508

[feardriven]

Since last week I do have a chat with some of the Lottie-Team about this issue ...

They already know about this issue. Also, that their server-side export rendering is broken for SMALL and MEDIUM export. Only LARGE will give you a proper .mov, .mp4, .gif, ...

_"Unfortunately, the current limitations of the converter (because of the unsupported features used) prevent it from generating a proper export in small sizes.

Rest assured, we acknowledge this issue and are actively enhancing our export tool for better functionality. In the meantime, utilizing the large resolution option should serve as a viable temporary workaround."_

Sadly there is no method to know, what lottie file make use of that "unsupported feature" and which don't.

[TheAllR117]

A more efficient solution for now:

1. Download the original file: Download the original JSON file of the Lottie animation without modifying the color palette.
2. Open the file in a text editor: Open the downloaded file in a text editor and copy all the content.
3. Access the JSON editor: Open the following page: https://lottiefiles.github.io/lottie-docs/playground/json_editor/
4. Paste the content: Paste the copied content into the page editor.
5. Prettify JSON: Click File > Prettify JSON (this step is only to better view the content).
6. Search and change colors: Search for the colors you want to change; these are easy to identify in the JSON.
7. Replace content: Once the colors have been changed, copy the modified content and replace the content of the downloaded JSON file.

[TheAllR117]

How do you unselect the color palette. There are multiple color palettes present, which one is the default one? I've not created my own. And with any of those color palettes selected the issue doesn't go away. Anyone else?

This is a genuine issue, and we can't use this package at all, when we actually need to.

If you select a color palette, a reset button will appear, this way you restore the colors to the original.