optimize receive qr (#3083)
malik1004x committed
Mar 14, 2026 at 13:45 UTC
af4459e76ffb3e622565763b64d21a3f0acbe76d
1 file changed
+78
-64
lib/new-ui/widgets/receive_page/receive_qr_code.dart
+78
-64
@@ -6,7 +6,6 @@ import 'package:cake_wallet/view_model/wallet_address_list/wallet_address_list_v
6
import 'package:cw_core/crypto_currency.dart';
7
import 'package:flutter/material.dart';
8
import 'package:flutter_mobx/flutter_mobx.dart';
9
-import 'package:flutter_svg/flutter_svg.dart';
9
10
import '../../../src/screens/receive/widgets/qr_image.dart';
11
@@ -22,40 +21,57 @@ class ReceiveQrCode extends StatelessWidget {
21
final bool largeQrMode;
22
final WalletAddressListViewModel addressListViewModel;
23
25
- static const double largeQrModeBottomPadding = 70;
24
+ static const double largeQrModeBottomPadding = 140;
25
+ static const Duration animDuration = Duration(milliseconds: 500);
26
final bool isLightMode = !(getIt.get<ThemeStore>().currentTheme.isDark);
27
28
+
29
@override
30
Widget build(BuildContext context) {
30
- final double targetY = largeQrMode ? 60 : 0;
31
- final double resolvedSize = MediaQuery.of(context).size.width * (largeQrMode ? 0.85 : 0.5);
31
+ final double targetY = largeQrMode ? largeQrModeBottomPadding+50 : 0;
32
+ final double resolvedSize = MediaQuery.of(context).size.width * 0.5;
33
+ final double resolvedScale = largeQrMode ? 1.7 : 1;
34
35
return Stack(
36
alignment: Alignment.topCenter,
37
children: [
36
- AnimatedOpacity(
37
- duration: Duration(milliseconds: 300),
38
- opacity: largeQrMode ? 1 : 0,
39
- child: CakeImageWidget(imageUrl:
40
- isLightMode
41
- ? "assets/new-ui/cakewallet-wordmark-light.svg"
42
- : "assets/new-ui/cakewallet-wordmark.svg",
43
- height: 45,
44
- )),
38
+ AnimatedSlide(
39
+ curve: Curves.easeOutCubic,
40
+ duration: animDuration,
41
+ offset: largeQrMode ? Offset(0, -1) : Offset.zero,
42
+ child: AnimatedOpacity(
43
+ duration: animDuration,
44
+ opacity: largeQrMode ? 1 : 0,
45
+ child: CakeImageWidget(imageUrl:
46
+ isLightMode
47
+ ? "assets/new-ui/cakewallet-wordmark-light.svg"
48
+ : "assets/new-ui/cakewallet-wordmark.svg",
49
+ height: 45,
50
+ )),
51
+ ),
52
GestureDetector(
53
onTap: onTap,
54
+ behavior: HitTestBehavior.opaque,
55
child: TweenAnimationBuilder<double>(
48
- tween: Tween<double>(begin: 0, end: targetY),
49
- duration: const Duration(milliseconds: 400),
50
- curve: Curves.easeOut,
51
- builder: (context, value, child) {
52
- return Transform.translate(
53
- offset: Offset(0, value),
54
- child: Observer(
55
- builder: (_)=>Column(
56
- children: [
57
- AnimatedContainer(
58
- duration: const Duration(milliseconds: 400),
56
+ tween: Tween<double>(begin: 0, end: targetY),
57
+ duration: animDuration,
58
+ curve: Curves.easeOutCubic,
59
+ builder: (context, value, child) {
60
+ return Transform.translate(
61
+ offset: Offset(0, value),
62
+ child: child,
63
+ );
64
+ },
65
+ child: Observer(
66
+ builder: (_) => Column(
67
+ children: [
68
+ AnimatedScale(
69
+ curve: Curves.easeOutCubic,
70
+ alignment: Alignment.bottomCenter,
71
+ scale: resolvedScale,
72
+ duration: animDuration,
73
+ child: AnimatedContainer(
74
+ duration: animDuration,
75
curve: Curves.easeOutCubic,
76
width: resolvedSize,
77
height: resolvedSize,
@@ -71,49 +87,47 @@ class ReceiveQrCode extends StatelessWidget {
87
: Colors.transparent),
88
child: ClipRRect(
89
borderRadius: BorderRadius.circular(20),
74
- child: LayoutBuilder(
75
- builder: (context, constraints) => Observer(
76
- builder: (_) => QrImage(
77
- data: addressListViewModel.uri.toString(),
78
- embeddedImagePath:
79
- addressListViewModel.tokenCurrency != null
80
- ? addressListViewModel.tokenCurrency == CryptoCurrency.btcln
81
- ? addressListViewModel.qrImage
82
- : addressListViewModel.tokenCurrency!.iconPath
83
- : addressListViewModel.qrImage,
84
- size: constraints.maxWidth)))),
90
+ child: Observer(
91
+ builder: (_) => QrImage(
92
+ data: addressListViewModel.uri.toString(),
93
+ size: resolvedSize,
94
+ embeddedImagePath:
95
+ addressListViewModel.tokenCurrency != null
96
+ ? addressListViewModel.tokenCurrency ==
97
+ CryptoCurrency.btcln
98
+ ? addressListViewModel.qrImage
99
+ : addressListViewModel.tokenCurrency!.iconPath
100
+ : addressListViewModel.qrImage,
101
+ ))),
102
),
103
),
87
- if (addressListViewModel.hasPayjoin)
88
- Opacity(
89
- opacity: largeQrMode ? 0 : 1,
90
- child: Container(
91
- width:resolvedSize,
92
- decoration: BoxDecoration(
93
- borderRadius:
94
- BorderRadius.vertical(bottom: Radius.circular(16)),
95
- color: Theme.of(context).colorScheme.surfaceContainer),
96
- child: Padding(
97
- padding: const EdgeInsets.symmetric(vertical: 2.0),
98
- child: Row(
99
- mainAxisAlignment: MainAxisAlignment.center,
100
- spacing: 4,
101
- children: [
102
- CakeImageWidget(imageUrl: "assets/new-ui/payjoin.svg"),
103
- Text(S.of(context).payjoin_enabled)
104
- ],
105
- ),
106
- ))),
107
- AnimatedSize(
108
- duration: Duration(milliseconds: 300),
109
- // curve: Curves.easeOutCubic,
110
- child: SizedBox(height: largeQrMode ? largeQrModeBottomPadding : 0))
111
- ],
112
- ),
104
+ ),
105
+ if (addressListViewModel.hasPayjoin)
106
+ Opacity(
107
+ opacity: largeQrMode ? 0 : 1,
108
+ child: Container(
109
+ width: resolvedSize,
110
+ decoration: BoxDecoration(
111
+ borderRadius: BorderRadius.vertical(bottom: Radius.circular(16)),
112
+ color: Theme.of(context).colorScheme.surfaceContainer),
113
+ child: Padding(
114
+ padding: const EdgeInsets.symmetric(vertical: 2.0),
115
+ child: Row(
116
+ mainAxisAlignment: MainAxisAlignment.center,
117
+ spacing: 4,
118
+ children: [
119
+ CakeImageWidget(imageUrl:"assets/new-ui/payjoin.svg"),
120
+ Text(S.of(context).payjoin_enabled)
121
+ ],
122
+ ),
123
+ ))),
124
+ AnimatedSize(
125
+ duration: animDuration,
126
+ curve: Curves.easeOutCubic,
127
+ child: SizedBox(height: largeQrMode ? largeQrModeBottomPadding+40 : 0))
128
+ ],
129
),
114
- );
115
- },
116
- ),
130
+ )),
131
),
132
],
133
);