Unable to load Lottie.asset correctly

[huajiann]

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:

• Able to run lottie as expected.

Actual Result:

• One part of the lottie is missing.
• Getting: Exception caught by rendering library - Bad state: No element

Tested on:

• iOS Simulator: iPhone 15 Pro, iOS17.2
• Android Emulator: Pixel 3A XL, Android 9

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

Screen.Recording.2024-07-15.at.7.54.08.PM.mov

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<LottieComposition> ←
    LottieBuilder ← Center ← KeyedSubtree-[GlobalKey#929a3] ← _BodyBuilder ← MediaQuery ←
    LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← ⋯
  parentData: <none> (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.