arrow rotate and svg usage clean up

This commit is contained in:
julian 2023-04-24 16:26:54 -06:00
parent dbc34168ef
commit ef87517705
10 changed files with 182 additions and 386 deletions

View file

@ -1,9 +1,8 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:stackwallet/utilities/assets.dart';
import 'package:stackwallet/utilities/text_styles.dart';
import 'package:stackwallet/utilities/theme/stack_colors.dart';
import 'package:stackwallet/utilities/util.dart';
import 'package:stackwallet/widgets/animated_widgets/rotating_arrows.dart';
import 'package:stackwallet/widgets/desktop/desktop_dialog.dart';
import 'package:stackwallet/widgets/desktop/desktop_dialog_close_button.dart';
import 'package:stackwallet/widgets/desktop/secondary_button.dart';
@ -21,37 +20,15 @@ class RestoringDialog extends StatefulWidget {
State<RestoringDialog> createState() => _RestoringDialogState();
}
class _RestoringDialogState extends State<RestoringDialog>
with TickerProviderStateMixin {
late AnimationController? _spinController;
late Animation<double> _spinAnimation;
class _RestoringDialogState extends State<RestoringDialog> {
late final Future<void> Function() onCancel;
@override
void initState() {
onCancel = widget.onCancel;
_spinController = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
)..repeat();
_spinAnimation = CurvedAnimation(
parent: _spinController!,
curve: Curves.linear,
);
super.initState();
}
@override
void dispose() {
_spinController?.dispose();
_spinController = null;
super.dispose();
}
@override
Widget build(BuildContext context) {
if (Util.isDesktop) {
@ -69,14 +46,9 @@ class _RestoringDialogState extends State<RestoringDialog>
const Spacer(
flex: 1,
),
RotationTransition(
turns: _spinAnimation,
child: SvgPicture.asset(Assets.svg.arrowRotate,
width: 40,
height: 40,
color: Theme.of(context)
.extension<StackColors>()!
.accentColorDark),
const RotatingArrows(
width: 40,
height: 40,
),
const Spacer(
flex: 2,
@ -127,14 +99,9 @@ class _RestoringDialogState extends State<RestoringDialog>
child: StackDialog(
title: "Restoring wallet",
message: "This may take a while. Please do not exit this screen.",
icon: RotationTransition(
turns: _spinAnimation,
child: SvgPicture.asset(Assets.svg.arrowRotate,
width: 24,
height: 24,
color: Theme.of(context)
.extension<StackColors>()!
.accentColorDark),
icon: const RotatingArrows(
width: 24,
height: 24,
),
rightButton: TextButton(
style: Theme.of(context)

View file

@ -1,11 +1,8 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:lottie/lottie.dart';
import 'package:stackwallet/utilities/assets.dart';
import 'package:stackwallet/utilities/text_styles.dart';
import 'package:stackwallet/utilities/theme/stack_colors.dart';
import 'package:stackwallet/utilities/util.dart';
import 'package:stackwallet/widgets/animated_widgets/rotate_animation.dart';
import 'package:stackwallet/widgets/animated_widgets/rotating_arrows.dart';
import 'package:stackwallet/widgets/desktop/desktop_dialog.dart';
import 'package:stackwallet/widgets/desktop/desktop_dialog_close_button.dart';
import 'package:stackwallet/widgets/desktop/secondary_button.dart';
@ -20,40 +17,7 @@ class ClaimingPaynymDialog extends StatefulWidget {
State<ClaimingPaynymDialog> createState() => _RestoringDialogState();
}
class _RestoringDialogState extends State<ClaimingPaynymDialog>
with TickerProviderStateMixin {
late AnimationController? _spinController;
late Animation<double> _spinAnimation;
late RotateAnimationController? _rotateAnimationController;
@override
void initState() {
_spinController = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
)..repeat();
_spinAnimation = CurvedAnimation(
parent: _spinController!,
curve: Curves.linear,
);
_rotateAnimationController = RotateAnimationController();
super.initState();
}
@override
void dispose() {
_spinController?.dispose();
_spinController = null;
_rotateAnimationController?.forward = null;
_rotateAnimationController?.reset = null;
super.dispose();
}
class _RestoringDialogState extends State<ClaimingPaynymDialog> {
@override
Widget build(BuildContext context) {
if (Util.isDesktop) {
@ -70,15 +34,9 @@ class _RestoringDialogState extends State<ClaimingPaynymDialog>
),
],
),
RotationTransition(
turns: _spinAnimation,
child: SvgPicture.asset(
Assets.svg.arrowRotate,
color:
Theme.of(context).extension<StackColors>()!.accentColorDark,
width: 40,
height: 40,
),
const RotatingArrows(
width: 40,
height: 40,
),
Padding(
padding: const EdgeInsets.all(40),
@ -123,38 +81,9 @@ class _RestoringDialogState extends State<ClaimingPaynymDialog>
child: StackDialog(
title: "Claiming PayNym",
message: "We are generating your PayNym",
// icon: RotationTransition(
// turns: _spinAnimation,
// child: SvgPicture.asset(
// Assets.svg.arrowRotate,
// color:
// Theme.of(context).extension<StackColors>()!.accentColorDark,
// width: 24,
// height: 24,
// ),
// ),
icon: RotateAnimation(
lottie: Lottie.asset(
Assets.lottie.arrowRotate,
delegates: LottieDelegates(
values: [
ValueDelegate.color(
const ["**"],
value: Theme.of(context)
.extension<StackColors>()!
.accentColorDark,
),
ValueDelegate.strokeColor(
const ["**"],
value: Theme.of(context)
.extension<StackColors>()!
.accentColorDark,
),
],
),
),
curve: Curves.easeInOutCubic,
controller: _rotateAnimationController,
icon: const RotatingArrows(
width: 24,
height: 24,
),
rightButton: SecondaryButton(
label: "Cancel",

View file

@ -1,17 +1,14 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:lottie/lottie.dart';
import 'package:stackwallet/utilities/assets.dart';
import 'package:stackwallet/utilities/enums/coin_enum.dart';
import 'package:stackwallet/utilities/text_styles.dart';
import 'package:stackwallet/utilities/theme/color_theme.dart';
import 'package:stackwallet/utilities/theme/stack_colors.dart';
import 'package:stackwallet/utilities/util.dart';
import 'package:stackwallet/widgets/animated_widgets/rotating_arrows.dart';
import 'package:stackwallet/widgets/desktop/secondary_button.dart';
import 'package:stackwallet/widgets/stack_dialog.dart';
import '../../../widgets/animated_widgets/rotate_animation.dart';
class BuildingTransactionDialog extends StatefulWidget {
const BuildingTransactionDialog({
Key? key,
@ -26,45 +23,16 @@ class BuildingTransactionDialog extends StatefulWidget {
State<BuildingTransactionDialog> createState() => _RestoringDialogState();
}
class _RestoringDialogState extends State<BuildingTransactionDialog>
with TickerProviderStateMixin {
late AnimationController? _spinController;
late Animation<double> _spinAnimation;
late RotateAnimationController? _rotateAnimationController;
class _RestoringDialogState extends State<BuildingTransactionDialog> {
late final VoidCallback onCancel;
@override
void initState() {
onCancel = widget.onCancel;
_spinController = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
)..repeat();
_spinAnimation = CurvedAnimation(
parent: _spinController!,
curve: Curves.linear,
);
_rotateAnimationController = RotateAnimationController();
super.initState();
}
@override
void dispose() {
_spinController?.dispose();
_spinController = null;
_rotateAnimationController?.forward = null;
_rotateAnimationController?.reset = null;
super.dispose();
}
@override
Widget build(BuildContext context) {
final isChans = Theme.of(context).extension<StackColors>()!.themeType ==
@ -90,28 +58,9 @@ class _RestoringDialogState extends State<BuildingTransactionDialog>
),
),
if (!isChans)
RotateAnimation(
lottie: Lottie.asset(
Assets.lottie.arrowRotate,
delegates: LottieDelegates(
values: [
ValueDelegate.color(
const ["**"],
value: Theme.of(context)
.extension<StackColors>()!
.accentColorDark,
),
ValueDelegate.strokeColor(
const ["**"],
value: Theme.of(context)
.extension<StackColors>()!
.accentColorDark,
),
],
),
),
curve: Curves.easeInOutCubic,
controller: _rotateAnimationController,
const RotatingArrows(
width: 40,
height: 40,
),
const SizedBox(
height: 40,
@ -174,16 +123,9 @@ class _RestoringDialogState extends State<BuildingTransactionDialog>
)
: StackDialog(
title: "Generating transaction",
icon: RotationTransition(
turns: _spinAnimation,
child: SvgPicture.asset(
Assets.svg.arrowRotate,
color: Theme.of(context)
.extension<StackColors>()!
.accentColorDark,
width: 24,
height: 24,
),
icon: const RotatingArrows(
width: 24,
height: 24,
),
rightButton: TextButton(
style: Theme.of(context)

View file

@ -214,7 +214,7 @@ class _StackRestoreProgressViewState
@override
void initState() {
WidgetsBinding.instance.addPostFrameCallback((_) async {
_restore();
unawaited(_restore());
});
super.initState();
}
@ -325,7 +325,7 @@ class _StackRestoreProgressViewState
: null,
)
: RoundedContainer(
padding: EdgeInsets.all(0),
padding: EdgeInsets.zero,
color: Theme.of(context)
.extension<StackColors>()!
.popupBG,
@ -411,7 +411,7 @@ class _StackRestoreProgressViewState
: null,
)
: RoundedContainer(
padding: EdgeInsets.all(0),
padding: EdgeInsets.zero,
color: Theme.of(context)
.extension<StackColors>()!
.popupBG,
@ -497,7 +497,7 @@ class _StackRestoreProgressViewState
: null,
)
: RoundedContainer(
padding: EdgeInsets.all(0),
padding: EdgeInsets.zero,
color: Theme.of(context)
.extension<StackColors>()!
.popupBG,
@ -548,44 +548,42 @@ class _StackRestoreProgressViewState
final state = ref.watch(stackRestoringUIStateProvider
.select((value) => value.trades));
return !isDesktop
? Container(
child: RestoringItemCard(
left: SizedBox(
width: 32,
height: 32,
child: RoundedContainer(
padding: const EdgeInsets.all(0),
color: Theme.of(context)
.extension<StackColors>()!
.buttonBackSecondary,
child: Center(
child: SvgPicture.asset(
Assets.svg.arrowsTwoWay,
width: 16,
height: 16,
color: Theme.of(context)
.extension<StackColors>()!
.accentColorDark,
),
? RestoringItemCard(
left: SizedBox(
width: 32,
height: 32,
child: RoundedContainer(
padding: const EdgeInsets.all(0),
color: Theme.of(context)
.extension<StackColors>()!
.buttonBackSecondary,
child: Center(
child: SvgPicture.asset(
Assets.svg.arrowsTwoWay,
width: 16,
height: 16,
color: Theme.of(context)
.extension<StackColors>()!
.accentColorDark,
),
),
),
right: SizedBox(
width: 20,
height: 20,
child: _getIconForState(state),
),
title: "Exchange history",
subTitle: state == StackRestoringStatus.failed
? Text(
"Something went wrong",
style: STextStyles.errorSmall(context),
)
: null,
),
right: SizedBox(
width: 20,
height: 20,
child: _getIconForState(state),
),
title: "Exchange history",
subTitle: state == StackRestoringStatus.failed
? Text(
"Something went wrong",
style: STextStyles.errorSmall(context),
)
: null,
)
: RoundedContainer(
padding: EdgeInsets.all(0),
padding: EdgeInsets.zero,
color: Theme.of(context)
.extension<StackColors>()!
.popupBG,

View file

@ -1,8 +1,6 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:stackwallet/utilities/assets.dart';
import 'package:stackwallet/utilities/theme/stack_colors.dart';
import 'package:stackwallet/utilities/util.dart';
import 'package:stackwallet/widgets/animated_widgets/rotating_arrows.dart';
import 'package:stackwallet/widgets/conditional_parent.dart';
import 'package:stackwallet/widgets/desktop/desktop_dialog.dart';
import 'package:stackwallet/widgets/stack_dialog.dart';
@ -66,18 +64,12 @@ class _RescanningDialogState extends State<RescanningDialog>
maxWidth: 500,
child: child,
),
child: StackDialog(
child: const StackDialog(
title: "Rescanning blockchain",
message: "This may take a while. Please do not exit this screen.",
icon: RotationTransition(
turns: _spinAnimation,
child: SvgPicture.asset(
Assets.svg.arrowRotate,
width: 24,
height: 24,
color:
Theme.of(context).extension<StackColors>()!.accentColorDark,
),
icon: RotatingArrows(
width: 24,
height: 24,
),
// rightButton: TextButton(
// style: Theme.of(context).textButtonTheme.style?.copyWith(

View file

@ -3,15 +3,14 @@ import 'dart:async';
import 'package:event_bus/event_bus.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/svg.dart';
import 'package:stackwallet/pages/token_view/token_view.dart';
import 'package:stackwallet/providers/global/wallets_provider.dart';
import 'package:stackwallet/services/event_bus/events/global/wallet_sync_status_changed_event.dart';
import 'package:stackwallet/services/event_bus/global_event_bus.dart';
import 'package:stackwallet/utilities/assets.dart';
import 'package:stackwallet/utilities/constants.dart';
import 'package:stackwallet/utilities/theme/stack_colors.dart';
import 'package:stackwallet/utilities/util.dart';
import 'package:stackwallet/widgets/animated_widgets/rotating_arrows.dart';
/// [eventBus] should only be set during testing
class WalletRefreshButton extends ConsumerStatefulWidget {
@ -36,30 +35,16 @@ class WalletRefreshButton extends ConsumerStatefulWidget {
ConsumerState<WalletRefreshButton> createState() => _RefreshButtonState();
}
class _RefreshButtonState extends ConsumerState<WalletRefreshButton>
with TickerProviderStateMixin {
class _RefreshButtonState extends ConsumerState<WalletRefreshButton> {
late final EventBus eventBus;
late AnimationController? _spinController;
late Animation<double> _spinAnimation;
late RotatingArrowsController _spinController;
late StreamSubscription<dynamic> _syncStatusSubscription;
@override
void initState() {
_spinController = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
);
_spinAnimation = CurvedAnimation(
parent: _spinController!,
curve: Curves.linear,
);
if (widget.initialSyncStatus == WalletSyncStatus.syncing) {
_spinController?.repeat();
}
_spinController = RotatingArrowsController();
eventBus =
widget.eventBus != null ? widget.eventBus! : GlobalEventBus.instance;
@ -71,26 +56,26 @@ class _RefreshButtonState extends ConsumerState<WalletRefreshButton>
widget.tokenContractAddress == null) {
switch (event.newStatus) {
case WalletSyncStatus.unableToSync:
_spinController?.stop();
_spinController.stop?.call();
break;
case WalletSyncStatus.synced:
_spinController?.stop();
_spinController.stop?.call();
break;
case WalletSyncStatus.syncing:
unawaited(_spinController?.repeat());
_spinController.repeat?.call();
break;
}
} else if (widget.tokenContractAddress != null &&
event.walletId == widget.walletId + widget.tokenContractAddress!) {
switch (event.newStatus) {
case WalletSyncStatus.unableToSync:
_spinController?.stop();
_spinController.stop?.call();
break;
case WalletSyncStatus.synced:
_spinController?.stop();
_spinController.stop?.call();
break;
case WalletSyncStatus.syncing:
unawaited(_spinController?.repeat());
_spinController.repeat?.call();
break;
}
}
@ -102,9 +87,6 @@ class _RefreshButtonState extends ConsumerState<WalletRefreshButton>
@override
void dispose() {
_spinController?.dispose();
_spinController = null;
_syncStatusSubscription.cancel();
super.dispose();
@ -129,11 +111,11 @@ class _RefreshButtonState extends ConsumerState<WalletRefreshButton>
.getManagerProvider(widget.walletId);
final isRefreshing = ref.read(managerProvider).isRefreshing;
if (!isRefreshing) {
_spinController?.repeat();
_spinController.repeat?.call();
ref
.read(managerProvider)
.refresh()
.then((_) => _spinController?.stop());
.then((_) => _spinController.stop?.call());
}
} else {
if (!ref.read(tokenServiceProvider)!.isRefreshing) {
@ -151,22 +133,20 @@ class _RefreshButtonState extends ConsumerState<WalletRefreshButton>
Constants.size.circularBorderRadius,
),
),
child: RotationTransition(
turns: _spinAnimation,
child: SvgPicture.asset(
Assets.svg.arrowRotate,
width: isDesktop ? 12 : 24,
height: isDesktop ? 12 : 24,
color: widget.overrideIconColor != null
? widget.overrideIconColor!
: isDesktop
? Theme.of(context)
.extension<StackColors>()!
.textFieldDefaultSearchIconRight
: Theme.of(context)
.extension<StackColors>()!
.textFavoriteCard,
),
child: RotatingArrows(
spinByDefault: widget.initialSyncStatus == WalletSyncStatus.syncing,
width: isDesktop ? 12 : 24,
height: isDesktop ? 12 : 24,
controller: _spinController,
color: widget.overrideIconColor != null
? widget.overrideIconColor!
: isDesktop
? Theme.of(context)
.extension<StackColors>()!
.textFieldDefaultSearchIconRight
: Theme.of(context)
.extension<StackColors>()!
.textFavoriteCard,
),
),
);

View file

@ -1,7 +1,5 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:stackwallet/utilities/assets.dart';
import 'package:stackwallet/utilities/theme/stack_colors.dart';
import 'package:stackwallet/widgets/animated_widgets/rotating_arrows.dart';
import 'package:stackwallet/widgets/stack_dialog.dart';
class CancellingTransactionProgressDialog extends StatefulWidget {
@ -13,51 +11,19 @@ class CancellingTransactionProgressDialog extends StatefulWidget {
}
class _CancellingTransactionProgressDialogState
extends State<CancellingTransactionProgressDialog>
with TickerProviderStateMixin {
late AnimationController? _spinController;
late Animation<double> _spinAnimation;
@override
void initState() {
_spinController = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
)..repeat();
_spinAnimation = CurvedAnimation(
parent: _spinController!,
curve: Curves.linear,
);
super.initState();
}
@override
void dispose() {
_spinController?.dispose();
_spinController = null;
super.dispose();
}
extends State<CancellingTransactionProgressDialog> {
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async {
return false;
},
child: StackDialog(
child: const StackDialog(
title: "Cancelling transaction",
message: "This may take a while. Please do not exit this screen.",
icon: RotationTransition(
turns: _spinAnimation,
child: SvgPicture.asset(
Assets.svg.arrowRotate,
width: 24,
height: 24,
color: Theme.of(context).extension<StackColors>()!.accentColorDark,
),
icon: RotatingArrows(
width: 24,
height: 24,
),
// rightButton: TextButton(
// style: Theme.of(context).textButtonTheme.style?.copyWith(

View file

@ -1,64 +0,0 @@
import 'package:flutter/widgets.dart';
class RotateAnimationController {
VoidCallback? forward;
VoidCallback? reset;
}
class RotateAnimation extends StatefulWidget {
const RotateAnimation({
Key? key,
required this.lottie,
required this.curve,
this.controller,
}) : super(key: key);
final Widget lottie;
final Curve curve;
final RotateAnimationController? controller;
@override
State<RotateAnimation> createState() => _RotateAnimationState();
}
class _RotateAnimationState extends State<RotateAnimation>
with SingleTickerProviderStateMixin {
late final AnimationController animationController;
late final Animation<double> animation;
late final Duration duration;
@override
void initState() {
animationController = AnimationController(
vsync: this,
);
animation = Tween<double>(
begin: 0.0,
).animate(
CurvedAnimation(
curve: widget.curve,
parent: animationController,
),
);
widget.controller?.forward = animationController.forward;
widget.controller?.reset = animationController.reset;
super.initState();
}
@override
void dispose() {
animationController.dispose();
widget.controller?.forward = null;
super.dispose();
}
@override
Widget build(BuildContext context) {
return RotationTransition(
turns: animation,
child: widget.lottie,
);
}
}

View file

@ -0,0 +1,87 @@
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
import 'package:stackwallet/utilities/assets.dart';
import 'package:stackwallet/utilities/theme/stack_colors.dart';
class RotatingArrowsController {
VoidCallback? forward;
VoidCallback? repeat;
VoidCallback? stop;
}
class RotatingArrows extends StatefulWidget {
const RotatingArrows({
Key? key,
required this.height,
required this.width,
this.controller,
this.color,
this.spinByDefault = true,
}) : super(key: key);
final double height;
final double width;
final RotatingArrowsController? controller;
final Color? color;
final bool spinByDefault;
@override
State<RotatingArrows> createState() => _RotatingArrowsState();
}
class _RotatingArrowsState extends State<RotatingArrows>
with SingleTickerProviderStateMixin {
late final AnimationController animationController;
@override
void initState() {
animationController = AnimationController(vsync: this);
widget.controller?.forward = animationController.forward;
widget.controller?.repeat = animationController.repeat;
widget.controller?.stop = animationController.stop;
super.initState();
}
@override
void dispose() {
animationController.dispose();
widget.controller?.forward = null;
widget.controller?.repeat = null;
widget.controller?.stop = null;
super.dispose();
}
@override
Widget build(BuildContext context) {
return Lottie.asset(
Assets.lottie.arrowRotate,
controller: animationController,
height: widget.height,
width: widget.width,
delegates: LottieDelegates(
values: [
ValueDelegate.color(
const ["**"],
value: widget.color ??
Theme.of(context).extension<StackColors>()!.accentColorDark,
),
ValueDelegate.strokeColor(
const ["**"],
value: widget.color ??
Theme.of(context).extension<StackColors>()!.accentColorDark,
),
],
),
onLoaded: (composition) {
animationController.duration = composition.duration;
// if controller was not set just assume continuous repeat
if (widget.spinByDefault) {
animationController.repeat();
}
},
);
}
}

View file

@ -248,7 +248,6 @@ flutter:
- assets/svg/chevron-up.svg
- assets/svg/lock-keyhole.svg
- assets/svg/lock-open.svg
- assets/svg/rotate-exclamation.svg
- assets/svg/folder-down.svg
- assets/svg/network-wired.svg
- assets/svg/network-wired-2.svg