search

xvrh / lottie-flutter

Render After Effects animations natively on Flutter. This package is a pure Dart implementation of a Lottie player.
https://pub.dev/packages/lottie
MIT License
1.17k stars 200 forks source link

Unable to load Lottie.asset correctly #368

Open huajiann opened 3 months ago

huajiann commented 3 months ago

The bug

Greetings, I am unable to load this specific lottie animation correctly. However, I was able to preview it without any issue on this website.

Steps to reproduce

  1. Run the sample code.
  2. Observe device and logs.

Expected result:

Actual Result:

Tested on:

Code Sample

Code sample ``` import 'package:flutter/material.dart'; import 'package:lottie/lottie.dart'; void main() { runApp(const MainApp()); } class MainApp extends StatelessWidget { const MainApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Lottie.asset('assets/lottie_disc_spinning.json', repeat: false), ), ), ); } } ```

Video/Screenshot

Video showcase
Expected lottie outcome

Logs

Flutter Logs ``` ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ The following StateError was thrown during paint(): Bad state: No element The relevant error-causing widget was: RawLottie RawLottie:file:///Users/user/.pub-cache/hosted/pub.dev/lottie-3.1.2/lib/src/lottie.dart:442:16 When the exception was thrown, this was the stack: #0 List.first (dart:core-patch/growable_array.dart:343:5) #1 PathKeyframeAnimation.getValue (package:lottie/src/animation/keyframe/path_keyframe_animation.dart:35:53) #2 BaseKeyframeAnimation.value (package:lottie/src/animation/keyframe/base_keyframe_animation.dart:122:15) #3 TransformKeyframeAnimation.getMatrix (package:lottie/src/animation/keyframe/transform_keyframe_animation.dart:97:35) #4 BaseLayer.getBounds (package:lottie/src/model/layer/base_layer.dart:170:38) #5 ImageLayer.getBounds (package:lottie/src/model/layer/image_layer.dart:41:29) #6 BaseLayer.draw (package:lottie/src/model/layer/base_layer.dart:202:18) #7 CompositionLayer.drawLayer (package:lottie/src/model/layer/composition_layer.dart:104:13) #8 BaseLayer.draw (package:lottie/src/model/layer/base_layer.dart:195:7) #9 LottieDrawable.draw (package:lottie/src/lottie_drawable.dart:236:25) #10 RenderLottie.paint (package:lottie/src/render_lottie.dart:268:16) #11 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3239:7) #12 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:250:13) #13 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:130:13) #14 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3239:7) #15 PaintingContext._repaintCompositedChild (package:flutter/src/rendering/object.dart:166:11) #16 PaintingContext.repaintCompositedChild (package:flutter/src/rendering/object.dart:109:5) #17 PipelineOwner.flushPaint (package:flutter/src/rendering/object.dart:1182:31) #18 PipelineOwner.flushPaint (package:flutter/src/rendering/object.dart:1192:15) #19 RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:579:23) #20 WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:1138:13) #21 RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:443:5) #22 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1392:15) #23 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1313:9) #24 SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:1171:5) #25 _invoke (dart:ui/hooks.dart:312:13) #26 PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:419:5) #27 _drawFrame (dart:ui/hooks.dart:283:31) The following RenderObject was being processed when the exception was fired: RenderLottie#c18b3 relayoutBoundary=up3: creator: RawLottie ← AnimatedBuilder ← RepaintBoundary ← Lottie ← FutureBuilder ← LottieBuilder ← Center ← KeyedSubtree-[GlobalKey#929a3] ← _BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← ⋯ parentData: (can use size) constraints: BoxConstraints(0.0<=w<=393.0, 0.0<=h<=852.0) size: Size(114.0, 162.0) composition: LottieComposition: hiAsset 3@4x 1 (Border) Shapes: ShapePath{name=, index=0} Instance of 'ShapeStroke' hiAsset 3@4x 1 (Mask) Shapes: ShapeGroup{name: '' Shapes: [ShapePath{name=, index=0}, ShapeFill{color=, fillEnabled=false}, Instance of 'AnimatableTransform']} hiAsset 3@4x 1 Rectangle 24020 (Border) Shapes: ShapePath{name=, index=0} Instance of 'ShapeStroke' Rectangle 24020 (Mask) Shapes: ShapeGroup{name: '' Shapes: [ShapePath{name=, index=0}, ShapeFill{color=, fillEnabled=false}, Instance of 'AnimatableTransform']} Rectangle 24020 alignment: Alignment.center This RenderObject has no descendants. ```

Flutter Doctor output

Flutter Doctor ``` [✓] Flutter (Channel stable, 3.22.0, on macOS 13.6.1 22G313 darwin-arm64, locale en-MY) [✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1) [✓] Xcode - develop for iOS and macOS (Xcode 15.2) [✓] Chrome - develop for the web [✓] Android Studio (version 2022.3) [✓] Android Studio (version 2022.1) [✓] VS Code (version 1.91.1) [✓] Connected device (6 available) [✓] Network resources • No issues found! ```

Affected Lottie

lottie_disc_spinning.json

Thanks in advance for the help.

iquirino commented 1 month ago

Mee too, all animations look different than the website.

+1