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 #342 (comment) 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!