Rendering issues on Android with Rive native when resizing animation

[dario-digregorio]

Description

I am using the latest rive prerelease 0.14.0-dev.8 and I am experiencing a rendering issue when resizing a RiveWidget on Android. When ever the animation is getting resized it disappears and reappears without throwing an error. On iOS it is working as expected. I attached a video showing the issue. If needed I can provide a reproducible repo and the riv file in a private message.

Expected behavior

Should be showing the Rive animation without disappearing.

Screenshots

https://github.com/user-attachments/assets/f29664e1-c3ab-40d3-aa99-23e1483f70a5

Device & Versions (please complete the following information)

• Device: On all Android devices. Emulator and real device. Both debug and release.
• OS: Tested in Emulator Android API 35 and real device with Android 16.
• Flutter Version: 3.35.4 e.g.:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.35.4, on macOS 15.6.1 24G90 darwin-arm64, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 36.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 16.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2025.1)
[✓] Connected device (3 available)

[HayesGordon]

Thanks for the report. If you're able to provide a reproduction, that would be really helpful. It can also be any .riv file if it reproduces regardless of the file.

Something you can also consider using is the newly added RivePanel. This is a shared texture that multiple widgets can draw to. For your use case, you can instead create the RivePanel to be the maximum size of the view (or area that you want to draw to), and then continue resizing the RiveWidget as normal, making sure that RiveWidget draws to the RivePanel.

Then we won't be recreating the texture each time you resize, and instead draw to a fixed texture. See these docs:

• https://rive.app/docs/runtimes/flutter/flutter#using-rivepanel
• https://rive.app/docs/runtimes/flutter/flutter#rivepanel

I am currently working on other refactors regarding the texture creation and resizing logic. So this may already be fixed in an upcoming release, but if you can provide the reproduction we can take a look.

[dario-digregorio]

Thanks for the suggestions! I will try it out.

But I think it is a bug because I don't have this issue on iOS. I created a reproducible repo. There you can find the riv and rev file. https://github.com/dario-digregorio/rive_render_bug

[dario-digregorio]

I also tried using RivePanel but the RiveWidget does not get rendered anymore and I don't get any errors. I followed the docs and tried it in my reproducible repo and have the same issue.

[thize]

Hi!

1. I'm also getting this error.
2. This error also happens if you resize the RivePanel (it's an animation inside a popup that has a bounce effect when opening).
3. The error doesn’t happen for me on iOS (but it does on Android).

[eli1stark]

@HayesGordon

I believe this is a serious issue that needs to be addressed. In most use cases, Rive animations are used in motion alongside other objects in the app. Making all scenes in Rive would mean writing entire pages in Rive, which is impractical and defeats the purpose of Rive as "tiny SVG with fast animations". We have use cases where we translate, rotate, and scale Rive animations, and I'm sure many teams have similar requirements.

Current Problem: When a Rive animation is rebuilt at least once during any motion (page navigation, screen appearing, translation, or scaling), it becomes unstable, flickers, or disappears. This breaks approximately 60% of our Rive animations in the new release.

Workarounds are complex and require significant effort to avoid rebuilds during motion. However, some scenarios are impossible to work around. For example, when navigating to a new page, you cannot cache a Rive animation because it hasn't been built yet. Building it during the page transition completely breaks the animation.

Issues with Recommended Approaches:

So far, there are 2 recommended approaches from Gordon:

1. Use RivePanel - Based on our experiments, this never solved any issues for us. In fact, it introduced additional problems (see this issue). The documentation doesn't clearly explain how it solves flickering during motion for a single animation, so it doesn't solve anything in practice.

2. Move everything to Rive - This is often impractical or impossible. It doesn't solve issues like page transitions (and page transitions are just one edge case - there are likely many others).

The Core Challenge: One possible approach is ensuring the Rive animation widget is never rebuilt during motion, but this is difficult to achieve and often requires workarounds that feel like hacks. In cases like page transitions, it's impossible to avoid at least one build when adding the widget to the tree, which causes flickers while the page animation is in progress.

These are all related issues:

1. https://github.com/rive-app/rive-flutter/issues/562
2. https://github.com/rive-app/rive-flutter/issues/582
3. https://github.com/rive-app/rive-flutter/issues/578

[eli1stark]

Hi!

1. I'm also getting this error.
2. This error also happens if you resize the RivePanel (it's an animation inside a popup that has a bounce effect when opening).
3. The error doesn’t happen for me on iOS (but it does on Android).

2. Yes, RivePanel exhibits the same flickering behavior as the Rive animation.
3. This appears to be a platform-agnostic issue, as we've observed it occurring on both iOS and Android. It seems to be related to how Rive animations respond to widget rebuilds while in motion.

[HayesGordon]

I'm working on a PR that should address some of this.

Edit:

• If you're looking to port old animations that you used in the previous major, then you can proceed to use the Flutter renderer if you're running into issues. Just set the factory to Factory.flutter when creating the file.
• Regarding "you cannot cache a Rive animation", you can. Just reuse the same RiveController and send that to the new page to continue from where you left of.
• To maximize the benefit of using RivePanel the intention is to NOT be resizing that widget. Create it once at the maximum desired size (for example the full screen), and then draw your Rive content to that.

[eli1stark]

@HayesGordon

Thank you so much for the reply! Just to clarify so there is no confusion:

1. In my previous comment I said that it's reproducible on both Factory.flutter and Factory.rive. I double-checked and can confirm that when using Factory.flutter I'm unable to reproduce the issue, so at least we have a fallback. However, this fallback is temporary because eventually triggers will be deprecated in Rive and we'll have to migrate to Factory.rive.

2. I probably should rephrase this: what I mean by caching is caching the widget in the widget tree, so the animation is not rebuilt when transformed. But in order to "cache" in the widget tree, we need to build the widget at least once. When this first build happens during some form of animation (for example, page transitions), we get flickers.

3. RivePanel is somewhat still a mystery to us. For example, if on a regular Flutter page we have 5 unrelated Rive widgets, does it make sense to wrap the whole page with RivePanel similar to Scaffold, or should we wrap at lower levels closer to each animation, and why? What we've noticed with RivePanel is that it's quite sensitive to widgets placed between the RivePanel and the RiveWidget itself. For example, when there is a DecoratedBox in between them, the Rive animation disappears - see this issue that we filed.

If you need anything in terms of reproducible examples to better understand the problem, or if you'd like to do a user interview, our team is eager to help and even jump on a call if needed.