diff --git a/lib/main.dart b/lib/main.dart index b8db24f..71ad4e5 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,4 +1,6 @@ import 'package:flutter/material.dart'; +import 'package:flutter/scheduler.dart'; +import 'dart:async'; void main() => runApp(MyApp()); @@ -14,10 +16,40 @@ class App extends StatefulWidget { AppState createState() => AppState(); } -class AppState extends State { +class AppState extends State with SingleTickerProviderStateMixin { + AnimationController _controller; + + @override + void initState() { + super.initState(); + _controller = AnimationController( + duration: Duration(seconds: 3), + vsync: this, + ); + } + + @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'); + } + } + @override Widget build(BuildContext context) { return Material( + child: GestureDetector( + onTap: () { + _startAnim(); + }, child: Stack( fit: StackFit.expand, children: [ @@ -26,70 +58,70 @@ class AppState extends State { fit: BoxFit.cover, ), ColorFiltered( - colorFilter: - ColorFilter.mode(Colors.black.withOpacity(0.8), BlendMode.srcOut), // This one will create the magic + 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 + backgroundBlendMode: BlendMode + .dstOut), // This one will handle background + difference out ), - MovingHole(), + MovingHole(controller: _controller) ], ), ), ], ), - ); + )); } } -class MovingHole extends StatefulWidget { - @override - MovingHoleState createState() => MovingHoleState(); -} +class MovingHole extends StatelessWidget { + MovingHole({Key key, this.controller}) + : width = Tween(begin: 50.0, end: 150.0).animate(CurvedAnimation( + parent: controller, + curve: Interval(0.0, 1, curve: Curves.fastOutSlowIn))), + height = Tween(begin: 50.0, end: 150.0).animate(CurvedAnimation( + parent: controller, + curve: Interval(0.0, 1, curve: Curves.fastOutSlowIn))), + radius = BorderRadiusTween( + begin: BorderRadius.circular(0.0), + end: BorderRadius.circular(100.0)) + .animate(CurvedAnimation( + parent: controller, + curve: Interval( + 0.0, + 1, + curve: Curves.ease, + ))), + alignment = AlignmentTween( + begin: Alignment.bottomCenter, end: Alignment.topCenter) + .animate(CurvedAnimation( + parent: controller, + curve: Interval(0.0, 1, curve: Curves.ease))), + super(key: key); -class MovingHoleState extends State { - double _width = 200; - double _height = 200; - Offset _alignment = Offset(100, 200); - bool end = true; + Animation controller; + Animation width; + Animation height; + Animation radius; + Animation alignment; - @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, + return AnimatedBuilder( + animation: controller, + builder: (BuildContext context, Widget child) { + return Container( + alignment: alignment.value, + child: Container( + width: width.value, + height: height.value, decoration: BoxDecoration( - color: Colors.green, - borderRadius: BorderRadius.circular(100), - )))); + color: Colors.red, borderRadius: radius.value), + )); + }); } }