rive-app / rive-app/rive-flutter

Rive animation disappears when wrapped with `DecoratedBox` and `RivePanel`

Open
#595 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Description

When a Rive animation with useSharedTexture: true is wrapped with DecoratedBox, and the DecoratedBox is wrapped with RivePanel, the animation disappears.

Workarounds:

  • Set useSharedTexture: false, or
  • Remove DecoratedBox

Note: If RivePanel is intended to replace DecoratedBox for shared texture rendering, its current functionality is limited because it only contains backgroundColor, which is insufficient to fully replace DecoratedBox features (such as borders, gradients, shadows, etc.).

Steps To Reproduce

I've created a reproduction repository with the code, .riv file, and .rev file in assets.

  1. Clone the reproduction repository
  2. Run the app and observe that the animation is not visible
  3. Remove DecoratedBox that wraps CircleRive:

Current code (animation not visible):

RivePanel(
  child: SizedBox.square(
    dimension: 250,
    child: DecoratedBox(
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.blueAccent,
      ),
      child: CircleRive(
        filePath: 'assets/circle/circle.riv',
      ),
    ),
  ),
),

Modified code (animation becomes visible):

RivePanel(
  child: SizedBox.square(
    dimension: 250,
    child: CircleRive(
      filePath: 'assets/circle/circle.riv',
    ),
  ),
),
  1. After removing DecoratedBox, the animation becomes visible
  2. Adding DecoratedBox back causes the animation to disappear again
Expected Behavior

DecoratedBox (or any widget) should not prevent the animation from rendering when used together with RivePanel and useSharedTexture: true.

Actual Behavior

The animation disappears when DecoratedBox is placed between RivePanel and the Rive widget with useSharedTexture: true enabled.

Device & Versions
  • Device: Reproducible on all devices
  • Rive Version: 0.14.0
  • Flutter Version: 3.35.5
Flutter Doctor Output
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.35.5, on macOS 15.6.1 24G90 darwin-arm64, locale
    en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version
    35.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 26.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2025.1)
[✓] VS Code (version 1.96.4)
[✓] Connected device (5 available)
[✓] Network resources

• No issues found!

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 by running the linked rive_texture_bug reproduction with Flutter 3.35.5 and Rive 0.14.0, comparing the RivePanel examples with and without DecoratedBox and useSharedTexture enabled. Trace the RivePanel/shared-texture rendering path in rive-flutter; done means the animation remains visible when DecoratedBox is placed between RivePanel and the Rive widget.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart, flutter
Domain
frontend, mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.