rive-app / rive-app/rive-flutter

Low animation quality when rotating using Rive’s native renderer (works fine with Flutter renderer)

Open
#562 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug triage
Dominant language
Dart
Stars
1.5k
Forks
240
PR merge metrics
No merged PRs in 30d

Description

Description

When using a Rive animation inside a container (in my case, a cup object), the animation quality becomes extremely poor when the cup is moved or transformed. The issue only occurs when using the native Rive renderer — the animation looks sharp and smooth when rendered using Flutter’s built-in renderer.

I’ve attached two videos for comparison:

  • Video 1: Rive animation rendered with Flutter’s renderer (good quality)
  • Video 2: Rive animation rendered with Rive’s native renderer (blurry / low-quality result)
Steps To Reproduce
  1. Place a .riv animation inside a container widget.
  2. Move or transform the container (e.g., translate, scale, or rotate).
  3. Observe the animation quality degradation with the native renderer.
  4. Switch to Flutter’s renderer — the issue disappears.
Source .riv/.rev file

I can provide both .riv and .rev files privately if needed.

Expected behavior

The animation should maintain the same visual quality when the parent container is moved, regardless of whether it’s rendered via Flutter’s renderer or the native Rive renderer.

Screenshots / Videos

https://github.com/user-attachments/assets/87f9d509-18bd-4867-abd7-2bda20671b01

https://github.com/user-attachments/assets/151f30bf-3553-4291-9591-21954d460014

Device & Versions
  • Device: Windows / Android / iOS
  • Flutter Version: 3.35.6

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the reported reproduction: place the provided .riv/.rev animation in a container, then move, scale, or rotate it using the native and Flutter renderers. Compare the attached videos and verify that the native renderer preserves visual quality during transformations across the listed Windows, Android, and iOS environments.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart, flutter
Domain
computer-graphics
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.