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