Black border around RiveAnimation widget

[bmaronka]

Description

There are black lines around RiveAnimation widget. I've tested different named constructors, but the problem persists. On iOS works perfectly, but on web and macOS the problem still occurs.

Source .riv/.rev file

merry_christmas.riv.zip

Expected behavior

There aren't top and bottom lines around RiveAnimation widget

Screenshots

Device & Versions

• Device:
  • Xiaomi Mi 9 Android 10,
  • MacBook Pro 2021 chip M1 Pro 32GB macOS Sonoma 14.2.1
• Flutter Version:

Flutter 3.16.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 78666c8dc5 (8 weeks ago) • 2023-12-19 16:14:14 -0800
Engine • revision 3f3e560236
Tools • Dart 3.2.3 • DevTools 2.28.4

Additional context

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

@RoutePage()
class SplashScreen extends HookWidget {
  const SplashScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final christmasAnimationController = useRef(SimpleAnimation('Animation_Loop'));

    useEffect(
      () {
        christmasAnimationController.value.isActive = true;
        return christmasAnimationController.value.dispose;
      },
      [],
    );

    return Scaffold(
      backgroundColor: const Color(0xFFFFF7F1),
      body: RiveAnimation.asset(
        'assets/animations/merry_christmas.riv',
        artboard: 'Character_Animation',
        controllers: [christmasAnimationController.value],
      ),
    );
  }
}

[Gordon]

Hey @bmaronka, the difference you're seeing is most likely because on iOS Flutter uses Impeller as a renderer and web/macOS defaults to Skia.

I took a look at your animation and it seems like the artboard had a fill color, and you're using a scaled rectangle to fill the artboards size (which is the white color). So it appears there are times when that scale is not 100% and some of the artboard's fills are showing. You can either remove the fill color (eye toggle, or delete the fill), or you can change the artboard color to the desired color instead of using the scaled rectangle.

Going to close this issue, but let me know if you run into issues.

merry_christmas_no_background.riv.zip