Animation starts while restarting the app - flutter

Question

I have created a flip animation. The function is when i tap the container it flips. But what i want to have is, I just want to flip the container when onTap is called. But the animation starts while opening the app. What mistake i have mage her and please help me in fixing this. What mistake i have mage her and please help me in fixing this.
class _ChangeContainerState extends State<ChangeContainer>
with TickerProviderStateMixin {
Animation animation;
AnimationController animationController;
Naming selectedContainer = Naming.three;
#override
void initState() {
animationController =
AnimationController(duration: Duration(milliseconds: 500), vsync: this);
animation = Tween(begin: 0.0, end: 1.0).animate(animationController);
super.initState();
}
#override
Widget build(BuildContext context) {
animationController.forward();
return AnimatedBuilder(
animation: animationController,
builder: (BuildContext context, Widget child) {
return Scaffold(
body: Center(
child: selectedContainer == Naming.one
? GestureDetector(
onTap: () {
setState(() {
selectedContainer = Naming.two;
animationController.repeat();
});
},
child: Transform(
transform: Matrix4.identity()
..setEntry(3, 2, 0.002)
..rotateX(pi + (pi * animation.value)),
alignment: FractionalOffset.center,
child: Container(
height: 200,
width: 200,
color: Colors.green,
child: Center(
child: Text(
'Container 2',
style: TextStyle(
fontSize: 30.0, color: Colors.white),
),
),
),
),
)
: selectedContainer == Naming.two
? GestureDetector(
onTap: () {
setState(() {
selectedContainer = Naming.three;
animationController.repeat();
});
},
child: Transform(
transform: Matrix4.identity()
..setEntry(3, 2, 0.002)
..rotateX(pi + (pi * animation.value)),
alignment: FractionalOffset.center,
child: Container(
height: 200,
width: 200,
color: Colors.purpleAccent,
child: Center(
child: Text(
'Container 3',
style: TextStyle(
fontSize: 30.0, color: Colors.white),
),
),
),
),
)
: GestureDetector(
onTap: () {
setState(() {
selectedContainer = Naming.one;
animationController.repeat();
});
},
child: Transform(
transform: Matrix4.identity()
..setEntry(3, 2, 0.002)
..rotateX(
pi + (pi * animation.value),
),
alignment: FractionalOffset.center,
child: Container(
height: 200,
width: 200,
color: Colors.yellow,
child: Center(
child: Text(
'Container 1',
style: TextStyle(fontSize: 30.0),
),
),
),
),
),
),
);
});

Answer 1

Whatever you add inside the init state will run as soon as the page opens. So you want the animation variable to be in the onTap method instead.
You will move your animationController and animation outside the initState method.
Full Code:
class _ChangeContainerState extends State<ChangeContainer>
with TickerProviderStateMixin {
Animation animation;
AnimationController animationController;
Naming selectedContainer = Naming.three;
#override
void initState() {
super.initState();
}
animationController =
AnimationController(duration: Duration(milliseconds: 500), vsync: this);
animation = Tween(begin: 0.0, end: 1.0).animate(animationController);
#override
Widget build(BuildContext context) {
animationController.forward();
return AnimatedBuilder(
animation: animationController,
builder: (BuildContext context, Widget child) {
return Scaffold(
body: Center(
child: selectedContainer == Naming.one
? GestureDetector(
onTap: () {
setState(() {
selectedContainer = Naming.two;
animationController.repeat();
});
},
child: Transform(
transform: Matrix4.identity()
..setEntry(3, 2, 0.002)
..rotateX(pi + (pi * animation.value)),
alignment: FractionalOffset.center,
child: Container(
height: 200,
width: 200,
color: Colors.green,
child: Center(
child: Text(
'Container 2',
style: TextStyle(
fontSize: 30.0, color: Colors.white),
),
),
),
),
)
: selectedContainer == Naming.two
? GestureDetector(
onTap: () {
setState(() {
selectedContainer = Naming.three;
animationController.repeat();
});
},
child: Transform(
transform: Matrix4.identity()
..setEntry(3, 2, 0.002)
..rotateX(pi + (pi * animation.value)),
alignment: FractionalOffset.center,
child: Container(
height: 200,
width: 200,
color: Colors.purpleAccent,
child: Center(
child: Text(
'Container 3',
style: TextStyle(
fontSize: 30.0, color: Colors.white),
),
),
),
),
)
: GestureDetector(
onTap: () {
setState(() {
selectedContainer = Naming.one;
animationController.repeat();
});
},
child: Transform(
transform: Matrix4.identity()
..setEntry(3, 2, 0.002)
..rotateX(
pi + (pi * animation.value),
),
alignment: FractionalOffset.center,
child: Container(
height: 200,
width: 200,
color: Colors.yellow,
child: Center(
child: Text(
'Container 1',
style: TextStyle(fontSize: 30.0),
),
),
),
),
),
),
);
});