Rive Migration Issue: Previously Working Animation No Longer Displays After Updating to New Rive API

[Goodstuff4UonYT]

^0.14.0-dev.13

Description:
After migrating from the old RiveAnimation.asset API to the new Rive Flutter API, my previously working animation no longer displays at all. No errors, no logs, just an empty space where the animation should be.

I'm currently in the middle of the migration because our app update was rejected due to the old Rive implementation and the new Android 4KB memory guideline, and we urgently need this update to pass review. Unfortunately, the new Rive integration seems significantly more complicated, and so far nothing works.

This is the old code that worked perfectly:

rv.RiveAnimation.asset(
  Assets.animations.birthChartAnimation,
  animations: const ['Timeline 1'],
  alignment: Alignment.center,
  fit: BoxFit.cover,
)

I tried two different approaches based on the new API.
Both compile without errors, but neither displays anything.

Attempt 1:

import 'package:flutter/material.dart';
import 'package:rive/rive.dart';

class SimpleAssetAnimation extends StatefulWidget {
  final String assetPath;
  final Fit fit;
  final Alignment? alignment;

  const SimpleAssetAnimation({
    Key? key,
    required this.assetPath,
    required this.fit,
    this.alignment,
  }) : super(key: key);

  @override
  State<SimpleAssetAnimation> createState() => _SimpleAssetAnimationState();
}

class _SimpleAssetAnimationState extends State<SimpleAssetAnimation> {
  File? file;
  RiveWidgetController? controller;
  bool isInitialized = false;

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

  void initRive() async {
    file = (await File.asset(widget.assetPath, riveFactory: Factory.rive))!;

    controller = RiveWidgetController(file!);
    setState(() => isInitialized = true);
  }

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

  @override
  Widget build(BuildContext context) {
    return isInitialized && controller != null
        ? RiveWidget(
          controller: controller!,
          fit: widget.fit,
          alignment: widget.alignment ?? RiveDefaults.alignment,
        )
        : SizedBox.shrink();
  }
}

Attempt 2:

RiveSimpleAnimationPainter(
              animationName: "Timeline 1",
              assetPath: Assets.animations.birthChartAnimation,
              fit: rv.Fit.cover,
              alignment: Alignment.center,
            )

---
import 'package:flutter/material.dart';
import 'package:rive/rive.dart';


class RiveSimpleAnimationPainter extends StatefulWidget {
  final String assetPath;
  final Fit fit;
  final Alignment? alignment;
  final String animationName;
  const RiveSimpleAnimationPainter({
    super.key,
    required this.assetPath,
    required this.fit,
    this.alignment,
    required this.animationName,
  });

  @override
  State<RiveSimpleAnimationPainter> createState() =>
      _RiveSimpleAnimationPainterState();
}

class _RiveSimpleAnimationPainterState
    extends State<RiveSimpleAnimationPainter> {
  late File file;
  Artboard? artboard;
  late SingleAnimationPainter painter;

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

  void init() async {
    file = (await File.asset(widget.assetPath, riveFactory: Factory.rive))!;
    painter = SingleAnimationPainter(
      widget.animationName,
      alignment: widget.alignment ?? RiveDefaults.alignment,
      fit: widget.fit,
    );
    artboard = file.defaultArtboard();
    setState(() {});
  }

  @override
  void dispose() {
    painter.dispose();
    artboard?.dispose();
    file.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (artboard == null) {
      return Container();
    }
    return RiveArtboardWidget(artboard: artboard!, painter: painter);
  }
}

The migration guide unfortunately doesn’t help with this case, and there are no errors to troubleshoot.

Any guidance on how to properly migrate simple asset animations or how to debug invisible artboards in the new Rive API would be extremely appreciated.

Thanks!

[HayesGordon]

Have you taken a look at this example: https://github.com/rive-app/rive-flutter/blob/master/example/lib/examples/animation_painter.dart

Not sure what is wrong with your code. Maybe the artboard or animation is null.

If you can provide a full reproducible sample that illustrates the issue we can take a look

[HayesGordon]

Closing this issue, as this is supported. Note that we strongly encourage using state machines.

If you can provide a full reproduction of the SingleAnimationPainter not working please reopen the issue and we can take a look.

[orestesgaolin]

If possible it would be really helpful to include example migration fromRiveAnimation.asset to RiveArtboardWidget here https://rive.app/docs/runtimes/flutter/migration-guide

My example

-class AnimatedAppIcon extends StatelessWidget {
+class AnimatedAppIcon extends StatefulWidget {
   const AnimatedAppIcon({
     Key? key,
   }) : super(key: key);
 
+  @override
+  State<AnimatedAppIcon> createState() => _AnimatedAppIconState();
+}
+
+class _AnimatedAppIconState extends State<AnimatedAppIcon> {
+  late File file;
+  Artboard? artboard;
+  late SingleAnimationPainter painter;
+
+  @override
+  void initState() {
+    super.initState();
+    init();
+  }
+
+  @override
+  void dispose() {
+    painter.dispose();
+    artboard?.dispose();
+    file.dispose();
+    super.dispose();
+  }
+
+  void init() async {
+    file = (await File.asset(
+      'assets/file.riv',
+      riveFactory: Factory.rive,
+    ))!;
+    painter = SingleAnimationPainter('enter');
+    artboard = file.defaultArtboard();
+    setState(() {});
+  }
+
   @override
   Widget build(BuildContext context) {
+    if (artboard == null) {
+      return const SizedBox();
+    }
    return SizedBox(
       height: 60,
       width: 60,
-      child: RiveAnimation.asset(
-        'assets/file.riv',
-        animations: ['enter'],
+      child: RiveArtboardWidget(
+        artboard: artboard!,
+        painter: painter,
       ),
     );
   }