How to remove (make disappear) Rive animation when it has finished it's animation in flutter

1.2k Views Asked by At

I created a flutter Rive oneshotAnimation, and I want it to be disappear from the screen when the animation is over. Currently animation stays on the screen when animation is over, and I cant interact with the other widgets on the screen because of that. Luckily there is onStop function in oneshotAnimation controller. Could someone please tell me how to implement this part?

late RiveAnimationController _partAnimation;

  @override
  void initState() {
    super.initState();
    _partAnimation = OneShotAnimation(
      'Animation',
      onStop: () {},  // I want to remove the rive animation from the screen when it is done
    );
  } 

.... Here is the animation widget

       SizedBox(height: 400,
                width: MediaQuery.of(context).size.width,
                child: RiveAnimation.asset(
                  'assets/rive/party.riv',
                  antialiasing: false,
                  fit: BoxFit.contain,
                  controllers: [_partAnimation],
                ),
              ),
1

There are 1 best solutions below

1
On

Step 1: Override dispose() method and dispose your controller object in it.

Code:

late RiveAnimationController _partAnimation;

  @override
  void initState() {
    super.initState();
    _partAnimation = OneShotAnimation(
      'Animation',
      onStop: () {

      },  // I want to remove the rive animation from the screen when it is done
    );
  }

  //Add dispose method
  @override
  void dispose() {
    _partAnimation.dispose();
    super.dispose();
  }

Step 2: Call dispose() in onStop of OneShotAnimation()

void initState() {
    super.initState();
    _partAnimation = OneShotAnimation(
      'Animation',
      onStop: () {
        dispose();
      },
    );
  }