rive-app / rive-app/rive-flutter

Rive Renderer Causes Jank on Flutter Android and Missing Animations on Flutter Web When Loading Multiple Animations

Open
#638 1 comment 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Submission checklist
  • I have confirmed the issue is present in the latest version of the rive Flutter package
  • I have searched the documentation and forums and could not find an answer
  • I have searched existing issues and this is not a duplicate
Description

When displaying multiple Rive animations on a single screen using Factory.rive as the renderer, two platform-specific issues occur:

Android: animations stutter and jank, with Flutter logging a warning that the app may be doing too much work on its main thread
Flutter Web: some animations fail to render entirely and show as blank widgets
Neither issue occurs with Factory.flutter. All renderers work correctly on iOS.

Environment
Rive dependency: ^0.14.6
Affected platforms: Android, Flutter Web
Unaffected platform: iOS

Reproduction steps / code

Trigger conditions

  • Multiple RiveWidget instances rendered simultaneously on a single screen (50+)
  • FileLoader initialized with Factory.rive

Results

  • Android: animations jank and stutter
  • Flutter Web: subset of widgets render blank - throws error: InvalidStateError: Failed to execute 'transferToImageBitmap' on 'OffscreenCanvas': Cannot transfer to ImageBitmap because WebGL context is lost.
Upload your reproduction files / stack trace

No response

Source .riv / .rev file

No response

Screenshots / video

No response

Rive Flutter package version

0.14.6

Flutter version

Flutter (Channel stable, 3.38.0)

Device

Pixel 7

OS version

Android (API 36)

Additional context

No response

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 FileLoader initialized using Factory.rive and the RiveWidget path, then reproduce 50+ simultaneous animations on Android and Flutter Web. Compare the behavior with Factory.flutter and verify that Android no longer janks and Flutter Web no longer produces blank widgets or the reported WebGL context error.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart
Domain
mobile, performance, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.