From 6fb692da0ced9c4a71ec9705773eb00c7a322492 Mon Sep 17 00:00:00 2001 From: ryleedavis Date: Fri, 3 Mar 2023 10:27:20 -0700 Subject: [PATCH] stack icon rotates --- lib/pages/home_view/home_view.dart | 21 ++++- lib/widgets/animated_widgets/rotate_icon.dart | 76 +++++++++++++++++++ 2 files changed, 93 insertions(+), 4 deletions(-) create mode 100644 lib/widgets/animated_widgets/rotate_icon.dart diff --git a/lib/pages/home_view/home_view.dart b/lib/pages/home_view/home_view.dart index 71acb919b..c5c253a01 100644 --- a/lib/pages/home_view/home_view.dart +++ b/lib/pages/home_view/home_view.dart @@ -17,6 +17,7 @@ import 'package:stackwallet/utilities/assets.dart'; import 'package:stackwallet/utilities/constants.dart'; import 'package:stackwallet/utilities/text_styles.dart'; import 'package:stackwallet/utilities/theme/stack_colors.dart'; +import 'package:stackwallet/widgets/animated_widgets/rotate_icon.dart'; import 'package:stackwallet/widgets/background.dart'; import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart'; import 'package:stackwallet/widgets/stack_dialog.dart'; @@ -34,6 +35,7 @@ class _HomeViewState extends ConsumerState { final GlobalKey _key = GlobalKey(); late final PageController _pageController; + late final RotateIconController _rotateIconController; late final List _children; @@ -102,6 +104,7 @@ class _HomeViewState extends ConsumerState { @override void initState() { _pageController = PageController(); + _rotateIconController = RotateIconController(); _children = [ const WalletsView(), if (Constants.enableExchange) @@ -131,6 +134,9 @@ class _HomeViewState extends ConsumerState { @override dispose() { _pageController.dispose(); + _rotateIconController.forward = null; + _rotateIconController.reverse = null; + _rotateIconController.reset = null; super.dispose(); } @@ -138,6 +144,8 @@ class _HomeViewState extends ConsumerState { int _hiddenCount = 0; void _hiddenOptions() { + _rotateIconController.reset?.call(); + _rotateIconController.forward?.call(); if (_hiddenCount == 5) { Navigator.of(context).pushNamed(HiddenSettings.routeName); } @@ -168,10 +176,15 @@ class _HomeViewState extends ConsumerState { children: [ GestureDetector( onTap: _hiddenOptions, - child: SvgPicture.asset( - Assets.svg.stackIcon(context), - width: 24, - height: 24, + child: RotateIcon( + icon: SvgPicture.asset( + Assets.svg.stackIcon(context), + width: 24, + height: 24, + ), + curve: Curves.easeInOutCubic, + rotationPercent: 1.0, + controller: _rotateIconController, ), ), const SizedBox( diff --git a/lib/widgets/animated_widgets/rotate_icon.dart b/lib/widgets/animated_widgets/rotate_icon.dart new file mode 100644 index 000000000..d93f6b36a --- /dev/null +++ b/lib/widgets/animated_widgets/rotate_icon.dart @@ -0,0 +1,76 @@ +import 'package:flutter/widgets.dart'; + +class RotateIconController { + VoidCallback? forward; + VoidCallback? reverse; + VoidCallback? reset; +} + +class RotateIcon extends StatefulWidget { + const RotateIcon({ + Key? key, + required this.icon, + required this.curve, + this.controller, + this.animationDurationMultiplier = 1.0, + this.rotationPercent = 0.5, + }) : super(key: key); + + final Widget icon; + final Curve curve; + final RotateIconController? controller; + final double animationDurationMultiplier; + final double rotationPercent; + + @override + State createState() => _RotateIconState(); +} + +class _RotateIconState extends State + with SingleTickerProviderStateMixin { + late final AnimationController animationController; + late final Animation animation; + late final Duration duration; + + @override + void initState() { + duration = Duration( + milliseconds: (500 * widget.animationDurationMultiplier).toInt(), + ); + animationController = AnimationController( + vsync: this, + duration: duration, + ); + animation = Tween( + begin: 0.0, + end: widget.rotationPercent, + ).animate( + CurvedAnimation( + curve: widget.curve, + parent: animationController, + ), + ); + + widget.controller?.forward = animationController.forward; + widget.controller?.reverse = animationController.reverse; + widget.controller?.reset = animationController.reset; + + super.initState(); + } + + @override + void dispose() { + animationController.dispose(); + widget.controller?.forward = null; + widget.controller?.reverse = null; + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return RotationTransition( + turns: animation, + child: widget.icon, + ); + } +}