diff --git a/assets/images/wallet_screen/done.png b/assets/images/wallet_screen/done.png new file mode 100644 index 0000000..ab8da3a Binary files /dev/null and b/assets/images/wallet_screen/done.png differ diff --git a/assets/images/wallet_screen/info.png b/assets/images/wallet_screen/info.png new file mode 100644 index 0000000..e7fabcd Binary files /dev/null and b/assets/images/wallet_screen/info.png differ diff --git a/lib/core/routes/route_name.dart b/lib/core/routes/route_name.dart index feb59b7..13a7870 100644 --- a/lib/core/routes/route_name.dart +++ b/lib/core/routes/route_name.dart @@ -34,6 +34,9 @@ class RouteName { //Wallet details static const String walletDetails = 'walletDetails'; + static const String withdrawalScreen = 'withdrawalScreen'; + static const String withdrawalPreview = 'withdrawalPreview'; + static const String withdrawalConfirmation = 'withdrawalConfirmation'; //Biometric static const String biometricScreen = 'biometricScreen'; diff --git a/lib/core/routes/routes.dart b/lib/core/routes/routes.dart index 73c2dc3..3625a83 100644 --- a/lib/core/routes/routes.dart +++ b/lib/core/routes/routes.dart @@ -6,6 +6,9 @@ import 'package:tanami_app/features/MainScreens/Academy/presentation/pages/acade 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/MainScreens/Wallet/presentation/pages/withdrawal/confirmation.dart'; +import 'package:tanami_app/features/MainScreens/Wallet/presentation/pages/withdrawal/preview.dart'; +import 'package:tanami_app/features/MainScreens/Wallet/presentation/pages/withdrawal/withdrawalScreen.dart'; import 'package:tanami_app/features/biometric/presentation/pages/biometric_screen.dart'; import 'package:tanami_app/features/changePassword/presentation/pages/change_password_screen.dart'; @@ -165,6 +168,27 @@ final goRouter = GoRouter( type: state.pathParameters["type"]!, ); }), + GoRoute( + name: RouteName.withdrawalScreen, + path: RouteName.withdrawalScreen, + builder: (context, state) { + return const WithdrawalScreen(); + }, + ), + GoRoute( + name: RouteName.withdrawalPreview, + path: RouteName.withdrawalPreview, + builder: (context, state) { + return const WithdrawalPreview(); + }, + ), + GoRoute( + name: RouteName.withdrawalConfirmation, + path: RouteName.withdrawalConfirmation, + builder: (context, state) { + return const WithdrawalConfirmation(); + }, + ), GoRoute( name: RouteName.contactAdminScreen, path: RouteName.contactAdminScreen, diff --git a/lib/features/MainScreens/Wallet/presentation/pages/walletDetails.dart b/lib/features/MainScreens/Wallet/presentation/pages/walletDetails.dart index dd72cd0..4474836 100644 --- a/lib/features/MainScreens/Wallet/presentation/pages/walletDetails.dart +++ b/lib/features/MainScreens/Wallet/presentation/pages/walletDetails.dart @@ -47,74 +47,100 @@ class WalletDetails extends StatelessWidget { ), ), ), - 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 + body: Stack( + children: [ + 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, + child: Padding( + padding: const EdgeInsets.fromLTRB(20.0, 30, 20, 10), + child: Column( + // mainAxisSize: MainAxisSize.min, children: [ - getIcon(type), - SizedBox( - height: 16.h, - ), - Text( - type, - style: GoogleFonts.dmSans( - color: const Color(0xFF191B1E), - fontSize: 14.sp, - fontWeight: FontWeight.w600, - ), + 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: 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, - ), + height: 35.h, ), + _buildBody(), ], ), - SizedBox( - height: 35.h, - ), - _buildBody(), - ], + ), ), ), - ), + // Positioned( + // // bottom: 40, + // top: 400.h, + // // right: 30, + // child: Container( + // height: 20.r, + // decoration: const BoxDecoration( + // shape: BoxShape.circle, + // color: Colors.red, + // ), + // ), + // ), + // Align( + // alignment: Alignment.centerLeft, + // child: Container( + // height: 20.r, + // decoration: const BoxDecoration( + // shape: BoxShape.circle, + // color: Colors.red, + // ), + // ), + // ) + ], ), ); } @@ -218,7 +244,7 @@ class WalletDetails extends StatelessWidget { } return Expanded( child: ListView.builder( - physics: NeverScrollableScrollPhysics(), + physics: const NeverScrollableScrollPhysics(), shrinkWrap: true, itemCount: entries.length, itemBuilder: (context, index) { diff --git a/lib/features/MainScreens/Wallet/presentation/pages/walletScreen.dart b/lib/features/MainScreens/Wallet/presentation/pages/walletScreen.dart index bd92cac..7c0ae5d 100644 --- a/lib/features/MainScreens/Wallet/presentation/pages/walletScreen.dart +++ b/lib/features/MainScreens/Wallet/presentation/pages/walletScreen.dart @@ -1,5 +1,4 @@ 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'; @@ -151,31 +150,36 @@ class _WalletScreenState extends State { color: Colors.black, width: 20.0, ), - Column( - mainAxisSize: MainAxisSize.min, - children: [ - Container( - decoration: const BoxDecoration( - shape: BoxShape.circle, - color: Colors.black, - ), - child: Padding( - padding: const EdgeInsets.all(8.0), - child: Image.asset( - 'assets/images/wallet_screen/withdraw.png', - height: 20.h, + GestureDetector( + onTap: () { + goRouter.pushNamed(RouteName.withdrawalScreen); + }, + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Container( + decoration: const BoxDecoration( + shape: BoxShape.circle, + color: Colors.black, + ), + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Image.asset( + 'assets/images/wallet_screen/withdraw.png', + height: 20.h, + ), ), ), - ), - Text( - 'Withdraw', - style: GoogleFonts.dmSans( - color: const Color(0xFF363636), - fontSize: 12.sp, - fontWeight: FontWeight.w700, + Text( + 'Withdraw', + style: GoogleFonts.dmSans( + color: const Color(0xFF363636), + fontSize: 12.sp, + fontWeight: FontWeight.w700, + ), ), - ), - ], + ], + ), ), ], ), diff --git a/lib/features/MainScreens/Wallet/presentation/pages/withdrawal/confirmation.dart b/lib/features/MainScreens/Wallet/presentation/pages/withdrawal/confirmation.dart new file mode 100644 index 0000000..d7738b7 --- /dev/null +++ b/lib/features/MainScreens/Wallet/presentation/pages/withdrawal/confirmation.dart @@ -0,0 +1,267 @@ +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'; + +class WithdrawalConfirmation extends StatefulWidget { + const WithdrawalConfirmation({super.key}); + + @override + State createState() => _WithdrawalConfirmationState(); +} + +class _WithdrawalConfirmationState extends State { + final Map data = { + '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', + }; + + @override + Widget build(BuildContext context) { + final List> entries = data.entries.toList(); + + return Scaffold( + backgroundColor: Colors.white, + appBar: AppBar( + automaticallyImplyLeading: false, + backgroundColor: Colors.white, + elevation: 0, + scrolledUnderElevation: 0.0, + centerTitle: true, + title: Text( + 'Withdrawal confirmation', + style: GoogleFonts.dmSans( + color: const Color(0xFF272727), + fontSize: 20.sp, + fontWeight: FontWeight.w700, + ), + ), + actions: [ + IconButton( + onPressed: () { + goRouter.goNamed(RouteName.mainScreen); + }, + icon: const Icon( + Icons.close_sharp, + ), + ), + ], + ), + body: SingleChildScrollView( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Padding( + padding: const EdgeInsets.fromLTRB(18.0, 10, 18.0, 0), + child: Row( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Image.asset( + 'assets/images/wallet_screen/done.png', + height: 25.h, + ), + SizedBox( + width: 10.w, + ), + SizedBox( + width: 320.w, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Please confirm the withdrawal amount and verify the accuracy of your bank details.', + style: GoogleFonts.dmSans( + color: const Color(0xFF015698), + fontSize: 14.sp, + fontWeight: FontWeight.w700, + ), + ), + SizedBox( + height: 4.h, + ), + Text( + 'Processing times vary from 3-7 working days', + style: GoogleFonts.dmSans( + color: const Color(0xFF015698), + fontSize: 12.sp, + fontWeight: FontWeight.w500, + ), + ), + ], + ), + ), + ], + ), + ), + SizedBox( + height: 20.h, + ), + Padding( + padding: const EdgeInsets.symmetric(horizontal: 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), + ), + ], + ), + child: Padding( + padding: const EdgeInsets.fromLTRB(20.0, 30, 20, 10), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + 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, + ), + ), + ), + SizedBox( + height: 16.h, + ), + Text( + 'Withdrawal', + 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 1000', + style: GoogleFonts.dmSans( + color: const Color(0xFF191B1E), + fontSize: 20.sp, + fontWeight: FontWeight.w900, + ), + ), + ], + ), + SizedBox( + height: 35.h, + ), + ListView.builder( + physics: const NeverScrollableScrollPhysics(), + shrinkWrap: true, + itemCount: entries.length, + itemBuilder: (context, index) { + return Column( + children: [ + Padding( + padding: + const EdgeInsets.symmetric(vertical: 12.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: 175.w, + child: Text( + entries[index].value, + textAlign: TextAlign.end, + style: GoogleFonts.dmSans( + color: const Color(0xFF191B1E), + fontSize: 14.sp, + fontWeight: FontWeight.w600, + ), + ), + ), + ], + ), + ), + (index != entries.length - 1) + ? Divider() + : Container() + ], + ); + }, + ), + ], + ), + ), + ), + ), + SizedBox( + height: 10.h, + ), + ], + ), + ), + bottomNavigationBar: GestureDetector( + onTap: () { + goRouter.goNamed(RouteName.mainScreen); + }, + child: Container( + margin: const EdgeInsets.all(12.0), + height: 56.h, + width: double.infinity, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(22.r), + color: const Color(0xFF004717), + ), + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 20.0), + child: Center( + child: Text( + 'Close', + style: GoogleFonts.dmSans( + color: Colors.white, + fontSize: 14.sp, + fontWeight: FontWeight.w700, + ), + ), + ), + ), + ), + ), + ); + } +} diff --git a/lib/features/MainScreens/Wallet/presentation/pages/withdrawal/preview.dart b/lib/features/MainScreens/Wallet/presentation/pages/withdrawal/preview.dart new file mode 100644 index 0000000..a2bdc66 --- /dev/null +++ b/lib/features/MainScreens/Wallet/presentation/pages/withdrawal/preview.dart @@ -0,0 +1,343 @@ +import 'package:flutter/material.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'; + +class WithdrawalPreview extends StatefulWidget { + const WithdrawalPreview({super.key}); + + @override + State createState() => _WithdrawalPreviewState(); +} + +class _WithdrawalPreviewState extends State { + @override + Widget build(BuildContext context) { + List titles = [ + 'Account Holder Name/Beneficiary Name', + 'IBAN', + 'Beneficiary Address', + 'Bank Name', + 'Branch Address', + 'SWIFT/BIC Code', + ]; + List values = [ + 'Name Surname', + 'DE 1234 5678 9012 3456', + 'Hohenzollernring 58, 95444', + 'Name Bank', + 'Hohenzollernring 58, 95444', + 'BC12345', + ]; + return Scaffold( + backgroundColor: Colors.white, + appBar: AppBar( + backgroundColor: Colors.white, + elevation: 0, + scrolledUnderElevation: 0.0, + centerTitle: true, + title: Text( + 'Withdrawal confirmation', + style: GoogleFonts.dmSans( + color: const Color(0xFF272727), + fontSize: 20.sp, + fontWeight: FontWeight.w700, + ), + ), + ), + body: SingleChildScrollView( + child: Padding( + padding: const EdgeInsets.all(18.0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Image.asset( + 'assets/images/wallet_screen/info.png', + height: 25.h, + ), + SizedBox( + width: 10.w, + ), + SizedBox( + width: 320.w, + child: Text( + 'Please confirm the withdrawal amount and verify the accuracy of your bank details.', + style: GoogleFonts.dmSans( + color: const Color(0xFF015698), + fontSize: 12.sp, + fontWeight: FontWeight.w500, + ), + ), + ), + ], + ), + SizedBox( + height: 20.h, + ), + RichText( + text: TextSpan( + children: [ + TextSpan( + text: 'Wallet Balance: ', + style: GoogleFonts.dmSans( + color: const Color(0xFF888888), + fontSize: 12.sp, + fontWeight: FontWeight.w700, + ), + ), + TextSpan( + text: 'SAR 178,000 ', + style: GoogleFonts.dmSans( + color: const Color(0xFF191B1E), + fontSize: 14.sp, + fontWeight: FontWeight.w700, + ), + ), + ], + ), + ), + SizedBox( + height: 20.h, + ), + 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, 5), + ), + ], + ), + child: Column( + children: [ + Padding( + padding: const EdgeInsets.all(12.0), + child: Row( + children: [ + Container( + decoration: const BoxDecoration( + shape: BoxShape.circle, + color: Color(0xFFE6681F)), + child: Padding( + padding: const EdgeInsets.all(12.0), + child: Image.asset( + 'assets/images/wallet_screen/withdraw_list.png', + height: 36.h, + ), + ), + ), + SizedBox( + width: 12.w, + ), + Text( + 'Withdrawal', + style: GoogleFonts.dmSans( + color: Colors.black, + fontSize: 17.sp, + fontWeight: FontWeight.w700, + ), + ), + ], + ), + ), + Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.only( + bottomLeft: Radius.circular(22.r), + bottomRight: Radius.circular(22.r), + ), + color: const Color(0xFFD8D8D8).withOpacity(0.4), + ), + child: Padding( + padding: const EdgeInsets.symmetric( + vertical: 16.0, horizontal: 12.0), + child: Row( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + 'Total Withdrawal amount:', + style: GoogleFonts.dmSans( + color: const Color(0xFF535353), + fontSize: 14.sp, + fontWeight: FontWeight.w500, + ), + ), + Text( + 'SAR 1000', + style: GoogleFonts.dmSans( + color: Colors.black, + fontSize: 14.sp, + fontWeight: FontWeight.w700, + ), + ), + ], + ), + ), + ), + ], + ), + ), + SizedBox( + height: 20.h, + ), + Container( + width: double.infinity, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(22.r), + color: const Color(0xFFEEF6FB), + border: Border.all(color: const Color(0xFF90D4FF)), + boxShadow: const [ + BoxShadow( + color: Color(0xFFB0D3EF), + spreadRadius: 1, + blurRadius: 10, + offset: Offset(0, 3), + ), + ], + ), + child: Padding( + padding: const EdgeInsets.symmetric( + vertical: 12.0, horizontal: 16.0), + child: Row( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Image.asset( + 'assets/images/wallet_screen/info.png', + height: 25.h, + ), + SizedBox( + width: 10.w, + ), + Text( + 'Payment can include transfer fee from your bank', + style: GoogleFonts.dmSans( + color: const Color(0xFF015698), + fontSize: 12.sp, + fontWeight: FontWeight.w500, + ), + ), + ], + ), + ), + ), + SizedBox( + height: 20.h, + ), + Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Withdrawal details', + style: GoogleFonts.dmSans( + color: Colors.black, + fontSize: 15.sp, + fontWeight: FontWeight.w700, + ), + ), + SizedBox( + height: 10.h, + ), + const Divider( + color: Color(0xFFE3E3E3), + ), + SizedBox( + height: 10.h, + ), + ListView.builder( + physics: const NeverScrollableScrollPhysics(), + itemCount: titles.length, + shrinkWrap: true, + itemBuilder: (context, index) { + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + titles[index], + style: GoogleFonts.dmSans( + color: Colors.black, + fontSize: 14.sp, + fontWeight: FontWeight.w700, + ), + ), + SizedBox( + height: 8.h, + ), + Text( + values[index], + style: GoogleFonts.dmSans( + color: const Color(0xFF191B1E), + fontSize: 14.sp, + fontWeight: FontWeight.w400, + ), + ), + (index != titles.length - 1) + ? Column( + children: [ + SizedBox( + height: 10.h, + ), + const Divider( + color: Color(0xFFE3E3E3), + ), + SizedBox( + height: 10.h, + ), + ], + ) + : SizedBox( + height: 10.h, + ), + ], + ); + }, + ) + ], + ), + ], + ), + ), + ), + bottomNavigationBar: GestureDetector( + onTap: () { + goRouter.pushNamed(RouteName.otpScreen, pathParameters: { + "fromScreen": 'withdrawal', + }); + }, + child: Container( + margin: const EdgeInsets.all(12.0), + height: 56.h, + width: double.infinity, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(22.r), + color: const Color(0xFF004717), + ), + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 20.0), + child: Center( + child: Text( + 'Submit request', + style: GoogleFonts.dmSans( + color: Colors.white, + fontSize: 14.sp, + fontWeight: FontWeight.w700, + ), + ), + ), + ), + ), + ), + ); + } +} diff --git a/lib/features/MainScreens/Wallet/presentation/pages/withdrawal/withdrawalScreen.dart b/lib/features/MainScreens/Wallet/presentation/pages/withdrawal/withdrawalScreen.dart new file mode 100644 index 0000000..aafc040 --- /dev/null +++ b/lib/features/MainScreens/Wallet/presentation/pages/withdrawal/withdrawalScreen.dart @@ -0,0 +1,435 @@ +import 'package:flutter/material.dart'; +import 'package:flutter/services.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'; + +class WithdrawalScreen extends StatefulWidget { + const WithdrawalScreen({super.key}); + + @override + State createState() => _WithdrawalScreenState(); +} + +class _WithdrawalScreenState extends State { + @override + Widget build(BuildContext context) { + List titles = [ + 'Account Holder Name/Beneficiary Name *', + 'IBAN *', + 'Beneficiary Address', + 'Bank Name', + 'Branch Address', + 'SWIFT/BIC Code', + ]; + return Scaffold( + backgroundColor: Colors.white, + appBar: AppBar( + backgroundColor: Colors.white, + elevation: 0, + scrolledUnderElevation: 0.0, + centerTitle: true, + title: Text( + 'Enter bank details', + style: GoogleFonts.dmSans( + color: const Color(0xFF272727), + fontSize: 20.sp, + fontWeight: FontWeight.w700, + ), + ), + ), + body: SingleChildScrollView( + child: Padding( + padding: const EdgeInsets.all(18.0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + RichText( + text: TextSpan( + children: [ + TextSpan( + text: 'Wallet Balance: ', + style: GoogleFonts.dmSans( + color: const Color(0xFF888888), + fontSize: 12.sp, + fontWeight: FontWeight.w700, + ), + ), + TextSpan( + text: 'SAR 178,000 ', + style: GoogleFonts.dmSans( + color: const Color(0xFF191B1E), + fontSize: 14.sp, + fontWeight: FontWeight.w700, + ), + ), + ], + ), + ), + SizedBox( + height: 20.h, + ), + 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, 5), + ), + ], + ), + child: Column( + children: [ + Padding( + padding: const EdgeInsets.all(12.0), + child: Row( + children: [ + Container( + decoration: const BoxDecoration( + shape: BoxShape.circle, + color: Color(0xFFE6681F)), + child: Padding( + padding: const EdgeInsets.all(12.0), + child: Image.asset( + 'assets/images/wallet_screen/withdraw_list.png', + height: 36.h, + ), + ), + ), + SizedBox( + width: 12.w, + ), + Text( + 'Withdrawal', + style: GoogleFonts.dmSans( + color: Colors.black, + fontSize: 17.sp, + fontWeight: FontWeight.w700, + ), + ), + ], + ), + ), + Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.only( + bottomLeft: Radius.circular(22.r), + bottomRight: Radius.circular(22.r), + ), + color: Color(0xFFD8D8D8).withOpacity(0.4), + ), + child: Padding( + padding: const EdgeInsets.symmetric( + vertical: 16.0, horizontal: 12.0), + child: Row( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Text( + 'SAR', + style: GoogleFonts.dmSans( + color: const Color(0xFF363636), + fontSize: 15.sp, + fontWeight: FontWeight.w700, + ), + ), + SizedBox( + width: 12.w, + ), + SizedBox( + width: 280.w, + child: TextFormField( + cursorColor: Colors.black, + keyboardType: TextInputType.number, + textAlign: TextAlign.center, + style: GoogleFonts.dmSans( + color: Colors.black, + fontSize: 16.sp, + fontWeight: FontWeight.w400, + ), + decoration: InputDecoration( + hintText: '1000', + hintStyle: GoogleFonts.dmSans( + color: const Color(0xFFC6C6C6), + fontSize: 16.sp, + fontWeight: FontWeight.w400, + ), + labelStyle: + const TextStyle(color: Colors.black), + contentPadding: const EdgeInsets.symmetric( + vertical: 15, horizontal: 10), + filled: true, + fillColor: Colors.white, + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(12), + borderSide: const BorderSide( + color: Colors.white, width: 1), + ), + enabledBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(12), + borderSide: const BorderSide( + color: Colors.white, width: 1), + ), + disabledBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(12), + borderSide: const BorderSide( + color: Colors.white, width: 1), + ), + focusedBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(12), + borderSide: const BorderSide( + color: Colors.white, width: 1), + ), + errorBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(12), + borderSide: const BorderSide( + color: Colors.red, width: 1), + ), + focusedErrorBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(12), + borderSide: const BorderSide( + color: Colors.red, width: 1), + ), + ), + inputFormatters: [ + FilteringTextInputFormatter.deny( + RegExp(r'\s')), + LengthLimitingTextInputFormatter(20), + ], + ), + ), + ], + ), + ), + ), + ], + ), + ), + SizedBox( + height: 20.h, + ), + Container( + width: double.infinity, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(22.r), + color: const Color(0xFFEEF6FB), + border: Border.all(color: const Color(0xFF90D4FF)), + boxShadow: const [ + BoxShadow( + color: Color(0xFFB0D3EF), + spreadRadius: 1, + blurRadius: 10, + offset: Offset(0, 3), + ), + ], + ), + child: Padding( + padding: const EdgeInsets.symmetric( + vertical: 12.0, horizontal: 16.0), + child: Row( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Image.asset( + 'assets/images/wallet_screen/info.png', + height: 25.h, + ), + SizedBox( + width: 10.w, + ), + Text( + 'Payment can include transfer fee from your bank', + style: GoogleFonts.dmSans( + color: const Color(0xFF015698), + fontSize: 12.sp, + fontWeight: FontWeight.w500, + ), + ), + ], + ), + ), + ), + SizedBox( + height: 20.h, + ), + Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(22.r), + color: const Color(0xFFF4F4F4), + boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(0.15), + spreadRadius: 2, + blurRadius: 10, + offset: const Offset(0, 5), + ), + ], + ), + child: Padding( + padding: const EdgeInsets.fromLTRB(20, 22, 20, 0), + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Withdrawal details', + style: GoogleFonts.dmSans( + color: Colors.black, + fontSize: 15.sp, + fontWeight: FontWeight.w700, + ), + ), + SizedBox( + height: 3.h, + ), + Text( + 'Fields with * are required', + style: GoogleFonts.dmSans( + color: const Color(0xFF8D8D8D), + fontSize: 14.sp, + fontWeight: FontWeight.w500, + ), + ), + ], + ), + SizedBox( + height: 10.h, + ), + const Divider( + color: Colors.grey, + ), + SizedBox( + height: 10.h, + ), + ListView.builder( + physics: const NeverScrollableScrollPhysics(), + itemCount: titles.length, + shrinkWrap: true, + itemBuilder: (context, index) { + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + titles[index], + style: GoogleFonts.dmSans( + color: Colors.black, + fontSize: 14.sp, + fontWeight: FontWeight.w700, + ), + ), + SizedBox( + height: 8.h, + ), + SizedBox( + width: double.infinity, + child: TextFormField( + cursorColor: Colors.black, + style: GoogleFonts.dmSans( + color: Colors.black, + fontSize: 16.sp, + fontWeight: FontWeight.w400, + ), + decoration: InputDecoration( + hintText: 'Value', + hintStyle: GoogleFonts.dmSans( + color: const Color(0xFFC6C6C6), + fontSize: 16.sp, + fontWeight: FontWeight.w400, + ), + labelStyle: + const TextStyle(color: Colors.black), + contentPadding: const EdgeInsets.symmetric( + vertical: 15, horizontal: 10), + filled: true, + fillColor: Colors.white, + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(12), + borderSide: const BorderSide( + color: Colors.white, width: 1), + ), + enabledBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(12), + borderSide: const BorderSide( + color: Colors.white, width: 1), + ), + disabledBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(12), + borderSide: const BorderSide( + color: Colors.white, width: 1), + ), + focusedBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(12), + borderSide: const BorderSide( + color: Colors.white, width: 1), + ), + errorBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(12), + borderSide: const BorderSide( + color: Colors.red, width: 1), + ), + focusedErrorBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(12), + borderSide: const BorderSide( + color: Colors.red, width: 1), + ), + ), + inputFormatters: [ + FilteringTextInputFormatter.deny( + RegExp(r'\s')), + LengthLimitingTextInputFormatter(20), + ], + ), + ), + SizedBox( + height: 22.h, + ), + ], + ); + }, + ) + ], + ), + ), + ), + ], + ), + ), + ), + bottomNavigationBar: GestureDetector( + onTap: () { + goRouter.pushNamed(RouteName.withdrawalPreview); + }, + child: Container( + margin: const EdgeInsets.all(12.0), + height: 56.h, + width: double.infinity, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(22.r), + color: const Color(0xFF004717), + ), + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 20.0), + child: Center( + child: Text( + 'Next', + style: GoogleFonts.dmSans( + color: Colors.white, + fontSize: 14.sp, + fontWeight: FontWeight.w700, + ), + ), + ), + ), + ), + ), + ); + } +} diff --git a/lib/features/changePassword/presentation/pages/change_password_layout.dart b/lib/features/changePassword/presentation/pages/change_password_layout.dart index 0445e8d..3f4345d 100644 --- a/lib/features/changePassword/presentation/pages/change_password_layout.dart +++ b/lib/features/changePassword/presentation/pages/change_password_layout.dart @@ -11,13 +11,14 @@ class ChangePasswordLayout extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( - body: ListView( - children: const [ - RestorePasswordTopSection(), - RestorePasswordForm(), - Gap(150), - RestorePasswordBottomSection(), - ], - )); + body: ListView( + children: const [ + RestorePasswordTopSection(), + RestorePasswordForm(), + Gap(150), + RestorePasswordBottomSection(), + ], + ), + ); } } diff --git a/lib/features/otpVerification/presentation/pages/otp_layout.dart b/lib/features/otpVerification/presentation/pages/otp_layout.dart index 7bd3166..b51cc16 100644 --- a/lib/features/otpVerification/presentation/pages/otp_layout.dart +++ b/lib/features/otpVerification/presentation/pages/otp_layout.dart @@ -14,14 +14,15 @@ class OtpLayout extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( - body: ListView( - children: [ - const OtpTopSection(), - OtpFillSection( - fromScreen: fromScreen, - ), - const ResendOtpSection(), - ], - )); + body: ListView( + children: [ + const OtpTopSection(), + OtpFillSection( + fromScreen: fromScreen, + ), + const ResendOtpSection(), + ], + ), + ); } } diff --git a/lib/features/otpVerification/presentation/widgets/otp_fill_section.dart b/lib/features/otpVerification/presentation/widgets/otp_fill_section.dart index 07cdf96..334dfd0 100644 --- a/lib/features/otpVerification/presentation/widgets/otp_fill_section.dart +++ b/lib/features/otpVerification/presentation/widgets/otp_fill_section.dart @@ -33,9 +33,13 @@ class OtpFillSection extends StatelessWidget { AppText.otpVerifiedSucessfully, ); - fromScreen == "forgot-password" - ? goRouter.pushNamed(RouteName.forgotPasswordScreen) - : goRouter.pushNamed(RouteName.registerUserDetailsScreen); + if (fromScreen == "forgot-password") { + goRouter.pushNamed(RouteName.forgotPasswordScreen); + } else if (fromScreen == "withdrawal") { + goRouter.pushNamed(RouteName.withdrawalConfirmation); + } else { + goRouter.pushNamed(RouteName.registerUserDetailsScreen); + } } else if (state is OtpSubmissionFailure) { goRouter.pop(); errorToastMessage(