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.15k stars 197 forks source link

Lottie file renders correctly on mobile, but not on web. #273

Closed EmersonPinheiro closed 1 year ago

EmersonPinheiro commented 1 year ago

Hello there!

I'm trying to render a Lottie from a JSON file on the web, but an error is thrown. It may be something about the JSON file itself since I have another file that works, but unfortunately, I can't share it here since it is a private file.

On mobile, the file works fine. And also works correctly in this playground.

I'm using the canvaskit web-renderer as the docs suggest.

Here is the error:

The following IndexError was thrown during paint():
RangeError (index): Index out of range: index must not be negative: -1

The relevant error-causing widget was:
  RawLottie
  RawLottie:file:///Users/emersonsilva/.pub-cache/hosted/pub.dev/lottie-2.3.1/lib/src/lottie.dart:377:16

When the exception was thrown, this was the stack:
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 266:49      throw_
dart-sdk/lib/_internal/js_dev_runtime/private/js_array.dart 581:7                 _get]
packages/lottie/src/animation/content/rounded_corners_content.dart 193:25         [_getShapeData]
packages/lottie/src/animation/content/rounded_corners_content.dart 71:29          modifyShape
packages/lottie/src/animation/keyframe/shape_keyframe_animation.dart 27:45        getValue
packages/lottie/src/animation/keyframe/base_keyframe_animation.dart 122:15        get value
packages/lottie/src/animation/content/shape_content.dart 72:31                    getPath
packages/lottie/src/animation/content/fill_content.dart 115:29                    draw
packages/lottie/src/animation/content/content_group.dart 177:16                   draw
packages/lottie/src/animation/content/content_group.dart 177:16                   draw
packages/lottie/src/model/layer/shape_layer.dart 31:19                            drawLayer
packages/lottie/src/model/layer/base_layer.dart 196:7                             draw
packages/lottie/src/model/layer/composition_layer.dart 105:12                     drawLayer
packages/lottie/src/model/layer/base_layer.dart 196:7                             draw
packages/lottie/src/lottie_drawable.dart 168:23                                   draw
packages/lottie/src/render_lottie.dart 214:5                                      paint
packages/flutter/src/rendering/object.dart 2853:7                                 [_paintWithContext]
packages/flutter/src/rendering/object.dart 253:12                                 paintChild
packages/flutter/src/rendering/proxy_box.dart 144:14                              paint
packages/flutter/src/rendering/object.dart 2853:7                                 [_paintWithContext]
packages/flutter/src/rendering/object.dart 169:10                                 _repaintCompositedChild
packages/flutter/src/rendering/object.dart 112:5                                  repaintCompositedChild
packages/flutter/src/rendering/object.dart 1137:31                                flushPaint
packages/flutter/src/rendering/binding.dart 518:19                                drawFrame
packages/flutter/src/widgets/binding.dart 865:13                                  drawFrame
packages/flutter/src/rendering/binding.dart 381:5                                 [_handlePersistentFrameCallback]
packages/flutter/src/scheduler/binding.dart 1289:15                               [_invokeFrameCallback]
packages/flutter/src/scheduler/binding.dart 1218:9                                handleDrawFrame
packages/flutter/src/scheduler/binding.dart 1076:5                                [_handleDrawFrame]
lib/_engine/engine/platform_dispatcher.dart 1168:13                               invoke
lib/_engine/engine/platform_dispatcher.dart 218:5                                 invokeOnDrawFrame
lib/_engine/engine/initialization.dart 190:45                                     <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 367:37  _checkAndCall
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 372:39  dcall

The following RenderObject was being processed when the exception was fired: RenderLottie#dce2f relayoutBoundary=up4:
  creator: RawLottie ← AnimatedBuilder ← RepaintBoundary ← Lottie ← FutureBuilder<LottieComposition> ←
    LottieBuilder ← HImageAnimationWidget ← HImage ← ColoredBox ← Container ← Builder ← Builder ← ⋯
  parentData: <none> (can use size)
  constraints: BoxConstraints(0.0<=w<=388.0, 0.0<=h<=842.0)
  size: Size(80.0, 80.0)
  composition:
    LottieComposition:
        Smile
                Shapes:
                        ShapeGroup{name: 'Ellipse 4252' Shapes: [Instance of 'CircleShape', Instance of 'ShapeStroke',
    Instance of 'AnimatableTransform']}
                        Trim Path: {start: values=[Keyframe{startValue=0, endValue=0, startFrame=5e-324,
    endFrame=1.7976931348623157e+308, interpolator=null}], end: values=[Keyframe{startValue=25,
    endValue=50, startFrame=0, endFrame=40, interpolator=PathInterpolator}, Keyframe{startValue=50,
    endValue=50, startFrame=40, endFrame=60, interpolator=PathInterpolator}, Keyframe{startValue=50,
    endValue=25, startFrame=60, endFrame=80, interpolator=PathInterpolator}], offset:
    values=[Keyframe{startValue=-135, endValue=-135, startFrame=5e-324,
    endFrame=1.7976931348623157e+308, interpolator=null}]}
        Eye
                Shapes:
                        ShapeGroup{name: 'Star 56' Shapes: [ShapePath{name=Path 1, index=0}, Instance of
    'RoundedCorners', ShapeFill{color=, fillEnabled=false}, Instance of 'AnimatableTransform']}
        Eye
                Shapes:
                        ShapeGroup{name: 'Star 55' Shapes: [ShapePath{name=Path 1, index=0}, Instance of
    'RoundedCorners', ShapeFill{color=, fillEnabled=false}, Instance of 'AnimatableTransform']}
  alignment: Alignment.center
This RenderObject has no descendants.

Any help on how to solve this would be appreciated. Thanks in advance.

xvrh commented 1 year ago

@EmersonPinheiro I can have a look but I really need the file. Can you send it to me privately?

EmersonPinheiro commented 1 year ago

Yeah, this I can do. Would you share your e-mail, please? So I can send you an attachment.

xvrh commented 1 year ago

-

EmersonPinheiro commented 1 year ago

Thanks! Just sent the file to you.

xvrh commented 1 year ago

@EmersonPinheiro it should be fixed in v2.3.2. Let me know if you have a problem.

EmersonPinheiro commented 1 year ago

It is working now. Thank you!