Rive animation on flutter not working and is static

4.2k Views Asked by At

I am new to flutter and have no idea about it, I created a simple design from rive app and tried to run on flutter app but the animation does not run. Few of the animation works which I downloaded from flutter worked and some did not work also one below on the link did not work. It is just static as a png image. I tried changing animation name to idle or center but still it did not work.

Here is the rive download link.

This is the code i am using,

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/widgets.dart';
import 'package:rive/rive.dart';

class ExampleAnimation extends StatefulWidget {
  const ExampleAnimation({Key? key}) : super(key: key);

  @override
  _ExampleAnimationState createState() => _ExampleAnimationState();
}

class _ExampleAnimationState extends State<ExampleAnimation> {
  void _togglePlay() {
    if (_controller == null) {
      return;
    }
    setState(() => _controller!.isActive = !_controller!.isActive);
  }

  bool get isPlaying => _controller?.isActive ?? false;

  Artboard? _riveArtboard;
  RiveAnimationController? _controller;
  @override
  void initState() {
    super.initState();
    rootBundle.load('assets/rive/new.riv').then(
      (data) async {
        // Load the RiveFile from the binary data.
        final file = RiveFile.import(data);
        final artboard = file.mainArtboard;
        // ignore: cascade_invocations
        artboard.addController(_controller = SimpleAnimation('animate'));
        setState(() => _riveArtboard = artboard);
         
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Animation Example'),
      ),
      body: Center(
        child: _riveArtboard == null
            ? const SizedBox()
            : Rive(artboard: _riveArtboard!),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _togglePlay,
        tooltip: isPlaying ? 'Pause' : 'Play',
        child: Icon(
          isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

2

There are 2 best solutions below

0
On BEST ANSWER

It was animaiton name which was not correct, on this line i simply had to change the animation name which was on rive application .

artboard.addController(_controller = SimpleAnimation('Animation Name'));

for mine the animation name was simply Animation 1. So adding that solved my problem.

0
On

I just got the same issue, in the previous answer he mentions changing the name of the animation controller worked for him, and unfortunately, I did not know where that animation controller value is being picked and what it is, so just wanted to clarify it.

In your Rive artboard, there will be a column named animations, you've to give that name to your animation controller, to choose which animation should be played.

Click here to know what the animation controller is