RiveWidget flickers & blurs when Rive widget is continuously rotated with RotationTransition / Transform (Flutter) while using `Factory.Rive`

[ziii08]

Description

When using the Factory.rive in the Flutter runtime, a RiveWidget that is placed under a continuously animated Transform (e.g. Transform.rotate, Transform with an animated Matrix4, RotationTransition, etc.) will sometimes:

• Blink / disappear for 1–2 frames
• Look visibly blurry for a frame, as if rendered at a lower resolution
• Occasionally cause nearby Flutter UI to appear blurred/glitched in that same frame

This does not happen when I switch to the Factory.flutter, but the Rive renderer gives better performance, so I’d like to keep using it if possible.

Steps To Reproduce

I can reproduce the issue with a very simple widget.

Example 1 – Animated Transform.rotate

class BearRiveRotate extends StatefulWidget {
  const BearRiveRotate({super.key, this.asset = 'assets/rive/bear.riv'});

  final String asset;

  @override
  State<BearRiveRotate> createState() => _BearRiveRotateState();
}

class _BearRiveRotateState extends State<BearRiveRotate>
    with SingleTickerProviderStateMixin {
  late final FileLoader fileLoader;
  late final AnimationController _rotationController;

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

    fileLoader = FileLoader.fromAsset(
      widget.asset,
      riveFactory: Factory.rive, // Rive renderer
    );

    _rotationController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 3),
    )..repeat(); // continuous rotation
  }

  @override
  void dispose() {
    _rotationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _rotationController,
      builder: (context, child) {
        final angle = _rotationController.value * 2 * math.pi;
        return Transform.rotate(
          angle: angle,
          child: child,
        );
      },
      child: RiveWidgetBuilder(
        fileLoader: fileLoader,
        builder: (context, state) => switch (state) {
          RiveLoading() => const CircularProgressIndicator(),
          RiveFailed() => Text('Failed to load: ${state.error}'),
          RiveLoaded() => RiveWidget(
            controller: state.controller,
            fit: Fit.contain,
          ),
        },
      ),
    );
  }
}

Example 2 – RotationTransition (same behavior)

Using RotationTransition instead of a manual Transform.rotate produces the same flicker/blur behavior, so it looks related to any animated parent Transform:

@override
Widget build(BuildContext context) {
  return RotationTransition(
    turns: _rotationController,
    child: RiveWidgetBuilder(
      fileLoader: fileLoader,
      builder: (context, state) => switch (state) {
        RiveLoading() => const CircularProgressIndicator(),
        RiveFailed() => Text('Failed to load: ${state.error}'),
        RiveLoaded() => RiveWidget(
          controller: state.controller,
          fit: Fit.contain,
        ),
      },
    ),
  );
}

Source .riv/.rev file

This issue is not file-specific.
I can reproduce it with multiple public files from the Rive Marketplace using the sample code above.

Expected behavior

• The Rive artboard should render smoothly under any parent Transform,
  even when the transform matrix is updated every frame.
• No blink, no 1-frame disappearance, no blur, and no visual artifacts on surrounding Flutter UI.

---

Device & Versions

• Device: Redmi Note 11

Flutter 3.35.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision d693b4b9db (2 months ago) • 2025-09-16 14:27:41 +0000
Engine • hash feee8ee8fb8b975dd9990f86d3bda11e6e75faf3 (revision c298091351) (2 months ago) • 2025-09-15 14:04:24.000Z
Tools • Dart 3.9.2 • DevTools 2.48.0

[ziii08]

Screenrecorder-2025-11-25-20-27-01-90.mp4

[HayesGordon]

You can step around this by creating a RivePanel and drawing to that. The issue is that when the widget is resized we're recreating the texture we're drawing to. This is expensive if it happens frequently. We need to do more investigation to see if we can improve this, but see this comment to step around it.

The other alternative is to keep the widget size stable and handle this type of animation/logic directly in Rive.

Closing as a duplicate of #562.