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,
),
),
],
),
),
);
}
}