optimize receive qr (#3083)

This commit is contained in:
malik1004x
2026-03-14 13:45:05 +01:00
committed by GitHub
parent 98d8161afc
commit af4459e76f
@@ -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<ThemeStore>().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<double>(
tween: Tween<double>(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<double>(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))
],
),
);
},
),
)),
),
],
);