Flutter Question posted in
The official Flutter documentation can be found here.

Flutter set initial input value for Rive animation

I have a rive animation in my Flutter app and I would like to set the initial value for an input, so I can control at which point the animation starts. But I can’t get it done.

This is what I’ve got:

  context.rive.dataBalloonsRIV.copyWith(
    fit: BoxFit.fill,
    onInit: (artboard) async {
      _controller = StateMachineController.fromArtboard(
        artboard,
        _stateMachine,
      );

      if (_controller != null) {
        artboard.addController(_controller!);
        _amountInput = _controller!.findInput<double>('state');
        final startInput = _controller!.findInput<bool>('start');

        _amountInput?.value = 3;
        startInput?.value = true;
      }
      setState(
        () => (),
      );
    },
  ),

With this the animation will animate from start to inputValue 3.

I found this on the official rive docs, where an initialValue can be set. This sounds exactly like what I need, but I can’t find a way to implement this in Flutter.

Is this possible? Has anyone done this before? Let me know if you need any more information.

Tags:

2

Answers


  1. 0

    Yes, it is.

    I have also struggled with this some time ago.

    In my case, I have this method in my class to get the Rive Animation as a Widget:

    Widget getWidget(double width) {
  return SizedBox(
    width: width,
    height: width,
    child: RiveAnimation.asset(
      "assets/rive/courses/$_fileName",
      controllers: [_controller],
      animations: [_animationName],
      artboard: _artboardName,
      fit: BoxFit.contain,
      stateMachines: [_stateMachineName],
      onInit: _onRiveInit,
    ),
  );
}

    The "onInit:" points to my void function:

    void _onRiveInit(Artboard artboard) {
  _stateMachineController = StateMachineController.fromArtboard(artboard, _stateMachineName)!;
  _addSMINumberToController(riveNumber);
  artboard.addController(_stateMachineController);
}

    The "_addSMINumberToController" does, what I assume you need.

    void _addSMINumberToController(RiveNumber num) {
  num.number = _stateMachineController.findInput<double>(num.location) as SMINumber;
  num.number!.change(num.value);
}

    Note that the "RiveNumber" class is custom, and you can figure your own way out of it. My class looks like this:

    class RiveNumber {
  SMINumber? number;
  String location;
  double value;
  RiveNumber({this.number, required this.location, required this.value});
}
    Login or Signup to reply.
  2. 0

    In Flutter, you can set the initial value of a Rive animation by using the StateMachineController’s findInput method to get a reference to the input, and then setting its value property. However, this will only work if the animation has been loaded and the StateMachineController has been initialized.

    From your code, it seems like you’re doing this correctly. The findInput method is used to get a reference to the ‘state’ and ‘start’ inputs, and their value properties are then set.

    If the animation isn’t starting at the point you expect, it could be because the animation or the StateMachineController hasn’t been fully loaded when you’re trying to set the input values. To ensure that the animation and the StateMachineController are fully loaded, you can use the onInit callback, which is called after the animation has been initialized.

    Here’s an example of how you can do this:

    StateMachineController? _controller;
SMIInput<double>? _amountInput;
SMIInput<bool>? _startInput;

// ...

context.rive.dataBalloonsRIV.copyWith(
  fit: BoxFit.fill,
  onInit: (artboard) async {
    _controller = StateMachineController.fromArtboard(
      artboard,
      _stateMachine,
    );

    if (_controller != null) {
      artboard.addController(_controller!);
      _amountInput = _controller!.findInput<double>('state');
      _startInput = _controller!.findInput<bool>('start');

      if (_amountInput != null && _startInput != null) {
        _amountInput!.value = 3;
        _startInput!.value = true;
      }
    }

    setState(() {});
  },
);

    In this code, the onInit callback is used to initialize the StateMachineController and set the initial values of the ‘state’ and ‘start’ inputs. The setState call at the end is used to trigger a rebuild of the widget, which should cause the animation to start with the specified input values.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search