I have two animations, even if the second animation is exactly the same as the first one, the second one won't work but the first one will.

class _TableAtHomeState extends State<TableAtHome> with TickerProviderStateMixin {
  late AnimationController _controller;
  late AnimationController _controller2;
  late Animation<double> _animation;
  late Animation<double> _animation2;

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

    _controller = AnimationController(
      duration: const Duration(milliseconds: 5000),
       vsync: this);
    
    _animation = Tween(
      begin: 0.0,
      end: 500.0,
    ).animate(_controller)..addListener((){
      setState(() {
        
      });
    });

    _controller2 = AnimationController(
      duration: const Duration(milliseconds: 5000),
       vsync: this);

    _animation2 = Tween(
      begin: 0.0,
      end: 500.0,
    ).animate(_controller2)..addListener((){
      setState(() {
        
      });
    });

     _controller.forward();
     _controller2.forward()
    
  }
  
  @override
  dispose() {
    _controller.dispose();
    _controller2.dispose();
    super.dispose();
  }

This is the error that I get:

Another exception was thrown: LateInitializationError: Field '_animation2@30427762' has not been initialized.

So, I tried to remove late and that gave me another error.

The following code will work:

Positioned(
   left: width/2 - 25,
   top: _animation.value,
   child: Container(color: Colors.red, height: 50,width: 50,))

But the following code will raise an error (mentioned above):

Positioned(
   left: width/2 - 25,
   top: _animation2.value,
   child: Container(color: Colors.red, height: 50,width: 50,))

And i will like to do those animations one after the other not together

CodePudding user response：

You are using SingleTickerProviderStateMixin where you have multiple AnimationController.

Replace SingleTickerProviderStateMixin with TickerProviderStateMixin

SingleTickerProviderStateMixin only supports vending a single ticker. If you might have multiple AnimationController objects over the lifetime of the State, use a full TickerProviderStateMixin instead.

Update:

Provide unique for each Positioned widget and change position to see effect.

Positioned(
    key: const ValueKey("item 1"),
    left: width / 2 - 25,
    top: _animation.value,
    child: Container(
      color: Colors.red.withOpacity(.3),
      height: 150,
      width: 50,
    )),
Positioned(
    key: const ValueKey("item 2"),
    left: width / 2 - 25,
    top: _animation2.value,
    child: Container(
      color: Colors.orange.withOpacity(.3),
      height: 50,
      width: 50,
    ))

Second Animation at the end of First animation

replace _controller2.forward(); inside _animation

_animation = Tween(
  begin: 0.0,
  end: 500.0,
).animate(_controller)
  ..addListener(() {
    if (_animation.isCompleted) {
      _controller2.forward();
    }
    setState(() {});
  });