From bd9855b67334e88d6edef5785a676ef3d02a9c52 Mon Sep 17 00:00:00 2001 From: DMK Date: Thu, 14 Jan 2021 12:17:27 +0300 Subject: [PATCH] New hole approach --- lib/main.dart | 223 ++++++++++-------------------------------- lib/~~main~~.dart | 198 +++++++++++++++++++++++++++++++++++++ test/widget_test.dart | 2 +- 3 files changed, 253 insertions(+), 170 deletions(-) create mode 100644 lib/~~main~~.dart diff --git a/lib/main.dart b/lib/main.dart index 6b4f0c5..6b7fede 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,189 +1,74 @@ +import 'dart:math'; import 'package:flutter/material.dart'; -import 'package:flutter/scheduler.dart'; -import 'dart:async'; -void main() => runApp(MyApp()); +final Color darkBlue = Color.fromARGB(255, 18, 32, 47); + +void main() { + runApp(MyApp()); +} class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { - return MaterialApp(home: Scaffold(body: App())); + return MaterialApp( + theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue), + debugShowCheckedModeBanner: false, + home: Scaffold( + body: Center( + child: MyWidget(), + ), + ), + ); } } -class App extends StatefulWidget { - @override - AppState createState() => AppState(); -} - -class AppState extends State with SingleTickerProviderStateMixin { - AnimationController _controller; - String param; - double tm; - - @override - void initState() { - super.initState(); - param = "beginning"; - _controller = AnimationController( - duration: Duration(milliseconds: 10000), - vsync: this, - )..addListener(() => contrVal()); - } - - @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"; - }); - } - +class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { - return Material( - child: GestureDetector( - onTap: () { - _startAnim(); - }, + return Transform.rotate( + angle: 0, + child: Scaffold( + appBar: AppBar( + title: Text('Hello, again'), + ), + body: Stack( +// fit: StackFit.expand, + children: [ + Container( + height: 800, + width: 800, + child: Image.network( + 'https://wallpaperplay.com/walls/full/e/5/3/13586.jpg', + fit: BoxFit.cover, + )), + _getOverlay() + ]))); + } + + Widget _getOverlay() { + return ColorFiltered( + colorFilter: ColorFilter.mode(Colors.black54, BlendMode.srcOut), 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 + Container( + decoration: BoxDecoration( + color: Colors.transparent, + ), + child: Align( + alignment: Alignment(-0.3, -0.8), + child: Container( + margin: const EdgeInsets.only(right: 4, bottom: 4), + height: 80, + width: 160, + decoration: BoxDecoration( + color: Colors.black, // Color does not matter but should not be transparent + borderRadius: BorderRadius.circular(40), ), - MovingHole(controller: _controller), - ], + ), ), ), - Container( - alignment: Alignment.bottomCenter, - child: Text( - "$param - $tm", - style: - TextStyle(color: Colors.white, fontWeight: FontWeight.bold), - )) ], ), - )); + ); } } - -class MovingHole extends StatelessWidget { - double timeM(double scene) { - int time = 10; - return scene / time; - } - - MovingHole({Key key, this.controller}) - : scale1 = Tween(begin: 1.0, end: 0.5).animate( - CurvedAnimation( - parent: controller, - curve: Interval(0.05, 0.075, curve: Curves.easeOut), - ), - ), - scale2 = Tween(begin: 0.5, end: 1.2).animate( - CurvedAnimation( - parent: controller, - curve: const Interval( - 0.5, - 0.55, - curve: Curves.ease, - ), - ), - ), - move1 = Tween(begin: Offset(0, 20), end: Offset(-20, 100)) - .animate(CurvedAnimation( - parent: controller, - curve: const Interval( - 0.0, - 0.1, - curve: Curves.ease, - ), - )), - move2 = Tween(begin: Offset(50, 100), end: Offset(30, 20)) - .animate(CurvedAnimation( - parent: controller, - curve: const Interval( - 0.9, - 1.0, - curve: Curves.ease, - ), - )), - super(key: key); - - final AnimationController controller; - final Animation scale1; - final Animation scale2; - final Animation move1; - final Animation move2; - final Color color = Colors.black; - // final Size size; - - @override - Widget build(BuildContext context) { - return AnimatedBuilder( - animation: controller, - builder: (BuildContext context, Widget child) { - return Container( - child: Transform( - alignment: Alignment.center, - transform: Matrix4.identity() - ..scale(scale1.value) - ..scale(scale2.value) - ..translate( - move1.value.dx, - move1.value.dy, - ) - ..translate( - move2.value.dx, - move2.value.dy, - ), - // child: Opacity( - // opacity: opacityAnimation.value, - child: Container( - width: 60.0, - height: 60.0, - decoration: BoxDecoration( - shape: BoxShape.circle, - color: color, - border: Border.all( - color: color, - style: BorderStyle.solid, - width: 4.0 - (2 * controller.value))), - )), - ); - }); - } -} -// создать переменную, листенером слить текущее значение, на поляне в стеке вывести. -// сколько составляет 0.05 от 10 секунд diff --git a/lib/~~main~~.dart b/lib/~~main~~.dart new file mode 100644 index 0000000..5f762ed --- /dev/null +++ b/lib/~~main~~.dart @@ -0,0 +1,198 @@ +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 with SingleTickerProviderStateMixin { + AnimationController _controller; + String param; + int playTime = 10; + double tm; + + @override + void initState() { + super.initState(); + param = "beginning"; + _controller = AnimationController( + duration: Duration(seconds: playTime), + vsync: this, + )..addListener(() => contrVal()); + } + + @override + void dispose() { + _controller?.dispose(); + super.dispose(); + } + + Future _startAnim() async { + try { + _controller.reset(); + 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: GestureDetector( + onTap: () { + _startAnim(); + }, + 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 + ), + // Container(width: 100, height: 100, decoration: BoxDecoration(color: Colors.black)), + MovingHole( + controller: _controller, + time: playTime, + ), + ], + ), + ), + Container( + alignment: Alignment.bottomCenter, + child: Text( + "$param", + style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold), + )) + ], + ), + )); + } +} + +class MovingHole extends StatefulWidget { + MovingHole({Key key, this.controller, this.time}) : super(key: key); + + final int time; + final AnimationController controller; + + @override + _MovingHoleState createState() => _MovingHoleState(); +} + +class _MovingHoleState extends State { + _MovingHoleState(); + AnimationController controller; + List> scale = []; + List> move = []; + + @override + void initState() { + super.initState(); + controller = widget.controller; + scale + ..add(Tween(begin: 1.0, end: 0.5).animate( + CurvedAnimation( + parent: controller, + curve: Interval(tu(0.5), tu(1.25), curve: Curves.easeOut), + ), + )) + ..add(Tween(begin: 0.5, end: 1.2).animate( + CurvedAnimation( + parent: controller, + curve: Interval( + tu(3.5), + tu(4.0), + curve: Curves.ease, + ), + ), + )); + move + ..add(Tween(begin: Offset(0, 20), end: Offset(-20, 100)).animate(CurvedAnimation( + parent: controller, + curve: Interval( + tu(0.0), + tu(0.5), + curve: Curves.ease, + ), + ))) + ..add(Tween(begin: Offset(50, 100), end: Offset(30, 20)).animate(CurvedAnimation( + parent: controller, + curve: Interval( + 0.9, + 1.0, + curve: Curves.ease, + ), + ))); + } + + double tu(double value) { + return value / widget.time; + } + + @override + Widget build(BuildContext context) { + Matrix4 allMoves = Matrix4.identity(); + scale.forEach((item) { + allMoves.scale(item.value); + }); + move.forEach((item) { + allMoves.translate(item.value.dx, item.value.dy); + }); + return + // AnimatedBuilder( + // animation: controller, + // builder: (BuildContext context, Widget child) { + // return + // // Container( + // child: + Transform( + alignment: Alignment.topLeft, + transform: allMoves, + child: Container( + // width: 60.0, + // height: 10.0, + decoration: BoxDecoration( + shape: BoxShape.rectangle, + color: Colors.black, + // border: Border.all(color: color, style: BorderStyle.solid, width: 4.0 - (2 * controller.value)) + // ), + )), + ); + // }); + } +} +// создать переменную, листенером слить текущее значение, на поляне в стеке вывести. +// сколько составляет 0.05 от 10 секунд diff --git a/test/widget_test.dart b/test/widget_test.dart index 6ae2d8a..075490f 100644 --- a/test/widget_test.dart +++ b/test/widget_test.dart @@ -8,7 +8,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; -import 'package:moving_hole/main.dart'; +import 'package:moving_hole/~~main~~.dart'; void main() { testWidgets('Counter increments smoke test', (WidgetTester tester) async {