try two

2021-01-15 16:38:21 +03:00
parent cae80a4ab8
commit 6947aa944d
13 changed files with 584 additions and 0 deletions
--- a/copy.dart
+++ b/copy.dart
@@ -0,0 +1,188 @@
+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;
+  double tm;
+
+  @override
+  void initState() {
+    super.initState();
+    param = "beginning";
+    _controller = AnimationController(
+      duration: Duration(seconds: 3),
+      vsync: this,
+    )..addListener(() => contrVal());
+  }
+
+  double timeM(double scene) {
+    int time = 10;
+    return scene / time;
+  }
+
+  @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";
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      child: Stack(
+        fit: StackFit.expand,
+        children: [
+          // Image.asset(
+          //   'assets/scrns/scrn1.png',
+          //   fit: BoxFit.cover,
+          // ),
+          ColorFiltered(
+            colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.8),
+                BlendMode.srcOut), // This one will create the magic
+            child: GestureDetector(
+              onTap: () {
+                _startAnim();
+              },
+              child: Stack(
+                fit: StackFit.expand,
+                children: [
+                  Container(
+                    decoration: BoxDecoration(
+                        color: Colors.black,
+                        backgroundBlendMode: BlendMode
+                            .dstOut), // This one will handle background + difference out
+                  ),
+                  // Align(
+                  //   alignment: Alignment.topCenter,
+                  //   child: Container(
+                  //     margin: const EdgeInsets.only(top: 30),
+                  //     height: 200,
+                  //     width: 200,
+                  //     decoration: BoxDecoration(
+                  //       color: Colors.red,
+                  //       // borderRadius: BorderRadius.circular(100),
+                  //     ),
+                  //   ),
+                  // ),
+                  GestureDetector(
+                    onTap: () {
+                      _startAnim();
+                    },
+                    child: MovHoleScrn1(
+                      controller: _controller,
+                    ),
+                    // Center(
+                    //   child: Text(
+                    //     'Hello World',
+                    //     style: TextStyle(fontSize: 65, fontWeight: FontWeight.w600),
+                    //   ),
+                  )
+                ],
+              ),
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}
+
+class MovHoleScrn1 extends StatelessWidget {
+  MovHoleScrn1({Key key, this.controller})
+      : width1 = Tween<double>(begin: 10.0, end: 300.0).animate(CurvedAnimation(
+            parent: controller,
+            curve: Interval(0.1, 0.5, curve: Curves.fastOutSlowIn))),
+        height1 = Tween<double>(begin: 10.0, end: 200.0).animate(
+            CurvedAnimation(
+                parent: controller,
+                curve: Interval(0.1, 0.5, curve: Curves.fastOutSlowIn))),
+        movement1 = EdgeInsetsTween(
+                begin: EdgeInsets.only(bottom: 1, left: 1),
+                end: EdgeInsets.only(bottom: 300.0, left: 1.0))
+            .animate(CurvedAnimation(
+                parent: controller,
+                curve: Interval(0.1, 0.5, curve: Curves.fastOutSlowIn))),
+        width2 = Tween<double>(begin: 300.0, end: 300.0).animate(
+            CurvedAnimation(
+                parent: controller,
+                curve: Interval(0.5, 1, curve: Curves.fastOutSlowIn))),
+        height2 = Tween<double>(begin: 200.0, end: 200.0).animate(
+            CurvedAnimation(
+                parent: controller,
+                curve: Interval(0.5, 1, curve: Curves.fastOutSlowIn))),
+        movement2 = EdgeInsetsTween(
+                begin: EdgeInsets.only(bottom: 1, left: 1),
+                end: EdgeInsets.only(bottom: 100.0, left: 1.0))
+            .animate(CurvedAnimation(
+                parent: controller,
+                curve: Interval(0.5, 1, curve: Curves.fastOutSlowIn))),
+        super(key: key);
+
+  final Animation<double> width1;
+  final Animation<double> height1;
+  final Animation<EdgeInsets> movement1;
+  final Animation<double> width2;
+  final Animation<double> height2;
+  final Animation<EdgeInsets> movement2;
+
+  final Animation<double> controller;
+  final Color color = Colors.black;
+
+  Widget build(BuildContext context) {
+    return AnimatedBuilder(
+        animation: controller,
+        builder: (BuildContext context, Widget child) {
+          return movement1.isCompleted
+              ? Container(
+                  padding: movement1.value,
+                  alignment: Alignment.center,
+                  child: Container(
+                    width: width1.value,
+                    height: height1.value,
+                    color: color,
+                  ))
+              : Container(
+                  padding: movement2.value,
+                  alignment: Alignment.center,
+                  child: Container(
+                    width: width2.value,
+                    height: height2.value,
+                    color: color,
+                  ));
+        });
+  }
+}