Constant rebuilds when rives inside a ScrollView are out of view

[thomasostfeld]

Description

When placing RiveAnimations in e.g. a ListView, the UI gets rebuild on every frame when no animation is running. This happens when a Rive widget is outside the bounds of the ScrollView. If they ScrollView is only partially filled and no scrolling is possible, nothing rebuilds when no animations are playing.

As soon as any Rive widget is out of view, the widgets rebuild on every frame. This causes a constant major CPU load, especially on web in the context of a complex UI.

When scrolling to the other end of the list, it often stops the rebuilding. But this can be reversed by scrolling back a few times.

Steps To Reproduce

Steps to reproduce the behavior:

1. Check out this minimal example repo
2. Run the app and open the Flutter Performance tab
3. Use a low itemCount that doesn't fill the screen to see the expected behaviour
4. Use a higher itemCount to see constant rendering of new frames

Source .riv/.rev file

https://github.com/thomasostfeld/rive_rebuilds/blob/main/assets/rive/square.riv Just a rotating square. The sample app specifies a non existent animation to prevent any playback and just have a static widget.

Expected behavior

The rive widgets only rebuild when an animation is playing.

Screenshots

https://github.com/user-attachments/assets/2abbb4d5-cbcc-4c26-880b-b221d5b582e9

Device & Versions (please complete the following information)

• Device: iOS Simulator, Google Chrome on macOS
• OS: iOS 17.5, macOS 14.5 (Chrome 126.0.6478.127)
• Flutter Version:

  Flutter 3.22.2 • channel stable • https://github.com/flutter/flutter.git
  Framework • revision 761747bfc5 (5 weeks ago) • 2024-06-05 22:15:13 +0200
  Engine • revision edd8546116
  Tools • Dart 3.4.3 • DevTools 2.34.3

[HayesGordon]

Thanks for the detailed report @thomasostfeld

The underlying cause seems to be the same as: https://github.com/rive-app/rive-flutter/issues/408

The issue is that we only advance Rive in the paint method, which is not called under this condition (or when a parent opacity is 0). But we do start the animation ticker as soon as the Render Object is created. So, the animation can never settle - and the animation settling is what will eventually pause the ticker.

[HayesGordon]

@thomasostfeld This should now be resolved in v0.13.10. Please reopen this if you're still encountering issues.