animation struggle

lib/main.dart

@@ -1,4 +1,6 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart';
+import 'dart:async';
 
 void main() => runApp(MyApp());
 
@@ -14,10 +16,40 @@ class App extends StatefulWidget {
   AppState createState() => AppState();
 }
 
-class AppState extends State<App> {
+class AppState extends State<App> with SingleTickerProviderStateMixin {
+  AnimationController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      duration: Duration(seconds: 3),
+      vsync: this,
+    );
+  }
+
+  @override
+  void dispose() {
+    _controller?.dispose();
+    super.dispose();
+  }
+
+  Future _startAnim() async {
+    try {
+      await _controller.forward().orCancel;
+      await _controller.reverse().orCancel;
+    } on TickerCanceled {
+      print('welp we fucked');
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     return Material(
+        child: GestureDetector(
+      onTap: () {
+        _startAnim();
+      },
       child: Stack(
         fit: StackFit.expand,
         children: [
@@ -26,70 +58,70 @@ class AppState extends State<App> {
             fit: BoxFit.cover,
           ),
           ColorFiltered(
-            colorFilter:
-                ColorFilter.mode(Colors.black.withOpacity(0.8), BlendMode.srcOut), // This one will create the magic
+            colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.8),
+                BlendMode.srcOut), // This one will create the magic
             child: Stack(
               fit: StackFit.expand,
               children: [
                 Container(
                   decoration: BoxDecoration(
                       color: Colors.black,
-                      backgroundBlendMode: BlendMode.dstOut), // This one will handle background + difference out
+                      backgroundBlendMode: BlendMode
+                          .dstOut), // This one will handle background + difference out
                 ),
-                MovingHole(),
+                MovingHole(controller: _controller)
               ],
             ),
           ),
         ],
       ),
-    );
+    ));
   }
 }
 
-class MovingHole extends StatefulWidget {
-  @override
-  MovingHoleState createState() => MovingHoleState();
-}
+class MovingHole extends StatelessWidget {
+  MovingHole({Key key, this.controller})
+      : width = Tween<double>(begin: 50.0, end: 150.0).animate(CurvedAnimation(
+            parent: controller,
+            curve: Interval(0.0, 1, curve: Curves.fastOutSlowIn))),
+        height = Tween<double>(begin: 50.0, end: 150.0).animate(CurvedAnimation(
+            parent: controller,
+            curve: Interval(0.0, 1, curve: Curves.fastOutSlowIn))),
+        radius = BorderRadiusTween(
+                begin: BorderRadius.circular(0.0),
+                end: BorderRadius.circular(100.0))
+            .animate(CurvedAnimation(
+                parent: controller,
+                curve: Interval(
+                  0.0,
+                  1,
+                  curve: Curves.ease,
+                ))),
+        alignment = AlignmentTween(
+                begin: Alignment.bottomCenter, end: Alignment.topCenter)
+            .animate(CurvedAnimation(
+                parent: controller,
+                curve: Interval(0.0, 1, curve: Curves.ease))),
+        super(key: key);
 
-class MovingHoleState extends State<MovingHole> {
-  double _width = 200;
-  double _height = 200;
-  Offset _alignment = Offset(100, 200);
-  bool end = true;
+  Animation<double> controller;
+  Animation<double> width;
+  Animation<double> height;
+  Animation<BorderRadius> radius;
+  Animation<Alignment> alignment;
 
-  @override
   Widget build(BuildContext context) {
-    return Positioned(
-        top: _alignment.dx,
-        left: _alignment.dy,
-        // alignment: _alignment,
-        child: GestureDetector(
-            onTap: () async {
-              end == true
-                  ? Future.delayed(Duration(seconds: 1), () {
-                      setState(() {
-                        _width = 100;
-                        _height = 100;
-                        _alignment = Offset(120, 200);
-                        end = false;
-                      });
-                    })
-                  : Future.delayed(Duration(seconds: 1), () {
-                      setState(() {
-                        _width = 200;
-                        _height = 200;
-                        _alignment = Offset(50, 29);
-                        end = true;
-                      });
-                    });
-            },
+    return AnimatedBuilder(
+        animation: controller,
+        builder: (BuildContext context, Widget child) {
+          return Container(
+              alignment: alignment.value,
               child: Container(
-                margin: const EdgeInsets.only(top: 80),
-                height: _height,
-                width: _width,
+                width: width.value,
+                height: height.value,
                 decoration: BoxDecoration(
-                  color: Colors.green,
-                  borderRadius: BorderRadius.circular(100),
-                ))));
+                    color: Colors.red, borderRadius: radius.value),
+              ));
+        });
   }
 }