Animations are all clipped inside the artboard now

[lucas-goldner]

Description

Animations that were previously going out of bounds of the artboard are now clipped inside the artboard

Steps To Reproduce

Steps to reproduce the behavior:

1. Use the .riv file
2. The animation will clip inside the artboard
3. Use this code

import 'package:flutter/material.dart';

import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:rive/rive.dart';

import 'package:youtrust/widgets/hooks/async_scope.dart';

/// A hook widget that displays a Rive animation with caching to prevent
/// restarting on rebuild. Use this for tab icons and other widgets
/// that should maintain their animation state across rebuilds.
class CachedRiveAnimation extends HookWidget {
  const CachedRiveAnimation({
    required this.assetPath,
    this.artboard,
    this.stateMachine,
    this.fit = Fit.contain, //  I tried cover and this did not work as well
    this.alignment = Alignment.center,
    this.placeHolder,
    super.key,
  });

  final String assetPath;
  final String? artboard;
  final String? stateMachine;
  final Fit fit;
  final Alignment alignment;
  final Widget? placeHolder;

  @override
  Widget build(BuildContext context) {
    final scope = useAsyncScope();
    final fileLoader = useMemoized(
      () => FileLoader.fromAsset(
        assetPath,
        riveFactory: Factory.rive,
      ),
      [assetPath],
    );

    final state = useState<RiveState>(RiveLoading());
    final controller = useState<RiveWidgetController?>(null);

    useEffect(
      () {
        scope.run(() async {
          try {
            final file = await fileLoader.file();

            final newController = RiveWidgetController(
              file,
              artboardSelector: artboard != null
                  ? ArtboardNamed(artboard!)
                  : const ArtboardDefault(),
              stateMachineSelector: stateMachine != null
                  ? StateMachineNamed(stateMachine!)
                  : const StateMachineDefault(),
            );
            controller.value = newController;
            state.value = RiveLoaded(
              file: file,
              controller: newController,
              viewModelInstance: null,
            );
          } on Exception catch (e, stackTrace) {
            state.value = RiveFailed(e, stackTrace);
          }
        });

        return () {
          controller.value?.dispose();
        };
      },
      [fileLoader, artboard, stateMachine],
    );

    return switch (state.value) {
      RiveLoaded(controller: final controller) => RiveWidget(
        controller: controller,
        fit: fit,
        alignment: alignment,
      ),
      RiveLoading() => placeHolder ?? const SizedBox.shrink(),
      RiveFailed() => placeHolder ?? const SizedBox.shrink(),
    };
  }
}

Source .riv/.rev file

home_off.zip

Expected behavior

After migrating from 0.13.x to 0.14.0 it became clipped inside the artboard

Screenshots

Device & Versions (please complete the following information)

• Device: iPhone 14 Pro
• OS: iOS 26.2
• Flutter Version: Copy-paste the output of flutter --version

Flutter 3.35.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision ac4e799d23 (3 months ago) • 2025-09-26 12:05:09 -0700
Engine • hash 0274ead41f6265309f36e9d74bc8c559becd5345 (revision d3d45dcf25) (2 months ago) •
2025-09-26 16:45:18.000Z
Tools • Dart 3.9.2 • DevTools 2.48.0

Additional context

On 0.13.x it worked all fine

[HayesGordon]

Closing as a duplicate of #574

If you use Factory.flutter you'll make use of Flutter rendering which allows a canvas to draw outside of its bounds. For Factory.rive we need to create a texture natively and composite that with Flutter.

We make that texture at the size of the widget, there is no way we can draw outside of those bounds.

We do provide a RivePanel which acts as a shared texture you can draw to. You can size this to be as big as needed to ensure the clipped content is drawn when using Factory.rive. Read more here:

• https://rive.app/docs/runtimes/flutter/flutter#rivepanel
• https://rive.app/docs/runtimes/flutter/flutter#using-rivepanel

Or you can be clever with your use of nested components and managing the artboard size + padding, and use data binding to get the current artboard size and make sure your widget matches that size.

But for the sample you shared, you can just use Factory.flutter.

[HayesGordon]

there is no way we can draw outside of those bounds

I need to clarify. Technically we can, but that comes at the cost of creating a texture at a larger size than needed - for now you can manage that. Maybe in the future we can get clever and size up the texture automatically