Flutter Delayed Animation code Error : AnimationController.forward() called after AnimationController.dispose()

user_13840001 0
Viewed 7596

I have implemented a delayed animation in my welcome screen, but I get this below error in my flutter App. Let me know if there is an error in my code that I can correct and fix this issue.

The error is :

E/flutter (11565): [ERROR:flutter/lib/ui/ui_dart_state.cc(157)]
Unhandled Exception:
'package:flutter/src/animation/animation_controller.dart': Failed
assertion: line 455 pos 7: '_ticker != null':
AnimationController.forward() called after
AnimationController.dispose()

Here is my code:

class DelayedAnimation extends StatefulWidget {
  final Widget child;
  final int delay;
 
  DelayedAnimation({@required this.child, this.delay});

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

class _DelayedAnimationState extends State<DelayedAnimation> with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<Offset> _animOffset;

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

    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 800),
    );
    final curve = CurvedAnimation(
      curve: Curves.decelerate,
      parent: _controller,
    );
    _animOffset = Tween<Offset>(
      begin: const Offset(0.0, 0.35),
      end: Offset.zero,
    ).animate(curve);

    if (widget.delay == null) {
      _controller.forward();
    } else {
      Timer(Duration(milliseconds: widget.delay), () {
        _controller.forward();
      });
    }
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      child: SlideTransition(
        position: _animOffset,
        child: widget.child,
      ),
      opacity: _controller,
    );
  }
}
dart flutter
2 Answers

This problem will often occur when you use a Timer or Future.delayed to interact with an AnimationController. This is the problem. Lets say that delay = 1000.

The following code tells flutter that in 1000 milliseconds, call forward() on the animation controller in your DelayedAnimation widget

Timer(Duration(milliseconds: widget.delay), () {
   _controller.forward();
});

However, before this happens, your DelayedAnimation widget is disposed (this happens, for example, if the user moves to a different screen)

That means that when the Timer executes, it is calling forward() on a controller which has been disposed (because the DelayedAnimation has been disposed)

There are a few solutions.

  1. Check the mounted property before calling forward:
Timer(
  Duration(
    milliseconds: widget.delay
  ), 
  () {
    if(mounted) {
      _controller.forward();
    }
  }
);

or 2. Store the Timer when you create it:

_timer = Timer(
  Duration(
    milliseconds: widget.delay
  ), 
  () {
    _controller.forward();
  }
);

Then cancel it on dispose:

@override
  void dispose() {
    super.dispose();
    _controller.dispose();
    _timer?.cancel();
  }
user_409520

You have not given info regarding the Timer which you have used, so cannot comment on what might be going wrong in your code.

But I tried using Future.delayed to delay the animation, and it is working fine for me.

Future.delayed(Duration(milliseconds: widget.delay), () {
        _controller.forward();
      });

Hope this helps you.

Edit:

'_ticker != null': AnimationController.forward() called after AnimationController.dispose()

The error says, forward() called after dispose(). This could happen in a case where you are going off to another screen before the delay expires and triggers _controller.forward(). Going off to another screen causes _contoller.dispose() and so calling _controller.forward() after that causes the error, because the _controller is already disposed. For example, if the app is going to next screen after 1 sec and the animation delay is 2 secs, then this could happen.

user_138408640
Related