[Solved] Vsync Error: this error in animationcontroller in fluent

When using animation, it is usually written like this

  AnimationController _controller;
  Animation<double> _animation;
  Animation<Offset> _offsetAnimation;


  @override
  void initState() {
    super.initState();
    _controller =
    AnimationController(vsync: this, duration: Duration(seconds: 2))
      ..repeat(reverse: true);
    _animation = CurvedAnimation(parent: _controller, curve: Curves.easeIn);
    _offsetAnimation = Tween<Offset>(begin: Offset.zero, end: Offset(1.5, 0.0))
        .animate(_controller);
  }

However, Vsync: this in the animationcontroller will report an error (when Vsync exists, it will prevent off screen animation (when the UI of the animation is not on the current screen) from consuming unnecessary resources.)

Here, we need to add singletickerproviderstatemixin to the class definition, and use the statefulwidget class object as the value of this in Vsync. If you want to use a custom state object as Vsync, you can also use tickerproviderstatemixin

Writing method I

class DemoSizeTransition extends StatefulWidget {
  @override
  _DemoSizeTransitionState createState() => _DemoSizeTransitionState();
}

class _DemoSizeTransitionState extends State<DemoSizeTransition>
{
	with SingleTickerProviderStateMixin {
	.....//
	}
}

Writing method 2

import 'package:flutter/material.dart';
class DemoSizeTransition extends StatefulWidget {
  @override
  _DemoSizeTransitionState createState() => _DemoSizeTransitionState();
}

class _DemoSizeTransitionState extends State<DemoSizeTransition> with SingleTickerProviderStateMixin
{

  AnimationController _controller;
  Animation<double> _animation;
  Animation<Offset> _offsetAnimation;


  @override
  void initState() {
    super.initState();
    _controller =
    AnimationController(vsync: this, duration: Duration(seconds: 2))
      ..repeat(reverse: true);
    _animation = CurvedAnimation(parent: _controller, curve: Curves.easeIn);
    _offsetAnimation = Tween<Offset>(begin: Offset.zero, end: Offset(1.5, 0.0))
        .animate(_controller);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            FadeTransition(
              opacity: _animation,
              child: FlutterLogo(
                size: 150,
              ),
            ),
            SlideTransition(
              position: _offsetAnimation,
              child: FlutterLogo(
                size: 150,
              ),
            ),
          ],
        ),
      ),
    );
  }
}


Read More: