96 lines
2.7 KiB
Dart
96 lines
2.7 KiB
Dart
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),
|
|
))));
|
|
}
|
|
}
|