From 6ed3af09010dff3df954a43191d8429179856f74 Mon Sep 17 00:00:00 2001 From: meet2711 Date: Thu, 6 Jun 2024 20:00:39 +0530 Subject: [PATCH] wallet done --- assets/images/wallet_screen/deposit_list.png | Bin 0 -> 1130 bytes assets/images/wallet_screen/invest_list.png | Bin 0 -> 1375 bytes assets/images/wallet_screen/refund_list.png | Bin 0 -> 1257 bytes assets/images/wallet_screen/withdraw_list.png | Bin 0 -> 1030 bytes assets/images/wallet_screen/yield_list.png | Bin 0 -> 1306 bytes lib/core/routes/route_name.dart | 5 +- lib/core/routes/routes.dart | 10 + lib/core/styles/app_text.dart | 2 + .../presentation/pages/walletDetails.dart | 274 +++++++++++ .../presentation/pages/walletScreen.dart | 459 +++++++++++++----- pubspec.yaml | 1 - 11 files changed, 628 insertions(+), 123 deletions(-) create mode 100644 assets/images/wallet_screen/deposit_list.png create mode 100644 assets/images/wallet_screen/invest_list.png create mode 100644 assets/images/wallet_screen/refund_list.png create mode 100644 assets/images/wallet_screen/withdraw_list.png create mode 100644 assets/images/wallet_screen/yield_list.png create mode 100644 lib/features/MainScreens/Wallet/presentation/pages/walletDetails.dart diff --git a/assets/images/wallet_screen/deposit_list.png b/assets/images/wallet_screen/deposit_list.png new file mode 100644 index 0000000000000000000000000000000000000000..86bcafeb0bde587f149599611ae3ecd37247683e GIT binary patch literal 1130 zcmV-w1eN=VP)@~0drDELIAGL9O(c600d`2O+f$vv5yPrDT=#A^x2ciW; z@#c8=3H_%;`x-0aLCj6g^WKAaM1i(2wx16Y^g!1)Tm)`gf_48pv}eedPhe*X~7tj><3;8^6@5QUY zy39@6UWgBlJ%tv~Bgh#H-&I{f6UcpAEiiMiUS~{wn+=MFC-?PkBLZG{#65Sw6jm_z zuW@L9fF9x|&RpGCr{N~j1#`Za;%!he=h*=>Y9*rZe1J?bcKSdu#wToEH;^e=3W(xO z@o={BnYxaXI#H5TWY>gWi|3$Dd|@)2yk{jKBVI+8B4#6CK)j0VM9f0KNbxGN60vgu zYl>HqjfkBJ*igKREJW-~K%saQor~CsfGvqv(W!{Z1#DToiq1q#Dqw_oCEAp^Hb?sd zJS1ZBSYM4WA$qDaj+S(cT93ukd*Bhe`5wgZlh-Hd;c zZVyoA0G36bNX_=Ki*Q$60SjmWtmqxIM9X_L1#_PLVYW75*9^8jbZDgM4w>R+2}9;G z+pqfiK<=0AYnIlCIq%(x^a;rALyS!iGZTQHqk8vad;(JE%(eaN9K-7ZD1EPBuFb&% zE1(dhp*hs&9Kr4xL35U1|HPq;eV|q_ z0Sl)7@D%tgrVuZ%dz$pO^vne7S37;Ab~FaRV2*YS^@W@#8cZ&0+)M8>MLWiKtMlAH z8YdT#kYGn(8r6ni=Y|DrkJ!+?jb5<9d(H5jC^|D@-i4NBCD=J`ClQ>TViL^*+d>m8 zg{Xi+R6rprpb!;Mhzck~1r(wJ3Q+-tsDMILKp`rikQ@apne%O?aP%AVcDJlnm^~%p w|K7GMD69o`2dzZA>|NYWQ4~c{6s24K0-3*8soalB?f?J)07*qoM6N<$f)!c#&Hw-a literal 0 HcmV?d00001 diff --git a/assets/images/wallet_screen/invest_list.png b/assets/images/wallet_screen/invest_list.png new file mode 100644 index 0000000000000000000000000000000000000000..408de4d4184670bb40fa78519943db5290c87ae5 GIT binary patch literal 1375 zcmV-l1)%zgP)@~0drDELIAGL9O(c600d`2O+f$vv5yP%pbs5gi_L7fS#PEdCOs}sbTK+Xj626QKIG69(hq)hP5T>w8hGysAi zz+b`VJv`bV2$4tL;c!QSD3i%#GMP*!^DDBVUlagucvEn>;8Jrru2!qhlySp?TXQL4 zrs8r<88a-LJNO}jEPVQmuEPAoq7qWhNvX&XJhJ+Iay8)dy5~)or>o|2$^F)p8m$&P zE(eUqwd4G@2&00sl}QCxVjAo%=U6z7DY@K2-TcbZ=9XfkPpZVU*jdhXV`wXy@~+YD z4VS&CEyaX8yny{~jYS2E(TDj)Ut8LW5KU(2+$N9TsH5mHQ3xVcFA>rH67zEKz)bB&X|OEI3XX#k)Ck+eHe#Bo1K36S2_(aNye97BEA`}UMa!WR(oa{nZi!=Vn<&!wn6ay?oeN%E~+W|FgYf@9@ zC(a!EOwMCXnV-l4>`7MvW*VGP<_9=U=k{G(wNCNCxgh>tfUEU^lxri1)BOkcao2Xx zqMktQC`-V%LiZf+rt!bmu}f27iJYwU-vy~4Zzx`4z+wa__KRN6n#8Up9Sldcf%@Vk z|L{APkD*gU?q|arQ{?0!+O(`IFsB2f?;VD>oL`U%yE=>}K-hD$6&fQh)azzliD8?kDL~j0 zIZ{_xj=6&W8(>cq0n_>U95;jw6nj+|>bEvOjq4wHb4l$1T-pDgMkJ{KVV<7~+qQR_ zMYvqvk~<)YF^3cETC79b+cPYr#Rx{qEXuBHDV0j7$^ z$ZR0${8S%zNfRTL4J-_GcEZ+fAOkn>EzM8WTVNbKh{}K!K z@O(8#Av%PY?n5Hjlin3(^8Fm#tBs^JOEACB_ezkM;1h|{!ay#99)eCwKjHLpP|?!# zdBqMXV+AD&I<3yu=62oa_+@80ubriZC`qF=%^$hBf9pj4ut2#tW3H9eml9)}8z`f^ z!@LApqVF;$FNm`I9n{oLCggvSvN;7!2T{}KkEvyuy#Fa8NtOWB0(}k<6*N3YUF7|m huawDTGMUU2`3?xa!8gXT&;9@a002ovPDHLkV1n(Kk2nAT literal 0 HcmV?d00001 diff --git a/assets/images/wallet_screen/refund_list.png b/assets/images/wallet_screen/refund_list.png new file mode 100644 index 0000000000000000000000000000000000000000..1e8cd4b5aee3b150776f55bbe632321e4389d557 GIT binary patch literal 1257 zcmV=P)@~0drDELIAGL9O(c600d`2O+f$vv5yPnlMHy>Et`) zJMNj;@%Vg}tk-*Admlh1lgVTZ{QH7htNd@M-e-bV%wu0 zS+ae`4nwByUi5gDHJL7%x0|+c$MypeVV~(&$8#;=18VQ4$Y%v2g@603L&Trh2EM>a zs^Zmjh$y9NSWzb9=IfNjtKnxkYY}l+uY=4eL*p9~gY<#HFfSzC`xZzLey&pY7sp1j z<6^rIVF^Nu7rM2`q*ttdn)V%~!*Lpm@t$(6Qc1r;!q`~hz4CEm$=h?u%=||BXioC6 zDNz%!(Ovl;xN_x?h_)I|3`*)gar^a6;-Kh?2;TbIDBM7gs(YEPWa-?HQ}4 zL`^^~xEXpQjRapSgrQ=)?vYOuuu&7O4qTymuHumG9D$Io4STsnc4qK9S5mPZceTde zB1RocT}vbi>D$2Emo}4G-tXsP5kT!*+T0gKQTq;_5{W_W8^{Z|!e5%Uc;TAT+NspG zrEPe>w8IONSYbu&JFlzGOwF|OO*k* TpKQKL00000NkvXXu0mjf=;cvO literal 0 HcmV?d00001 diff --git a/assets/images/wallet_screen/withdraw_list.png b/assets/images/wallet_screen/withdraw_list.png new file mode 100644 index 0000000000000000000000000000000000000000..e232b30cc07cbb8a9fd05d6deae65b6426807d28 GIT binary patch literal 1030 zcmV+h1o``kP)@~0drDELIAGL9O(c600d`2O+f$vv5yP6U3RI?gUjQXgYz_3DOOmOps&(I}@axz}mps00l~>mpCFMTQYwv zes{d&X!{I5kpc*U0y3FQCX>lzGGkTem~wKCX}naL_o*{@h)bFffgeR1cuzJplf*KOnL3X(SOh0 zu10w79sM(SL=$l8=wBla9vuAzJfaEc3JIdfh$yqbYbbMuOfRy4J;?(0By|Cw5t!5k zY;tHdJd(PAKk!ztXWQqE4@el_CI9=`cHMGc>$E15Ka_=nggiI=nOh8vvQ)Z2 z!m#~S!*8lEG$$;eE0a^<07ezYkV&|@Rw|1_L>!fX_Wrn5-m;*frt=9;;kK;y!P9y7 zi&m#7px{NsQx;G-x`?MPpfH4p!2@a1J);l4al3==oy7rFO)mx$kd2azw-{a^ew-o( z31i4?O0AHFcrS>Ev)#^6ap2H}n7(*dNDxZE6vY$X*&Rwi*^;c09@TC~5GNu_Dl%y( zscG|)LBF|>P;mZN=Y=JjlNP#xQTfVHE)Km^#NKoef;rZoXw2WsYs16Mc|#X+F9!-i7?hTJ6? zUJo0pkbAFSg@DLvBj$_yA2w#87+N6!WHy0ZY!DM<9&1W5nH$U3%okNd5C3N`|;vjfe0Sm-kP4$Jv zyGH;ztwijVl~Rlv@ll2nZ*QnuNvto#nWR}}LhX*_*xXTykH32jnbEi;e@~0drDELIAGL9O(c600d`2O+f$vv5yP9&4eCzNbb`7Qzy@RkvO&TGyiP!vfNlVt05(WE0c`O1t}?HAG?E=zwocA{ z@9CL1Hj(bPW$8|mi44Oq48t%C!!QivlsKc205IdtoYOg{s`-1?q_Nm>x;r~NThpn) zhOar@aC(6rZfNRoAuCP~(94>p3Kwn(U01x1HBAjJ)COg-rm2APjQ_@(N(bGHFV)gL zr%O(APM>HX;GRLJA%bKc?S@~$HATnD)3E{wODc^H1$~lZXk;P<5H6`CIK$gOVQw+v zRsSwuJ^@}@@?4GxoY6&~5KokmfB@U(yDdr=0sfBG78$CYcX{&)u=o8oAb{K{bJ7aJ zb!_&lr%iz7m^s27M!h1yU;S)J0bK-Wj>{^-2a4z1v;UC_f<2?py!p=Q)pLk6BBbw9 zktX1pmxuU93gCRqd{?yR_!?ohsziYQwjHc@do0K15#d&yE)je=Bt^h~m#zZmlp#VP z0<1jQlsjVCUx?r1nFir{1f5E>EIq=+H~ zfO9kaeQ45=un5<@`OIlUCF83IX<+dGn4>jC0@uosp07CDq&2gJKSt0NNgLM(=F0^Q z2>dSQnnnWtenpf3rBy+-Xa6}B%2Xc0d3vJ>IH^{UMofUrm;jkE0WxC(WX1%@j0un# z6Cg7tKxRyU%zPvzG!8X!DLk{wct?qVi`UkiUitq%k}|Rj&=}~R{yExSdEb(a)jN6x zH>g(PwX^2)jyK;^3fvbBRglbDulGKSu_S)mYl!=M<2O{CZb=au1gJdwqebu-zwP(3 zph19L;Jc$mXfeL1--O)#iP?Yh7BH{rZMJUerLNNiE z77>axzED&|Y)^z;vrEJ%*7$;&h*(z|5kAvIu$XXWOn}Vv5#V5p1d3Km8HmcWe@77{ z7l0;IKfecV06}%=JAO9(rU?27@aWmEV!@_?s6G3iDUv<{_EfG<7A-(DP4L7= zO%nqeSBZpwMXK=^uNWA(6;%!qT>NS1OsxV}#gZlh!poTD8|VeMWI!l}JEy{dt9n9Z ztSBc4udgN05?Hh>DZ~SEXK|ePwl| zDo3&xxxqC(yS9F$-Mnj(hOwFzxfjcIeP$(dfhT>F9*eLbWy8M*AZh#|`Kt`!T0S!2 zqM~Ubcj^Tj{}&}BxjT9#H)CA!qX@7MT-*5zxo5=Kue0^BBWL*MSiinu7=~dOhG7)MANdnCce9)L Q1^@s607*qoM6N<$f?i)mjsO4v literal 0 HcmV?d00001 diff --git a/lib/core/routes/route_name.dart b/lib/core/routes/route_name.dart index a442173..5429003 100644 --- a/lib/core/routes/route_name.dart +++ b/lib/core/routes/route_name.dart @@ -29,9 +29,12 @@ class RouteName { //Portfolio details static const String porfolioDetails = 'porfolioDetails'; - //Portfolio details + //Academy details static const String academyDetails = 'academyDetails'; + //Wallet details + static const String walletDetails = 'walletDetails'; + //Biometric static const String biometricScreen = 'biometricScreen'; diff --git a/lib/core/routes/routes.dart b/lib/core/routes/routes.dart index aee7798..9004b4d 100644 --- a/lib/core/routes/routes.dart +++ b/lib/core/routes/routes.dart @@ -5,6 +5,7 @@ import 'package:tanami_app/core/routes/route_name.dart'; import 'package:tanami_app/features/MainScreens/Academy/presentation/pages/academy_details_screen.dart'; import 'package:tanami_app/features/MainScreens/Portfolio/presentation/pages/portfolio_details_screen.dart'; +import 'package:tanami_app/features/MainScreens/Wallet/presentation/pages/walletDetails.dart'; import 'package:tanami_app/features/biometric/presentation/pages/biometric_screen.dart'; @@ -152,6 +153,15 @@ final goRouter = GoRouter( return const RestorePasswordScreen(); }, ), + GoRoute( + name: RouteName.walletDetails, + path: "${RouteName.walletDetails}/:type", + builder: (context, state) { + return WalletDetails( + type: state.pathParameters["type"]!, + ); + }, + ), ], ), // GoRoute( diff --git a/lib/core/styles/app_text.dart b/lib/core/styles/app_text.dart index da589a1..d097bc7 100644 --- a/lib/core/styles/app_text.dart +++ b/lib/core/styles/app_text.dart @@ -130,6 +130,8 @@ class AppText { //Wallet static const String walletTitle = "Wallet balance"; + static const String day = "Today"; + static const String onHold = "On hold"; //Settings static const String settingsText = "Settings"; diff --git a/lib/features/MainScreens/Wallet/presentation/pages/walletDetails.dart b/lib/features/MainScreens/Wallet/presentation/pages/walletDetails.dart new file mode 100644 index 0000000..dd72cd0 --- /dev/null +++ b/lib/features/MainScreens/Wallet/presentation/pages/walletDetails.dart @@ -0,0 +1,274 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; +import 'package:google_fonts/google_fonts.dart'; + +class WalletDetails extends StatelessWidget { + final String type; + WalletDetails({super.key, required this.type}); + final Map data_deposit = { + 'Payment method': 'Google/Apple Pay', + 'Account Name': 'Name Surname', + 'IBAN': 'DE 1234 5678 9012 3456', + 'Beneficiary Address': 'Hohenzollernring 58, 95444', + 'Bank Name': 'Bank Name', + 'Branch Address': 'Hohenzollernring 58, 95444', + 'SWIFT/BIC code': 'BC12345', + 'Reference ID': 'FRYU FHDU 1234', + }; + final Map data_withdraw = { + 'Status': 'On hold', + 'Payment method': 'Google/Apple Pay', + 'Account Name': 'Name Surname', + 'IBAN': 'DE 1234 5678 9012 3456', + 'Beneficiary Address': 'Hohenzollernring 58, 95444', + 'Bank Name': 'Bank Name', + 'Branch Address': 'Hohenzollernring 58, 95444', + 'SWIFT/BIC code': 'BC12345', + 'Reference ID': 'FRYU FHDU 1234', + }; + final Map data_invest = { + 'Payment method': 'Google/Apple Pay', + }; + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + appBar: AppBar( + backgroundColor: Colors.white, + elevation: 0, + scrolledUnderElevation: 0.0, + centerTitle: true, + title: Text( + 'Details', + style: GoogleFonts.dmSans( + color: const Color(0xFF272727), + fontSize: 20.sp, + fontWeight: FontWeight.w700, + ), + ), + ), + body: Padding( + padding: const EdgeInsets.all(18.0), + child: Container( + width: double.infinity, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(22.r), + color: Colors.white, + boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(0.15), + spreadRadius: 2, + blurRadius: 10, + offset: const Offset(0, 8), // changes position of shadow + ), + ], + ), + child: Padding( + padding: const EdgeInsets.fromLTRB(20.0, 30, 20, 10), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + getIcon(type), + SizedBox( + height: 16.h, + ), + Text( + type, + style: GoogleFonts.dmSans( + color: const Color(0xFF191B1E), + fontSize: 14.sp, + fontWeight: FontWeight.w600, + ), + ), + SizedBox( + height: 4.h, + ), + Text( + '10/04/2024 22:04', + style: GoogleFonts.dmSans( + color: const Color(0xFF8D8D8D), + fontSize: 11.sp, + fontWeight: FontWeight.w500, + ), + ), + SizedBox( + height: 16.h, + ), + Text( + '+ SAR 100,000', + style: GoogleFonts.dmSans( + color: const Color(0xFF191B1E), + fontSize: 20.sp, + fontWeight: FontWeight.w900, + ), + ), + ], + ), + SizedBox( + height: 35.h, + ), + _buildBody(), + ], + ), + ), + ), + ), + ); + } + + Widget getIcon(String title) { + if (title == 'Deposit') { + return Container( + decoration: const BoxDecoration( + shape: BoxShape.circle, color: Color(0xFF0FA4A4)), + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Image.asset( + 'assets/images/wallet_screen/deposit_list.png', + height: 25.h, + ), + ), + ); + } else if (title == 'Withdrawal') { + return Container( + decoration: const BoxDecoration( + shape: BoxShape.circle, color: Color(0xFFE6681F)), + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Image.asset('assets/images/wallet_screen/withdraw_list.png', + height: 25.h), + ), + ); + } else if (title == 'Investment') { + return Container( + decoration: const BoxDecoration( + shape: BoxShape.circle, color: Color(0xFF0172CB)), + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Image.asset('assets/images/wallet_screen/invest_list.png', + height: 25.h), + ), + ); + } else if (title == 'Yield') { + return Container( + decoration: const BoxDecoration( + shape: BoxShape.circle, color: Color(0xFF4C4AEF)), + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Image.asset('assets/images/wallet_screen/yield_list.png', + height: 25.h), + ), + ); + } else { + return Container( + decoration: const BoxDecoration( + shape: BoxShape.circle, color: Color(0xFF0E9445)), + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Image.asset('assets/images/wallet_screen/refund_list.png', + height: 25.h), + ), + ); + } + } + + Widget _buildBody() { + List> entries; + if (type == 'Deposit') { + entries = data_deposit.entries.toList(); + } else if (type == 'Withdrawal') { + entries = data_withdraw.entries.toList(); + } else if (type == 'Yield') { + return Container(); + } else if (type == 'Refund') { + return Container(); + } else { + entries = data_invest.entries.toList(); + return Padding( + padding: const EdgeInsets.symmetric(vertical: 15.0), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + entries[0].key, + style: GoogleFonts.dmSans( + color: const Color(0xFF535353), + fontSize: 14.sp, + fontWeight: FontWeight.w500, + ), + ), + SizedBox( + width: 180.w, + child: Text( + entries[0].value, + textAlign: TextAlign.end, + style: GoogleFonts.dmSans( + color: const Color(0xFF191B1E), + fontSize: 14.sp, + fontWeight: FontWeight.w600, + ), + ), + ), + ], + ), + ); + } + return Expanded( + child: ListView.builder( + physics: NeverScrollableScrollPhysics(), + shrinkWrap: true, + itemCount: entries.length, + itemBuilder: (context, index) { + return Container( + width: double.infinity, + decoration: BoxDecoration( + border: Border( + bottom: BorderSide( + color: (index != entries.length - 1) + ? Colors.black + : Colors.white, + width: 1.0, + ), + ), + ), + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 15.0), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + entries[index].key, + style: GoogleFonts.dmSans( + color: const Color(0xFF535353), + fontSize: 14.sp, + fontWeight: FontWeight.w500, + ), + ), + SizedBox( + width: 180.w, + child: Text( + entries[index].value, + textAlign: TextAlign.end, + style: GoogleFonts.dmSans( + color: (entries[index].key == 'Status') + ? const Color(0xFF0172CB) + : const Color(0xFF191B1E), + fontSize: 14.sp, + fontWeight: (entries[index].key == 'Status') + ? FontWeight.w700 + : FontWeight.w600, + ), + ), + ), + ], + ), + ), + ); + }, + ), + ); + } +} diff --git a/lib/features/MainScreens/Wallet/presentation/pages/walletScreen.dart b/lib/features/MainScreens/Wallet/presentation/pages/walletScreen.dart index 1f4c26f..bd92cac 100644 --- a/lib/features/MainScreens/Wallet/presentation/pages/walletScreen.dart +++ b/lib/features/MainScreens/Wallet/presentation/pages/walletScreen.dart @@ -1,6 +1,9 @@ import 'package:flutter/material.dart'; +import 'package:flutter/widgets.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:google_fonts/google_fonts.dart'; +import 'package:tanami_app/core/routes/route_name.dart'; +import 'package:tanami_app/core/routes/routes.dart'; import 'package:tanami_app/core/styles/app_text.dart'; class WalletScreen extends StatefulWidget { @@ -11,86 +14,115 @@ class WalletScreen extends StatefulWidget { } class _WalletScreenState extends State { + List data = [ + { + 'title': 'Deposit', + 'subTitle': '', + 'dateTime': '10/04/2024 22:04', + 'value': '+ SAR 100,000', + 'subValue': '', + 'onHold': false, + }, + { + 'title': 'Withdrawal', + 'subTitle': '', + 'dateTime': '10/04/2024 22:04', + 'value': '- SAR 100,000', + 'subValue': '', + 'onHold': true, + }, + { + 'title': 'Investment', + 'subTitle': 'Name of Investment', + 'dateTime': '10/04/2024 22:04', + 'value': '- SAR 100,000', + 'subValue': '', + 'onHold': false, + }, + { + 'title': 'Yield', + 'subTitle': 'Name of Investment', + 'dateTime': '10/04/2024 22:04', + 'value': '+ SAR 100,000', + 'subValue': '+ \$100,00', + 'onHold': false, + }, + { + 'title': 'Refund', + 'subTitle': '', + 'dateTime': '10/04/2024 22:04', + 'value': '- SAR 100,000', + 'subValue': '', + 'onHold': true, + }, + ]; + @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, - body: CustomScrollView( - slivers: [ - SliverAppBar( - elevation: 0, - scrolledUnderElevation: 0, - expandedHeight: 230.0, - automaticallyImplyLeading: false, - snap: false, - pinned: true, - floating: false, - flexibleSpace: LayoutBuilder( - builder: (BuildContext context, BoxConstraints constraints) { - return FlexibleSpaceBar( - titlePadding: - const EdgeInsets.only(left: 30, top: 0, bottom: 15), - background: Stack( - fit: StackFit.expand, - children: [ - Image.asset( - 'assets/images/wallet_screen/bg.png', // Replace with your image asset - fit: BoxFit.cover, + appBar: AppBar( + elevation: 0, + scrolledUnderElevation: 0.0, + automaticallyImplyLeading: false, + toolbarHeight: 260.h, + titleSpacing: 22.w, + title: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + AppText.walletTitle, + style: GoogleFonts.dmSans( + color: const Color(0xFF343434), + fontSize: 14.sp, + fontWeight: FontWeight.w700, + ), + ), + SizedBox( + height: 4.h, + ), + Text( + 'SAR 178,000', + style: GoogleFonts.dmSans( + color: const Color(0xFF191B1E), + fontSize: 28.sp, + fontWeight: FontWeight.w700, + ), + ), + SizedBox( + height: 80.h, + ) + ], + ), + flexibleSpace: FlexibleSpaceBar( + background: Stack( + children: [ + Image.asset( + 'assets/images/wallet_screen/bg.png', // Replace with your image asset + fit: BoxFit.fitWidth, + alignment: Alignment.topCenter, + ), + Align( + alignment: Alignment.bottomCenter, + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 20.0), + child: Container( + // height: 86.h, + decoration: BoxDecoration( + color: Colors.white.withOpacity(0.8), + borderRadius: + const BorderRadius.all(Radius.circular(20.0)), ), - Padding( - padding: const EdgeInsets.only(left: 40.0), - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - AppText.walletTitle, - style: GoogleFonts.dmSans( - color: const Color(0xFF343434), - fontSize: 14.sp, - fontWeight: FontWeight.w700, - ), - ), - SizedBox( - height: 4.h, - ), - Text( - 'SAR 178,000', - style: GoogleFonts.dmSans( - color: const Color(0xFF191B1E), - fontSize: 28.sp, - fontWeight: FontWeight.w700, - ), - ), - ], - ), - ), - ], - ), - ); - }), - backgroundColor: Colors.white, - ), - SliverToBoxAdapter( - child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 18.0), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Center( - child: Container( - decoration: BoxDecoration( - color: Colors.grey.withOpacity(0.2), - borderRadius: - const BorderRadius.all(Radius.circular(20.0)), - ), - child: Padding( - padding: const EdgeInsets.symmetric( - horizontal: 40.0, vertical: 10.0), + child: Padding( + padding: const EdgeInsets.symmetric( + horizontal: 20.0, vertical: 20.0), + child: IntrinsicHeight( child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, + crossAxisAlignment: CrossAxisAlignment.center, children: [ Column( + mainAxisSize: MainAxisSize.min, children: [ Container( decoration: const BoxDecoration( @@ -120,6 +152,7 @@ class _WalletScreenState extends State { width: 20.0, ), Column( + mainAxisSize: MainAxisSize.min, children: [ Container( decoration: const BoxDecoration( @@ -149,61 +182,245 @@ class _WalletScreenState extends State { ), ), ), - SizedBox( - height: 10.h, + ), + ) + ], + ), + ), + backgroundColor: Colors + .transparent, // Make the AppBar transparent to show the background image + ), + body: Padding( + padding: const EdgeInsets.fromLTRB(18.0, 10.0, 18.0, 0.0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + AppText.day, + style: GoogleFonts.dmSans( + color: const Color(0xFF8D8D8D), + fontSize: 11.sp, + fontWeight: FontWeight.w500, ), - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Text( - 'Today', - style: GoogleFonts.dmSans( - color: const Color(0xFF8D8D8D), - fontSize: 11.sp, - fontWeight: FontWeight.w500, + ), + Row( + children: [ + Container( + decoration: const BoxDecoration( + color: Color(0xFFF6F6F6), + borderRadius: BorderRadius.all(Radius.circular(12.0)), + ), + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Image.asset( + 'assets/images/wallet_screen/search.png', + height: 20.h, ), ), - Row( - children: [ - Container( - decoration: const BoxDecoration( - color: Color(0xFFF6F6F6), - borderRadius: - BorderRadius.all(Radius.circular(12.0)), - ), - child: Padding( - padding: const EdgeInsets.all(8.0), - child: Image.asset( - 'assets/images/wallet_screen/search.png', - height: 20.h, - ), - ), - ), - SizedBox(width: 5.w,), - Container( - decoration: const BoxDecoration( - color: Color(0xFFF6F6F6), - borderRadius: - BorderRadius.all(Radius.circular(12.0)), - ), - child: Padding( - padding: const EdgeInsets.all(8.0), - child: Image.asset( - 'assets/images/wallet_screen/filter.png', - height: 20.h, - ), - ), - ), - ], - ) - ], - ) - ], - ), + ), + SizedBox( + width: 5.w, + ), + Container( + decoration: const BoxDecoration( + color: Color(0xFFF6F6F6), + borderRadius: BorderRadius.all(Radius.circular(12.0)), + ), + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Image.asset( + 'assets/images/wallet_screen/filter.png', + height: 20.h, + ), + ), + ), + ], + ), + ], ), - ), - ], + SizedBox( + height: 10.h, + ), + Expanded( + child: ListView.builder( + shrinkWrap: true, + itemCount: data.length, + itemBuilder: (context, index) { + return Padding( + padding: const EdgeInsets.only(bottom: 10.0), + child: GestureDetector( + onTap: () { + goRouter.pushNamed(RouteName.walletDetails, + pathParameters: { + "type": data[index]['title'], + }); + }, + child: Container( + height: 90.h, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(22.r), + color: const Color(0xFFF6F6F6), + ), + child: Padding( + padding: const EdgeInsets.all(12.0), + child: Row( + children: [ + getIcon(data[index]['title']), + SizedBox(width: 12.w), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + data[index]['title'], + style: GoogleFonts.dmSans( + color: const Color(0xFF191B1E), + fontSize: 14.sp, + fontWeight: FontWeight.w700, + ), + ), + SizedBox(height: 4.h), + (data[index]['subTitle'] != '') + ? Column( + crossAxisAlignment: + CrossAxisAlignment.start, + children: [ + Text( + data[index]['subTitle'], + style: GoogleFonts.dmSans( + color: const Color(0xFF191B1E), + fontSize: 14.sp, + fontWeight: FontWeight.w400, + ), + ), + SizedBox(height: 4.h), + ], + ) + : Container(), + Text( + data[index]['dateTime'], + style: GoogleFonts.dmSans( + color: const Color(0xFF8D8D8D), + fontSize: 11.sp, + fontWeight: FontWeight.w500, + ), + ), + ], + ), + Spacer(), + Column( + crossAxisAlignment: CrossAxisAlignment.end, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + (data[index]['onHold']) + ? Column( + crossAxisAlignment: + CrossAxisAlignment.start, + children: [ + Text( + AppText.onHold, + style: GoogleFonts.dmSans( + color: const Color(0xFF0172CB), + fontSize: 14.sp, + fontWeight: FontWeight.w700, + ), + ), + SizedBox(height: 4.h), + ], + ) + : Container(), + Text( + data[index]['value'], + style: GoogleFonts.dmSans( + color: const Color(0xFF191B1E), + fontSize: 14.sp, + fontWeight: FontWeight.w700, + ), + ), + SizedBox(height: 4.h), + (data[index]['subValue'] != '') + ? Text( + data[index]['subValue'], + style: GoogleFonts.dmSans( + color: const Color(0xFF191B1E), + fontSize: 12.sp, + fontWeight: FontWeight.w500, + ), + ) + : Container(), + ], + ), + ], + ), + ), + ), + ), + ); + }, + ), + ) + ], + ), ), ); } + + Widget getIcon(String title) { + if (title == 'Deposit') { + return Container( + decoration: const BoxDecoration( + shape: BoxShape.circle, color: Color(0xFF0FA4A4)), + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Image.asset( + 'assets/images/wallet_screen/deposit_list.png', + height: 25.h, + ), + ), + ); + } else if (title == 'Withdrawal') { + return Container( + decoration: const BoxDecoration( + shape: BoxShape.circle, color: Color(0xFFE6681F)), + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Image.asset('assets/images/wallet_screen/withdraw_list.png', + height: 25.h), + ), + ); + } else if (title == 'Investment') { + return Container( + decoration: const BoxDecoration( + shape: BoxShape.circle, color: Color(0xFF0172CB)), + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Image.asset('assets/images/wallet_screen/invest_list.png', + height: 25.h), + ), + ); + } else if (title == 'Yield') { + return Container( + decoration: const BoxDecoration( + shape: BoxShape.circle, color: Color(0xFF4C4AEF)), + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Image.asset('assets/images/wallet_screen/yield_list.png', + height: 25.h), + ), + ); + } else { + return Container( + decoration: const BoxDecoration( + shape: BoxShape.circle, color: Color(0xFF0E9445)), + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Image.asset('assets/images/wallet_screen/refund_list.png', + height: 25.h), + ), + ); + } + } } diff --git a/pubspec.yaml b/pubspec.yaml index 5dfe525..bc83395 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -110,5 +110,4 @@ flutter: - assets/images/dialog/ - assets/images/dialog/svg/ - assets/images/settings_screen/ - - assets/images/settings_screen/png/ - assets/images/settings_screen/svg/