New hole approach

lib/main.dart

@@ -1,189 +1,74 @@
+import 'dart:math';
 import 'package:flutter/material.dart';
-import 'package:flutter/scheduler.dart';
-import 'dart:async';
 
-void main() => runApp(MyApp());
+final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
+
+void main() {
+  runApp(MyApp());
+}
 
 class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
-    return MaterialApp(home: Scaffold(body: App()));
+    return MaterialApp(
+      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
+      debugShowCheckedModeBanner: false,
+      home: Scaffold(
+        body: Center(
+          child: MyWidget(),
+        ),
+      ),
+    );
   }
 }
 
-class App extends StatefulWidget {
-  @override
-  AppState createState() => AppState();
-}
-
-class AppState extends State<App> with SingleTickerProviderStateMixin {
-  AnimationController _controller;
-  String param;
-  double tm;
-
-  @override
-  void initState() {
-    super.initState();
-    param = "beginning";
-    _controller = AnimationController(
-      duration: Duration(milliseconds: 10000),
-      vsync: this,
-    )..addListener(() => contrVal());
-  }
-
-  @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');
-    }
-  }
-
-  contrVal() {
-    setState(() {
-      tm = _controller.value;
-      if (_controller.value >= 0.2) param = 'two seconds';
-      if (_controller.value >= 0.5) param = "five seconds";
-      if (_controller.value >= 1) param = "ten seconds";
-    });
-  }
-
+class MyWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
-    return Material(
-        child: GestureDetector(
-      onTap: () {
-        _startAnim();
-      },
+    return Transform.rotate(
+        angle: 0,
+        child: Scaffold(
+            appBar: AppBar(
+              title: Text('Hello, again'),
+            ),
+            body: Stack(
+//         fit: StackFit.expand,
+                children: [
+                  Container(
+                      height: 800,
+                      width: 800,
+                      child: Image.network(
+                        'https://wallpaperplay.com/walls/full/e/5/3/13586.jpg',
+                        fit: BoxFit.cover,
+                      )),
+                  _getOverlay()
+                ])));
+  }
+
+  Widget _getOverlay() {
+    return ColorFiltered(
+      colorFilter: ColorFilter.mode(Colors.black54, BlendMode.srcOut),
       child: Stack(
-        fit: StackFit.expand,
         children: [
-          Image.network(
-            'https://wallpaperplay.com/walls/full/e/5/3/13586.jpg',
-            fit: BoxFit.cover,
-          ),
-          ColorFiltered(
-            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
+          Container(
+            decoration: BoxDecoration(
+              color: Colors.transparent,
+            ),
+            child: Align(
+              alignment: Alignment(-0.3, -0.8),
+              child: Container(
+                margin: const EdgeInsets.only(right: 4, bottom: 4),
+                height: 80,
+                width: 160,
+                decoration: BoxDecoration(
+                  color: Colors.black, // Color does not matter but should not be transparent
+                  borderRadius: BorderRadius.circular(40),
                 ),
-                MovingHole(controller: _controller),
-              ],
+              ),
             ),
           ),
-          Container(
-              alignment: Alignment.bottomCenter,
-              child: Text(
-                "$param - $tm",
-                style:
-                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
-              ))
         ],
       ),
-    ));
+    );
   }
 }
-
-class MovingHole extends StatelessWidget {
-  double timeM(double scene) {
-    int time = 10;
-    return scene / time;
-  }
-
-  MovingHole({Key key, this.controller})
-      : scale1 = Tween<double>(begin: 1.0, end: 0.5).animate(
-          CurvedAnimation(
-            parent: controller,
-            curve: Interval(0.05, 0.075, curve: Curves.easeOut),
-          ),
-        ),
-        scale2 = Tween<double>(begin: 0.5, end: 1.2).animate(
-          CurvedAnimation(
-            parent: controller,
-            curve: const Interval(
-              0.5,
-              0.55,
-              curve: Curves.ease,
-            ),
-          ),
-        ),
-        move1 = Tween<Offset>(begin: Offset(0, 20), end: Offset(-20, 100))
-            .animate(CurvedAnimation(
-          parent: controller,
-          curve: const Interval(
-            0.0,
-            0.1,
-            curve: Curves.ease,
-          ),
-        )),
-        move2 = Tween<Offset>(begin: Offset(50, 100), end: Offset(30, 20))
-            .animate(CurvedAnimation(
-          parent: controller,
-          curve: const Interval(
-            0.9,
-            1.0,
-            curve: Curves.ease,
-          ),
-        )),
-        super(key: key);
-
-  final AnimationController controller;
-  final Animation<double> scale1;
-  final Animation<double> scale2;
-  final Animation<Offset> move1;
-  final Animation<Offset> move2;
-  final Color color = Colors.black;
-  // final Size size;
-
-  @override
-  Widget build(BuildContext context) {
-    return AnimatedBuilder(
-        animation: controller,
-        builder: (BuildContext context, Widget child) {
-          return Container(
-            child: Transform(
-                alignment: Alignment.center,
-                transform: Matrix4.identity()
-                  ..scale(scale1.value)
-                  ..scale(scale2.value)
-                  ..translate(
-                    move1.value.dx,
-                    move1.value.dy,
-                  )
-                  ..translate(
-                    move2.value.dx,
-                    move2.value.dy,
-                  ),
-                // child: Opacity(
-                //     opacity: opacityAnimation.value,
-                child: Container(
-                  width: 60.0,
-                  height: 60.0,
-                  decoration: BoxDecoration(
-                      shape: BoxShape.circle,
-                      color: color,
-                      border: Border.all(
-                          color: color,
-                          style: BorderStyle.solid,
-                          width: 4.0 - (2 * controller.value))),
-                )),
-          );
-        });
-  }
-}
-// создать переменную, листенером слить текущее значение, на поляне в стеке вывести.
-// сколько составляет 0.05 от 10 секунд

lib/~~main~~.dart

@@ -0,0 +1,198 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart';
+import 'dart:async';
+
+void main() => runApp(MyApp());
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(home: Scaffold(body: App()));
+  }
+}
+
+class App extends StatefulWidget {
+  @override
+  AppState createState() => AppState();
+}
+
+class AppState extends State<App> with SingleTickerProviderStateMixin {
+  AnimationController _controller;
+  String param;
+  int playTime = 10;
+  double tm;
+
+  @override
+  void initState() {
+    super.initState();
+    param = "beginning";
+    _controller = AnimationController(
+      duration: Duration(seconds: playTime),
+      vsync: this,
+    )..addListener(() => contrVal());
+  }
+
+  @override
+  void dispose() {
+    _controller?.dispose();
+    super.dispose();
+  }
+
+  Future _startAnim() async {
+    try {
+      _controller.reset();
+      await _controller.forward().orCancel;
+      // await _controller.reverse().orCancel;
+    } on TickerCanceled {
+      print('welp we fucked');
+    }
+  }
+
+  contrVal() {
+    setState(() {
+      tm = _controller.value;
+      if (_controller.value >= 0.2) param = 'two seconds';
+      if (_controller.value >= 0.5) param = "five seconds";
+      if (_controller.value >= 1) param = "ten seconds";
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+        child: GestureDetector(
+      onTap: () {
+        _startAnim();
+      },
+      child: Stack(
+        fit: StackFit.expand,
+        children: [
+          Image.network(
+            'https://wallpaperplay.com/walls/full/e/5/3/13586.jpg',
+            fit: BoxFit.cover,
+          ),
+          ColorFiltered(
+            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
+                ),
+                // Container(width: 100, height: 100, decoration: BoxDecoration(color: Colors.black)),
+                MovingHole(
+                  controller: _controller,
+                  time: playTime,
+                ),
+              ],
+            ),
+          ),
+          Container(
+              alignment: Alignment.bottomCenter,
+              child: Text(
+                "$param",
+                style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
+              ))
+        ],
+      ),
+    ));
+  }
+}
+
+class MovingHole extends StatefulWidget {
+  MovingHole({Key key, this.controller, this.time}) : super(key: key);
+
+  final int time;
+  final AnimationController controller;
+
+  @override
+  _MovingHoleState createState() => _MovingHoleState();
+}
+
+class _MovingHoleState extends State<MovingHole> {
+  _MovingHoleState();
+  AnimationController controller;
+  List<Animation<double>> scale = [];
+  List<Animation<Offset>> move = [];
+
+  @override
+  void initState() {
+    super.initState();
+    controller = widget.controller;
+    scale
+      ..add(Tween<double>(begin: 1.0, end: 0.5).animate(
+        CurvedAnimation(
+          parent: controller,
+          curve: Interval(tu(0.5), tu(1.25), curve: Curves.easeOut),
+        ),
+      ))
+      ..add(Tween<double>(begin: 0.5, end: 1.2).animate(
+        CurvedAnimation(
+          parent: controller,
+          curve: Interval(
+            tu(3.5),
+            tu(4.0),
+            curve: Curves.ease,
+          ),
+        ),
+      ));
+    move
+      ..add(Tween<Offset>(begin: Offset(0, 20), end: Offset(-20, 100)).animate(CurvedAnimation(
+        parent: controller,
+        curve: Interval(
+          tu(0.0),
+          tu(0.5),
+          curve: Curves.ease,
+        ),
+      )))
+      ..add(Tween<Offset>(begin: Offset(50, 100), end: Offset(30, 20)).animate(CurvedAnimation(
+        parent: controller,
+        curve: Interval(
+          0.9,
+          1.0,
+          curve: Curves.ease,
+        ),
+      )));
+  }
+
+  double tu(double value) {
+    return value / widget.time;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    Matrix4 allMoves = Matrix4.identity();
+    scale.forEach((item) {
+      allMoves.scale(item.value);
+    });
+    move.forEach((item) {
+      allMoves.translate(item.value.dx, item.value.dy);
+    });
+    return
+        // AnimatedBuilder(
+        //     animation: controller,
+        //     builder: (BuildContext context, Widget child) {
+        //       return
+        //           // Container(
+        //   child:
+        Transform(
+      alignment: Alignment.topLeft,
+      transform: allMoves,
+      child: Container(
+          // width: 60.0,
+          // height: 10.0,
+          decoration: BoxDecoration(
+        shape: BoxShape.rectangle,
+        color: Colors.black,
+        // border: Border.all(color: color, style: BorderStyle.solid, width: 4.0 - (2 * controller.value))
+        // ),
+      )),
+    );
+    // });
+  }
+}
+// создать переменную, листенером слить текущее значение, на поляне в стеке вывести.
+// сколько составляет 0.05 от 10 секунд

test/widget_test.dart

@@ -8,7 +8,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 
-import 'package:moving_hole/main.dart';
+import 'package:moving_hole/~~main~~.dart';
 
 void main() {
   testWidgets('Counter increments smoke test', (WidgetTester tester) async {