Expose frame synced event callback

[asaworld]

Description

An event listener added using addEventListener is being called from within a paint loop. I have a button in a rive file which triggers an event. I then have code listening to this. It is failing because the event occurs within the paint loop so I cannot setState

Steps To Reproduce

void _onAnimationInit(Artboard artboard) {
StateMachineController controller = StateMachineController.fromArtboard(artboard, "Default", onStateChange: _onAnimationStateChange)!;
artboard.addController(controller);
_controller.addEventListener(_onAnimationEvent);
}

Expected behavior

Event listeners should only be called outside the paint loop

Screenshots

Device & Versions (please complete the following information)

• Device: Android phone
  Flutter 3.24.4 • channel stable • https://github.com/flutter/flutter.git
  Framework • revision 603104015d (8 days ago) • 2024-10-24 08:01:25 -0700
  Engine • revision db49896cf2
  Tools • Dart 3.5.4 • DevTools 2.37.3

[HayesGordon]

Hi @asaworld the documentation mentions that this may occur. It's a trade-off for having the event immediately available, which is desirable in some situations.

The burden to step around this is on you. We could maybe look into exposing a frame sync listener. Here is an example of how to only call setState when ready to step around this for now:

void onRiveEvent(RiveEvent event) {
    // Access custom properties defined on the event
    var rating = event.properties['rating'] as double;
    // Schedule the setState for the next frame, as an event can be
    // triggered during a current frame update
    WidgetsBinding.instance.addPostFrameCallback((_) {
      setState(() {
        ratingValue = 'Rating: $rating';
      });
    });
  }

I'll change the issue name to reflect the needed change we can consider for the future.

[asaworld]

Thank for the update. This is how I solved it.

I do expect event listeners to be called outside the build loop and that would probably make a far better default. Calling event handlers inside the paint call is asking for inconsistent rendering or controller updates mid paint loop. You could add an immediate callback for those who might possibly want it.

[alestiago]

Hi @asaworld the documentation mentions that this may occur. It's a trade-off for having the event immediately available, which is desirable in some situations.

The burden to step around this is on you. We could maybe look into exposing a frame sync listener. Here is an example of how to only call setState when ready to step around this for now:

void onRiveEvent(RiveEvent event) {
// Access custom properties defined on the event
var rating = event.properties['rating'] as double;
// Schedule the setState for the next frame, as an event can be
// triggered during a current frame update
WidgetsBinding.instance.addPostFrameCallback((_) {
setState(() {
ratingValue = 'Rating: $rating';
});
});
}
I'll change the issue name to reflect the needed change we can consider for the future.

@HayesGordon any updates to this issue? What's the latest status?

[HayesGordon]

We just released version0.14.0-dev.1, which is a big change to how the Rive Flutter package works and this issue may be resolved.

You can read more here:

• Migration Guide
• Rive Native for Flutter
• Rive Flutter Docs

If you're having these issues after updating, please open a new issue with reproducible steps.