How to show Rive animation in flutter?

Question

I'm trying to show an animation from my riv flare. It was really simple in FlareActor and flr file. But can't show my animation with riv. I have 2 animations in my riv file. They are anim1 and anim2. I'm trying to show anim1 as default. Then trying to change it according to conditions. Here is my code snippet.

  late RiveAnimationController? _controller;
  Artboard? _riveArtboard;

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

  void _loadRiveFile() async {
    await rootBundle.load('assets/animations/anim_file.riv').then(
          (data) async {
        final file = RiveFile.import(data);
        final _artboard = file.mainArtboard;
        _artboard.addController(_controller = SimpleAnimation('anim1'));
        setState(() => _riveArtboard = _artboard);
      },
    );
  }

This is build func:

GestureDetector(
  onTap: () => {getStatus},
  child: _riveArtboard == null ? const SizedBox.shrink(): Rive(artboard: _riveArtboard!))),

What I'm missing? Or how can I show my animation? Also I tried set controllers but it didn't work.

Answer 1

Rive provides StateMachineController to switch between animations. If you wish to use SimpleAnimation you can follow this way.

  // on state class
  RuntimeArtboard _riveArtboard = RuntimeArtboard();
  final SimpleAnimation anim1 = SimpleAnimation('anim1');
  final SimpleAnimation anim2 = SimpleAnimation('anim2');

To change between animation, you need to remove previous controllers and add the one you like to animate.

  playAnim2(){
   _riveArtboard.artboard..removeController(anim1)
   ..addController(anim2);
 }

You can take a visit on this repository that follow this pattern.

I will encourage you to use StateMachineController

In this case, you need some sort of input value while implementing animation on rive.

On dart level,

 /// on state class
  StateMachineController? controller;
  SMIInput<bool>? isAnim1; // true from rive
  Artboard? _riveArtboard;

All you need to provide isAnim1.value= false based on your scenario, and it will switch the animation.

Check this question on Stackoverflow and GitHub repository .