RivePanel: `useSharedTexture` children drift from their layout offset during scroll

Open
#633 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

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

Research direction

Start by running the minimal reproduction with RivePanel, GridView.builder, and RiveWidget using useSharedTexture: true on the reported rive 0.14.6 and Flutter 3.41.5 iOS environment. Compare the Rive draw with the cell border during fast scrolling, then verify that the animation remains aligned throughout scrolling and that the existing non-shared-texture behavior is unchanged.

Written by the indexing model from the issue text.

Description

Summary

When a RiveWidget with useSharedTexture: true lives inside a scrollable (e.g. GridView/ListView) under a RivePanel, the Rive draw lags behind its Flutter-determined layout offset during fast scroll. The animation visibly slides inside its cell while the cell itself scrolls correctly. When scrolling stops, it snaps back into place.

A non-Rive sibling (DecoratedBox) inside the same cell stays locked to the cell as expected — only the shared-texture Rive draw drifts. This isn't the documented "cannot interleave Rive and Flutter drawing commands" limitation, since the Rive draw also drifts relative to its own cell's layout (no interleaving involved).

Minimal repro

Drop any .riv file into assets/your_animation.riv (and declare it in pubspec.yaml).

import 'package:flutter/material.dart';
import 'package:rive/rive.dart';

void main() => runApp(const MaterialApp(home: _Page()));

class _Page extends StatefulWidget {
  const _Page();

  @override
  State<_Page> createState() => _PageState();
}

class _PageState extends State<_Page> {
  File? _file;

  @override
  void initState() {
    super.initState();
    _load();
  }

  Future<void> _load() async {
    final file = await File.asset(
      'assets/your_animation.riv',
      riveFactory: Factory.rive,
    );
    if (mounted) setState(() => _file = file);
  }

  @override
  Widget build(BuildContext context) {
    final file = _file;
    if (file == null) return const Scaffold();

    return Scaffold(
      body: RivePanel(
        child: GridView.builder(
          physics: const BouncingScrollPhysics(),
          padding: const EdgeInsets.all(16),
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            mainAxisSpacing: 12,
            crossAxisSpacing: 12,
          ),
          itemCount: 40,
          itemBuilder: (_, _) => DecoratedBox(
            // Reference frame — stays locked to the cell during scroll.
            decoration: BoxDecoration(
              border: Border.all(color: const Color(0xFFFF0000), width: 3),
            ),
            child: Padding(
              padding: const EdgeInsets.all(20),
              child: RiveWidget(
                controller: RiveWidgetController(file),
                useSharedTexture: true,
              ),
            ),
          ),
        ),
      ),
    );
  }
}
Expected

The Rive animation stays aligned with the red border throughout the scroll.

Actual

During fast scroll the Rive animation drifts inside the red border. It snaps back to alignment when scrolling stops.

Environment
  • rive: 0.14.6
  • Flutter: 3.41.5 stable
  • Platform: iOS (reproduced); we believe this is platform-agnostic but haven't verified on Android
  • Factory: Factory.rive
Notes
  • Setting useSharedTexture: false (or removing RivePanel) fully fixes the drift, at the cost of the shared-texture perf benefit.
  • Tested with multiple animations per cell; behavior is the same.
Dominant language
Dart
Stars
1.5k
Forks
240
PR merge metrics
No merged PRs in 30d

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.

More from rive-app/rive-flutter

All issues in rive-app/rive-flutter

Similar issues

More Dart issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.