Question 364291 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter: Lottie file crashes

Problem: The Lottie files that I downloaded do not show properly.

Details:

This is a screenshot when I run the code:
image_result of the code

And the actual image should be like this:
image_actual image

Code:

Container(
  width: MediaQuery.of(context).size.width,
  height: MediaQuery.of(context).size.height * 0.43,
  // color: Colors.red,
  child: Lottie.asset('assets/lottie/morning.json', width: 300, height: 300, fit: BoxFit.fill),
)

Package: Lottie: ^3.1.0

I don’t know why this is happening.

  • I have tried changing the size of the Container, or Lottie asset size.
Container(
   width: MediaQuery.of(context).size.width,
   height: MediaQuery.of(context).size.height * 0.43,
   color: Colors.red,
   child: Lottie.asset("assets/lottie/morning.json", fit: BoxFit.fitWidth),
),

I have also eliminated the size of the Lottie asset size, but still the file crashes.
Some file doesn’t have this kind of issue.
example

I think the code has no problem.
Is there a regulation while downloading Lottie free animation files?

Tags:

2

Answers


  1. 0

    Ensure that the width and height properties of the Container widget (300 in your case) are suitable for displaying the Lottie animation correctly. You might need to adjust these values based on the size of your animation.The BoxFit property determines how the image is fitted into the available space. In your case, you’ve set it to BoxFit.fill, which means the image will be resized to fill the available space while maintaining its aspect ratio. You might want to try different BoxFit values like contain, cover, or fitWidth to see if they produce the desired result.

    Edit

    For my part, I tried running the animation you have used in an android emulator. It worked well. I think the problem is not in your code. If you are using IOS,I think this animation is not supported. Please refer to this document.

    Login or Signup to reply.
  2. 0

    Set width and height for your Container. If it not work, add properties BoxFit

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search