DEVHIDE
Login Or Sign up

Rive animation taking too long to load with RangeError (index): Invalid value: The valid value range is empty: 0

139 Views Asked by At

Create an empty project and load the below file using the

all_animations.riv

Code :


class _MyHomePageState extends State<MyHomePage> {
  Artboard? _riveArtBoard;
  StateMachineController? _controller;

  @override
  void initState() {
    _initArtBoard();
    super.initState();
  }

  Future<void> _initArtBoard() async {
    if (_riveArtBoard == null) {
      final riveByteData = await rootBundle.load("assets/rive/all_animations.riv");
      RiveFile riveFile = RiveFile.import(riveByteData);
      _riveArtBoard = riveFile.mainArtboard;
    }

    _controller = StateMachineController.fromArtboard(_riveArtBoard!, 'buddy-V2') as StateMachineController;

    _controller!.isActive = true;
    _riveArtBoard!.addController(_controller!);

    if (mounted) {
      setState(() {});
    }
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Rive Animation"),
      ),
      backgroundColor: Colors.white,
      body: _riveArtBoard == null
          ? const Center(
              child: CupertinoActivityIndicator(
                color: Colors.black,
              ),
            )
          : Rive(
              artboard: _riveArtBoard!,
              fit: BoxFit.contain,
              useArtboardSize: true,
            ),
    );
  }
}

LogCat:

The following RangeError was thrown during paint():
RangeError (index): Invalid value: Valid value range is empty: 0

The relevant error-causing widget was: 
  Rive Rive:file:///Users/Downloads/new_animation/lib/views/animated_eyes_view.dart:347:26
When the exception was thrown, this was the stack: 
#0      List.[] (dart:core-patch/growable_array.dart:264:36)
#1      Text._buildRenderStyles (package:rive/src/rive_core/text/text.dart:264:41)
#2      Text.update (package:rive/src/rive_core/text/text.dart:558:7)
#3      Artboard.updateComponents (package:rive/src/rive_core/artboard.dart:153:21)
#4      Artboard.advance (package:rive/src/rive_core/artboard.dart:213:9)
#5      RiveRenderObject.advance (package:rive/src/rive.dart:258:17)
#6      RiveRenderBox.paint (package:rive/src/rive_render_box.dart:353:10)
#7      RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3208:7)
#8      PaintingContext.paintChild (package:flutter/src/rendering/object.dart:250:13)
#9      RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#10     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3208:7)
#11     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:250:13)
#12     RenderBoxContainerDefaultsMixin.defaultPaint (package:flutter/src/rendering/box.dart:2882:15)
#13     RenderFlex.paint (package:flutter/src/rendering/flex.dart:1040:7)
#14     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3208:7)
#15     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:250:13)
#16     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#17     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3208:7)
#18     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:250:13)
#19     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#20     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3208:7)
#21     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:250:13)
#22     RenderBoxContainerDefaultsMixin.defaultPaint (package:flutter/src/rendering/box.dart:2882:15)
#23     RenderFlex.paint (package:flutter/src/rendering/flex.dart:1040:7)
#24     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3208:7)
#25     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:250:13)
#26     RenderBoxContainerDefaultsMixin.defaultPaint (package:flutter/src/rendering/box.dart:2882:15)
#27     RenderFlex.paint (package:flutter/src/rendering/flex.dart:1040:7)
#28     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3208:7)
#29     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:250:13)
#30     RenderBoxContainerDefaultsMixin.defaultPaint (package:flutter/src/rendering/box.dart:2882:15)
#31     RenderCustomMultiChildLayoutBox.paint (package:flutter/src/rendering/custom_layout.dart:408:5)
#32     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3208:7)
#33     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:250:13)
#34     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#35     _RenderInkFeatures.paint (package:flutter/src/material/material.dart:662:11)
#36     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3208:7)
#37     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:250:13)
#38     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#39     RenderPhysicalModel.paint.<anonymous closure> (package:flutter/src/rendering/proxy_box.dart:2043:15)
#40     PaintingContext.pushClipRRect (package:flutter/src/rendering/object.dart:575:14)
#41     RenderPhysicalModel.paint (package:flutter/src/rendering/proxy_box.dart:2030:21)
#42     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3208:7)
#43     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:250:13)
#44     RenderBoxContainerDefaultsMixin.defaultPaint (package:flutter/src/rendering/box.dart:2882:15)
#45     RenderFlex.paint (package:flutter/src/rendering/flex.dart:1040:7)
#46     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3208:7)
#47     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:250:13)
#48     _RenderColoredBox.paint (package:flutter/src/widgets/basic.dart:7813:15)
#49     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3208:7)
#50     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:250:13)
#51     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#52     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3208:7)
#53     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:250:13)
#54     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#55     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3208:7)
#56     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:250:13)
#57     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#58     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3208:7)
#59     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:250:13)
#60     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#61     RenderTransform.paint (package:flutter/src/rendering/proxy_box.dart:2537:17)
#62     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3208:7)
#63     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:250:13)
#64     RenderBoxContainerDefaultsMixin.defaultPaint (package:flutter/src/rendering/box.dart:2882:15)
#65     RenderStack.paintStack (package:flutter/src/rendering/stack.dart:640:5)
#66     RenderStack.paint (package:flutter/src/rendering/stack.dart:656:7)
#67     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3208:7)
#68     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:250:13)
#69     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#70     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3208:7)
#71     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:250:13)
#72     _RenderLayoutBuilder.paint (package:flutter/src/widgets/layout_builder.dart:333:15)
#73     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3208:7)
#74     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:250:13)
#75     RenderBoxContainerDefaultsMixin.defaultPaint (package:flutter/src/rendering/box.dart:2882:15)
#76     RenderCustomMultiChildLayoutBox.paint (package:flutter/src/rendering/custom_layout.dart:408:5)
#77     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3208:7)
#78     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:250:13)
#79     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#80     _RenderInkFeatures.paint (package:flutter/src/material/material.dart:662:11)
#81     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3208:7)
#82     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:250:13)
#83     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#84     RenderPhysicalModel.paint.<anonymous closure> (package:flutter/src/rendering/proxy_box.dart:2043:15)
#85     PaintingContext.pushClipRRect (package:flutter/src/rendering/object.dart:575:14)
#86     RenderPhysicalModel.paint (package:flutter/src/rendering/proxy_box.dart:2030:21)
#87     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3208:7)
#88     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:250:13)
#89     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#90     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3208:7)
#91     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:250:13)
#92     RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#93     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3208:7)
#94     PaintingContext._repaintCompositedChild (package:flutter/src/rendering/object.dart:166:11)
#95     PaintingContext.repaintCompositedChild (package:flutter/src/rendering/object.dart:109:5)
#96     PipelineOwner.flushPaint (package:flutter/src/rendering/object.dart:1156:31)
#97     PipelineOwner.flushPaint (package:flutter/src/rendering/object.dart:1166:15)
#98     RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:593:23)
#99     WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:986:13)
#100    RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:457:5)
#101    SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1325:15)
#102    SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1255:9)
#103    SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:1113:5)
#104    _invoke (dart:ui/hooks.dart:312:13)
#105    PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:383:5)
#106    _drawFrame (dart:ui/hooks.dart:283:31)
The following RenderObject was being processed when the exception was fired: RiveRenderObject#945f0
...  parentData: <none>
...  constraints: BoxConstraints(w=485.0, h=373.1)
...  size: Size(485.0, 373.1)
RenderObject: RiveRenderObject#945f0
  parentData: <none>
  constraints: BoxConstraints(w=485.0, h=373.1)
  size: Size(485.0, 373.1)
flutter animation rive
Original Q&A
1

There are 1 best solutions below

4
Stephan On

I was able to solve it with flutter web (on chrome) but not flutter linux [edit: Rive in its current form does not support targeting linux - simple answer]. I don't know what platform you are targeting, but you can try this:

Instead of

      final riveByteData =
          await rootBundle.load('assets/rive/all_animations.riv');
      RiveFile riveFile = RiveFile.import(riveByteData);

Use:

      final RiveFile riveFile =
          await RiveFile.asset('assets/rive/all_animations.riv');

Why?

This page here, https://github.com/rive-app/rive-flutter/issues/337, says that the Rive Text engine is only initialized "when necessary". But when you look into the RiveFile.import method, it does not check that. Luckily, the RiveFile.asset method does start the font engine. (You can easily look into the code of the RiveFile class when you click on the class name for example in Visual Studio Code while pressing CTRL).

Why does it not work on linux? I'll try to find out ... [Edited: Rive in its current version 0.12.4 is not supporting linux as a target platform - simple answer.]

This is an alternative approach that also worked well on flutter web:

void _onRiveInit(Artboard artboard) {
    final controller =
        StateMachineController.fromArtboard(artboard, 'buddy-V2');
    artboard.addController(controller!);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Simple Animation'),
      ),
      body: Center(
        child: RiveAnimation.asset(
          'assets/rive/all_animations.riv',
          fit: BoxFit.cover,
          onInit: _onRiveInit,
        ),
      ),
    );
  }

Related Questions in FLUTTER

Related Questions in ANIMATION

Related Questions in RIVE

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs

Popular Questions

.

Copyright © 2021 Jogjafile Inc.