import 'package:flutter/material.dart';

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> {
  @override
  Widget build(BuildContext context) {
    return Material(
      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
                ),
                MovingHole(),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class MovingHole extends StatefulWidget {
  @override
  MovingHoleState createState() => MovingHoleState();
}

class MovingHoleState extends State<MovingHole> {
  double _width = 200;
  double _height = 200;
  Offset _alignment = Offset(100, 200);
  bool end = true;

  @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;
                      });
                    });
            },
            child: Container(
                margin: const EdgeInsets.only(top: 80),
                height: _height,
                width: _width,
                decoration: BoxDecoration(
                  color: Colors.green,
                  borderRadius: BorderRadius.circular(100),
                ))));
  }
}