diff --git a/lib/new-ui/widgets/receive_page/receive_qr_code.dart b/lib/new-ui/widgets/receive_page/receive_qr_code.dart index b5428421c..e6f4ba5d1 100644 --- a/lib/new-ui/widgets/receive_page/receive_qr_code.dart +++ b/lib/new-ui/widgets/receive_page/receive_qr_code.dart @@ -6,7 +6,6 @@ import 'package:cake_wallet/view_model/wallet_address_list/wallet_address_list_v import 'package:cw_core/crypto_currency.dart'; import 'package:flutter/material.dart'; import 'package:flutter_mobx/flutter_mobx.dart'; -import 'package:flutter_svg/flutter_svg.dart'; import '../../../src/screens/receive/widgets/qr_image.dart'; @@ -22,40 +21,57 @@ class ReceiveQrCode extends StatelessWidget { final bool largeQrMode; final WalletAddressListViewModel addressListViewModel; - static const double largeQrModeBottomPadding = 70; + static const double largeQrModeBottomPadding = 140; + static const Duration animDuration = Duration(milliseconds: 500); final bool isLightMode = !(getIt.get().currentTheme.isDark); + @override Widget build(BuildContext context) { - final double targetY = largeQrMode ? 60 : 0; - final double resolvedSize = MediaQuery.of(context).size.width * (largeQrMode ? 0.85 : 0.5); + final double targetY = largeQrMode ? largeQrModeBottomPadding+50 : 0; + final double resolvedSize = MediaQuery.of(context).size.width * 0.5; + final double resolvedScale = largeQrMode ? 1.7 : 1; return Stack( alignment: Alignment.topCenter, children: [ - AnimatedOpacity( - duration: Duration(milliseconds: 300), - opacity: largeQrMode ? 1 : 0, - child: CakeImageWidget(imageUrl: - isLightMode - ? "assets/new-ui/cakewallet-wordmark-light.svg" - : "assets/new-ui/cakewallet-wordmark.svg", - height: 45, - )), + AnimatedSlide( + curve: Curves.easeOutCubic, + duration: animDuration, + offset: largeQrMode ? Offset(0, -1) : Offset.zero, + child: AnimatedOpacity( + duration: animDuration, + opacity: largeQrMode ? 1 : 0, + child: CakeImageWidget(imageUrl: + isLightMode + ? "assets/new-ui/cakewallet-wordmark-light.svg" + : "assets/new-ui/cakewallet-wordmark.svg", + height: 45, + )), + ), GestureDetector( onTap: onTap, + behavior: HitTestBehavior.opaque, child: TweenAnimationBuilder( - tween: Tween(begin: 0, end: targetY), - duration: const Duration(milliseconds: 400), - curve: Curves.easeOut, - builder: (context, value, child) { - return Transform.translate( - offset: Offset(0, value), - child: Observer( - builder: (_)=>Column( - children: [ - AnimatedContainer( - duration: const Duration(milliseconds: 400), + tween: Tween(begin: 0, end: targetY), + duration: animDuration, + curve: Curves.easeOutCubic, + builder: (context, value, child) { + return Transform.translate( + offset: Offset(0, value), + child: child, + ); + }, + child: Observer( + builder: (_) => Column( + children: [ + AnimatedScale( + curve: Curves.easeOutCubic, + alignment: Alignment.bottomCenter, + scale: resolvedScale, + duration: animDuration, + child: AnimatedContainer( + duration: animDuration, curve: Curves.easeOutCubic, width: resolvedSize, height: resolvedSize, @@ -71,49 +87,47 @@ class ReceiveQrCode extends StatelessWidget { : Colors.transparent), child: ClipRRect( borderRadius: BorderRadius.circular(20), - child: LayoutBuilder( - builder: (context, constraints) => Observer( - builder: (_) => QrImage( - data: addressListViewModel.uri.toString(), - embeddedImagePath: - addressListViewModel.tokenCurrency != null - ? addressListViewModel.tokenCurrency == CryptoCurrency.btcln - ? addressListViewModel.qrImage - : addressListViewModel.tokenCurrency!.iconPath - : addressListViewModel.qrImage, - size: constraints.maxWidth)))), + child: Observer( + builder: (_) => QrImage( + data: addressListViewModel.uri.toString(), + size: resolvedSize, + embeddedImagePath: + addressListViewModel.tokenCurrency != null + ? addressListViewModel.tokenCurrency == + CryptoCurrency.btcln + ? addressListViewModel.qrImage + : addressListViewModel.tokenCurrency!.iconPath + : addressListViewModel.qrImage, + ))), ), ), - if (addressListViewModel.hasPayjoin) - Opacity( - opacity: largeQrMode ? 0 : 1, - child: Container( - width:resolvedSize, - decoration: BoxDecoration( - borderRadius: - BorderRadius.vertical(bottom: Radius.circular(16)), - color: Theme.of(context).colorScheme.surfaceContainer), - child: Padding( - padding: const EdgeInsets.symmetric(vertical: 2.0), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - spacing: 4, - children: [ - CakeImageWidget(imageUrl: "assets/new-ui/payjoin.svg"), - Text(S.of(context).payjoin_enabled) - ], - ), - ))), - AnimatedSize( - duration: Duration(milliseconds: 300), - // curve: Curves.easeOutCubic, - child: SizedBox(height: largeQrMode ? largeQrModeBottomPadding : 0)) - ], - ), + ), + if (addressListViewModel.hasPayjoin) + Opacity( + opacity: largeQrMode ? 0 : 1, + child: Container( + width: resolvedSize, + decoration: BoxDecoration( + borderRadius: BorderRadius.vertical(bottom: Radius.circular(16)), + color: Theme.of(context).colorScheme.surfaceContainer), + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 2.0), + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + spacing: 4, + children: [ + CakeImageWidget(imageUrl:"assets/new-ui/payjoin.svg"), + Text(S.of(context).payjoin_enabled) + ], + ), + ))), + AnimatedSize( + duration: animDuration, + curve: Curves.easeOutCubic, + child: SizedBox(height: largeQrMode ? largeQrModeBottomPadding+40 : 0)) + ], ), - ); - }, - ), + )), ), ], );