Shaping a RiveComponent in Flutter

Question

My app below is a Flame_Flutter screen with Rive animation

class HorizontalAnimComponent extends RiveComponent
    with HasGameRef<Aviator>, TapCallbacks {
  HorizontalAnimComponent(Artboard artboard) : super(artboard: artboard);

  late OneShotAnimation horizController;
 
  @override
  FutureOr<void> onLoad() {
    debugMode = true;
    super.onLoad();
    final screenWidth = gameRef.size[0];
    final screenHeight = gameRef.size[1];
    log(screenWidth.toString());
    log(screenHeight.toString());
    //para manter a proporção da animação : 1200x280
    size = Vector2(screenWidth, screenWidth / 4.2);
    x = 0;
    y = 0;

    anchor = Anchor.topLeft;
    
    horizController = OneShotAnimation('Timeline 1', autoplay: true);
    // horizController = OneShotAnimation('Animation 1', autoplay: true);
    artboard.addController(horizController);
  }

  @override
  void onTapDown(TapDownEvent event) {
    super.onTapDown(event);
    horizController.isActive = !horizController.isActive;
  }
}

class Aviator extends FlameGame {
  late RiveComponent horizontalAnimComponent;

  @override
  Color backgroundColor() {
    super.backgroundColor();
    return Colors.amber;
  }

  @override
  Future<FutureOr<void>> onLoad() async {
    Artboard horizontArtboard =
        await loadArtboard(RiveFile.asset('assets/new_file.riv'));

    add(HorizontalAnimComponent(horizontArtboard));
    // add(Stripes());
    await super.onLoad();
  }
}

However, as the animation in Rive his artboard is rectangular, I would like to leave with rounded rectangular border. Thanks in advance to anyone who could help me. I've done several searches but to no avail.

Can you clarify a bit what it is that you want to do? You want to have a rounded rectangle as a background for your Rive animation? — spydon, Jun 10 '23 at 11:47
My Rive animation is a rectangle, and I would like make his edge a rounded. Sorry about my english — user10256749, Jun 11 '23 at 14:12

score 0 · Accepted Answer · answered Jun 11 '23 at 16:26

You can use the ClipComponent for this. Since you want to have a rectangle with rounded corners you have to add a custom ShapeBuilder as the argument to the ClipComponent, it could look something like this:

    ClipComponent(
      builder: (size) => RoundedRectangle.fromLTRBR(0, 0, size.x, size.y, 10),
      children: [yourRiveComponent],
    );

and then you simply add your RiveComponent as a child to the ClipComponent.

Shaping a RiveComponent in Flutter

1 Answers1