diff --git a/lib/core/routes/routes.dart b/lib/core/routes/routes.dart index 9494d55..35acb65 100644 --- a/lib/core/routes/routes.dart +++ b/lib/core/routes/routes.dart @@ -9,8 +9,8 @@ import 'package:tanami_app/features/MainScreens/Invest/presentation/pages/paymen import 'package:tanami_app/features/MainScreens/Portfolio/presentation/pages/portfolio_details_screen.dart'; import 'package:tanami_app/features/MainScreens/Wallet/presentation/pages/deposit/depositScreen.dart'; import 'package:tanami_app/features/MainScreens/Wallet/presentation/pages/deposit/preview.dart'; -import 'package:tanami_app/features/MainScreens/Wallet/presentation/pages/filterScreen.dart'; -import 'package:tanami_app/features/MainScreens/Wallet/presentation/pages/walletDetails.dart'; +import 'package:tanami_app/features/MainScreens/Wallet/presentation/pages/filter_screen.dart'; +import 'package:tanami_app/features/MainScreens/Wallet/presentation/pages/wallet_details_screen.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'; @@ -169,7 +169,7 @@ final goRouter = GoRouter( name: RouteName.walletDetails, path: "${RouteName.walletDetails}/:type", builder: (context, state) { - return WalletDetails( + return WalletDetailsScreen( type: state.pathParameters["type"]!, ); }), diff --git a/lib/core/styles/app_color.dart b/lib/core/styles/app_color.dart index 6e0cf78..0392b4c 100644 --- a/lib/core/styles/app_color.dart +++ b/lib/core/styles/app_color.dart @@ -92,4 +92,13 @@ class AppColor { static const Color investKycBoxShadow2Color = Color(0xA0DAF0FF); static const Color investTextColor = Color(0xFF066123); static const Color investPaymentTextColor = Color(0xFF535353); + + //Wallet Color + static const Color onHoldTextColor = Color(0xFF0172CB); + + static const Color depositListIconColor = Color(0xFF0FA4A4); + static const Color withdrawalListIconColor = Color(0xFFE6681F); + static const Color investmentListIconColor = Color(0xFF0172CB); + static const Color yieldListIconColor = Color(0xFF4C4AEF); + static const Color refundListIconColor = Color(0xFF0E9445); } diff --git a/lib/core/styles/app_images.dart b/lib/core/styles/app_images.dart index 94652c1..a885969 100644 --- a/lib/core/styles/app_images.dart +++ b/lib/core/styles/app_images.dart @@ -118,7 +118,26 @@ class AppImages { 'assets/images/invest_screen/svg/apple_pay.svg'; //No Internet - static const String noInternetImage = 'assets/images/no_internet/png/no_internet.png'; + + //Wallet + static const String walletBg = 'assets/images/wallet_screen/bg.png'; + static const String depositIcon = 'assets/images/wallet_screen/deposit.png'; + static const String withdrawIcon = 'assets/images/wallet_screen/withdraw.png'; + static const String walletSearchIcon = + 'assets/images/wallet_screen/search.png'; + static const String walletFilterIcon = + 'assets/images/wallet_screen/filter.png'; + + static const String depositListIcon = + 'assets/images/wallet_screen/deposit_list.png'; + static const String withdrawalListIcon = + 'assets/images/wallet_screen/withdraw_list.png'; + static const String investmentListIcon = + 'assets/images/wallet_screen/invest_list.png'; + static const String yieldListIcon = + 'assets/images/wallet_screen/yield_list.png'; + static const String refundListIcon = + 'assets/images/wallet_screen/refund_list.png'; } diff --git a/lib/core/styles/app_text.dart b/lib/core/styles/app_text.dart index 0d9f543..28dfc73 100644 --- a/lib/core/styles/app_text.dart +++ b/lib/core/styles/app_text.dart @@ -158,7 +158,7 @@ class AppText { 'Please confirm the withdrawal amount and verify the accuracy of your bank details.'; static const String workingDays = 'Processing times vary from 3-7 working days'; - static const String balance = 'Wallet Balance: '; + static const String balance = 'Wallet Balance'; static const String withdrawTitle = 'Withdrawal'; static const String depositTitle = 'Deposit'; static const String withdrawDetails = 'Withdrawal details'; @@ -294,4 +294,7 @@ class AppText { static const String investmentConfirmationText = "Investment confirmation"; static const String enterAmountText = "Enter Amount"; static const String pleaseEnterAmountText = "Please Enter Amount"; + + //Wallet + static const String withdrawText = 'Withdraw'; } diff --git a/lib/features/MainScreens/Invest/presentation/pages/invest_details_layout.dart b/lib/features/MainScreens/Invest/presentation/pages/invest_details_layout.dart index e8b5af0..9b8d98a 100644 --- a/lib/features/MainScreens/Invest/presentation/pages/invest_details_layout.dart +++ b/lib/features/MainScreens/Invest/presentation/pages/invest_details_layout.dart @@ -14,44 +14,47 @@ class InvestDetailsLayout extends StatelessWidget { @override Widget build(BuildContext context) { - return SingleChildScrollView( - child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 20.0), - child: Column( - children: [ - Container( - decoration: BoxDecoration( - color: AppColor.plainWhite, - borderRadius: const BorderRadius.all(Radius.circular(20.0)), - boxShadow: [ - BoxShadow( - color: AppColor.plainBlack.withOpacity(0.15), - spreadRadius: 2, - blurRadius: 10, - offset: const Offset(0, 3), - ), - ], + return Scaffold( + backgroundColor: AppColor.plainWhite, + body: SingleChildScrollView( + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 20.0), + child: Column( + children: [ + Container( + decoration: BoxDecoration( + color: AppColor.plainWhite, + borderRadius: const BorderRadius.all(Radius.circular(20.0)), + boxShadow: [ + BoxShadow( + color: AppColor.plainBlack.withOpacity(0.15), + spreadRadius: 2, + blurRadius: 10, + offset: const Offset(0, 3), + ), + ], + ), + child: Column( + children: [ + InvestDetailCarouselView(), + const InvestDetailDetailsSection(), + ], + ), ), - child: Column( - children: [ - InvestDetailCarouselView(), - const InvestDetailDetailsSection(), - ], + Gap( + 20.h, ), - ), - Gap( - 20.h, - ), - const KeyInvestmentSection(), - Gap( - 20.h, - ), - const InvestIncludedDocumentsSection(), - Gap( - 20.h, - ), - const InvestVideoSection(), - ], + const KeyInvestmentSection(), + Gap( + 20.h, + ), + const InvestIncludedDocumentsSection(), + Gap( + 20.h, + ), + const InvestVideoSection(), + ], + ), ), ), ); diff --git a/lib/features/MainScreens/Invest/presentation/pages/invest_layout.dart b/lib/features/MainScreens/Invest/presentation/pages/invest_layout.dart index d6e00cf..03a1f31 100644 --- a/lib/features/MainScreens/Invest/presentation/pages/invest_layout.dart +++ b/lib/features/MainScreens/Invest/presentation/pages/invest_layout.dart @@ -21,6 +21,7 @@ class InvestLayout extends StatelessWidget { return DefaultTabController( length: 2, child: Scaffold( + backgroundColor: AppColor.plainWhite, body: Column( children: [ TabBar( diff --git a/lib/features/MainScreens/Invest/presentation/pages/invest_screen.dart b/lib/features/MainScreens/Invest/presentation/pages/invest_screen.dart index 076515d..3724908 100644 --- a/lib/features/MainScreens/Invest/presentation/pages/invest_screen.dart +++ b/lib/features/MainScreens/Invest/presentation/pages/invest_screen.dart @@ -21,7 +21,7 @@ class _InvestScreenState extends State { return Scaffold( backgroundColor: AppColor.plainWhite, appBar: AppBar( - // backgroundColor: Colors.white, + backgroundColor: AppColor.plainWhite, elevation: 0, scrolledUnderElevation: 0, automaticallyImplyLeading: false, diff --git a/lib/features/MainScreens/Wallet/presentation/pages/filterScreen.dart b/lib/features/MainScreens/Wallet/presentation/pages/filter_screen.dart similarity index 99% rename from lib/features/MainScreens/Wallet/presentation/pages/filterScreen.dart rename to lib/features/MainScreens/Wallet/presentation/pages/filter_screen.dart index 63b5dc1..4282c98 100644 --- a/lib/features/MainScreens/Wallet/presentation/pages/filterScreen.dart +++ b/lib/features/MainScreens/Wallet/presentation/pages/filter_screen.dart @@ -1,7 +1,4 @@ -import 'dart:ui'; - import 'package:flutter/material.dart'; -import 'package:flutter/widgets.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:gap/gap.dart'; import 'package:google_fonts/google_fonts.dart'; diff --git a/lib/features/MainScreens/Wallet/presentation/pages/wallet_details_screen.dart b/lib/features/MainScreens/Wallet/presentation/pages/wallet_details_screen.dart new file mode 100644 index 0000000..cdef83c --- /dev/null +++ b/lib/features/MainScreens/Wallet/presentation/pages/wallet_details_screen.dart @@ -0,0 +1,326 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; +import 'package:gap/gap.dart'; +import 'package:google_fonts/google_fonts.dart'; +import 'package:tanami_app/core/routes/routes.dart'; +import 'package:tanami_app/core/styles/app_text.dart'; +import 'package:tanami_app/shared/components/text_widget.dart'; +import 'package:ticket_widget/ticket_widget.dart'; + +import '../../../../../core/styles/app_color.dart'; +import '../../../../../shared/components/button_widget.dart'; +import '../widgets/wallet_list_section.dart'; +import '../widgets/yield_detail_section.dart'; + +class WalletDetailsScreen extends StatelessWidget { + final String type; + WalletDetailsScreen({super.key, required this.type}); + final List titles = [ + AppText.status, + AppText.paymentMethod, + AppText.accountName, + AppText.iban, + AppText.beneficiaryAddress, + AppText.bankName, + AppText.branchAddress, + AppText.SWIFTcode, + AppText.refid, + ]; + final List values = [ + 'On hold', + 'Google/Apple Pay', + 'Name Surname', + 'DE 1234 5678 9012 3456', + 'Hohenzollernring 58, 95444', + 'Name Bank', + 'Hohenzollernring 58, 95444', + 'BC12345', + 'FRYU FHDU 1234', + ]; + + @override + Widget build(BuildContext context) { + return (type == 'confirm-investment') + ? WillPopScope( + onWillPop: () async => false, + child: Scaffold( + backgroundColor: Colors.white, + bottomNavigationBar: Container( + margin: const EdgeInsets.symmetric( + horizontal: 16, + vertical: 15, + ), + width: 1.sw, + height: 60.h, + child: ButtonWidget().elevatedBtn( + txtClr: AppColor.plainWhite, + function: () { + goRouter.pop(); + goRouter.pop(); + goRouter.pop(); + goRouter.pop(); + goRouter.pop(); + }, + text: AppText.closeText, + clr: AppColor.primaryColor2, + ), + ), + appBar: AppBar( + backgroundColor: Colors.white, + elevation: 0, + automaticallyImplyLeading: false, + actions: [ + IconButton( + onPressed: () { + goRouter.pop(); + goRouter.pop(); + goRouter.pop(); + goRouter.pop(); + goRouter.pop(); + }, + icon: const Icon( + Icons.close_sharp, + color: Color(0xFF363636), + ), + ), + ], + scrolledUnderElevation: 0.0, + centerTitle: true, + title: Text( + AppText.investmentConfirmationText, + style: GoogleFonts.dmSans( + color: const Color(0xFF272727), + fontSize: 20.sp, + fontWeight: FontWeight.w700, + ), + ), + ), + body: Padding( + padding: const EdgeInsets.all(18.0), + child: Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(22.r), + color: Colors.transparent, + boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(0.15), + spreadRadius: 2, + blurRadius: 10, + offset: + const Offset(0, 8), // changes position of shadow + ), + ], + ), + child: TicketWidget( + height: 1.sh, + isCornerRounded: true, + width: double.infinity, + color: AppColor.plainWhite, + child: Padding( + padding: const EdgeInsets.fromLTRB(20.0, 30, 20, 10), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + getIcon(type), + Gap(16.h), + TextWidget().text14W600(AppText.investment, + clr: AppColor.otpTextColor), + Gap(4.h), + TextWidget().text17W700("Name of investment", + clr: AppColor.otpTextColor), + Gap( + 4.h, + ), + TextWidget().text11W500('10/04/2024 22:04', + clr: AppColor.hintTextColor), + Gap( + 16.h, + ), + TextWidget().text20W900('+ SAR 100,000', + clr: AppColor.otpTextColor), + TextWidget().text13W500("+ \$100.00", + clr: AppColor.textLabelColor), + ], + ), + Gap( + 35.h, + ), + _buildBody(), + ], + ), + ), + ), + ), + ), + ), + ) + : Scaffold( + backgroundColor: AppColor.plainWhite, + appBar: AppBar( + backgroundColor: AppColor.plainWhite, + elevation: 0, + scrolledUnderElevation: 0.0, + centerTitle: true, + title: TextWidget().text20W700(AppText.walletDetailsTitle, + clr: AppColor.charcoalColor)), + body: Padding( + padding: const EdgeInsets.all(18.0), + child: Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(22.r), + color: (type == 'Yield' || type == 'Refund') + ? AppColor.plainWhite + : Colors.transparent, + boxShadow: [ + BoxShadow( + color: AppColor.plainBlack.withOpacity(0.15), + spreadRadius: 2, + blurRadius: 10, + offset: const Offset(0, 8), // changes position of shadow + ), + ], + ), + child: (type == 'Yield' || type == 'Refund') + ? YieldDetailSection( + type: type, + ) + : TicketWidget( + height: (type == 'Investment' || + type == "confirm-investment") + ? 320.h + : double.infinity, + isCornerRounded: true, + width: double.infinity, + color: Colors.white, + child: Padding( + padding: const EdgeInsets.fromLTRB(20.0, 30, 20, 10), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + getIcon(type), + Gap(16.h), + TextWidget().text14W600( + type == "confirm-investment" + ? "Investment" + : type, + clr: AppColor.otpTextColor), + Gap(4.h), + (type == "confirm-investment" || + type == 'Investment') + ? TextWidget().text17W700( + "Name of investment", + clr: AppColor.otpTextColor) + : const SizedBox(), + Gap(4.h), + TextWidget().text11W500('10/04/2024 22:04', + clr: AppColor.hintTextColor), + Gap(16.h), + TextWidget().text20W900('+ SAR 100,000', + clr: AppColor.otpTextColor), + (type == "confirm-investment" || + type == 'Investment') + ? TextWidget().text12W500("+ \$100.00", + clr: AppColor.textLabelColor) + : const SizedBox(), + ], + ), + Gap(35.h), + _buildBody(), + ], + ), + ), + ), + ), + ), + ); + } + + Widget _buildBody() { + if (type == 'Yield') { + return const SizedBox(); + } else if (type == 'Refund') { + return const SizedBox(); + } else if (type == 'Investment' || type == "confirm-investment") { + return Container( + width: double.infinity, + decoration: const BoxDecoration( + border: Border( + bottom: BorderSide( + color: AppColor.plainWhite, + width: 1.0, + ), + ), + ), + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 15.0), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + TextWidget().text14W500( + AppText.paymentMethod, + clr: AppColor.portoflioCardTextColor, + ), + SizedBox( + width: 180.w, + child: TextWidget().text14W600( + 'Google/Apple Pay', + clr: AppColor.otpTextColor, + ), + ), + ], + ), + ), + ); + } else { + return Padding( + padding: const EdgeInsets.symmetric(horizontal: 8.0), + child: ListView.builder( + physics: const NeverScrollableScrollPhysics(), + shrinkWrap: true, + itemCount: titles.length, + itemBuilder: (context, index) { + if (type == 'Deposit' && titles[index] == 'Status') { + return Container(); + } else { + return Container( + width: double.infinity, + decoration: BoxDecoration( + border: Border( + bottom: BorderSide( + color: (index != titles.length - 1) + ? AppColor.plainBlack + : AppColor.plainWhite, + width: 1.0, + ), + ), + ), + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 15.0), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + TextWidget().text14W500(titles[index], + clr: AppColor.portoflioCardTextColor), + Expanded( + child: (titles[index] == 'Status') + ? TextWidget().text14W700(values[index], + clr: AppColor.onHoldTextColor) + : TextWidget().text14W600(values[index], + clr: AppColor.otpTextColor)), + ], + ), + ), + ); + } + }, + ), + ); + } + } +} diff --git a/lib/features/MainScreens/Wallet/presentation/pages/wallet_screen.dart b/lib/features/MainScreens/Wallet/presentation/pages/wallet_screen.dart new file mode 100644 index 0000000..b049d82 --- /dev/null +++ b/lib/features/MainScreens/Wallet/presentation/pages/wallet_screen.dart @@ -0,0 +1,187 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; +import 'package:gap/gap.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_color.dart'; +import 'package:tanami_app/core/styles/app_images.dart'; +import 'package:tanami_app/core/styles/app_text.dart'; +import 'package:tanami_app/shared/components/text_widget.dart'; + +import '../widgets/wallet_list_section.dart'; + +class WalletScreen extends StatelessWidget { + const WalletScreen({super.key}); + + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + appBar: AppBar( + elevation: 0, + scrolledUnderElevation: 0.0, + automaticallyImplyLeading: false, + toolbarHeight: 260.h, + titleSpacing: 22.w, + title: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + TextWidget().text14W700( + AppText.walletTitle, + clr: AppColor.darkGreyColor, + ), + Gap(4.h), + TextWidget().text28W700('SAR 178,000', clr: AppColor.otpTextColor), + Gap(80.h) + ], + ), + flexibleSpace: FlexibleSpaceBar( + background: Stack( + children: [ + Image.asset( + AppImages.walletBg, + fit: BoxFit.fitWidth, + alignment: Alignment.topCenter, + ), + Align( + alignment: Alignment.bottomCenter, + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 20.0), + child: Container( + decoration: BoxDecoration( + color: AppColor.plainWhite.withOpacity(0.8), + borderRadius: + const BorderRadius.all(Radius.circular(20.0)), + ), + child: Padding( + padding: const EdgeInsets.symmetric( + horizontal: 20.0, vertical: 20.0), + child: IntrinsicHeight( + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + GestureDetector( + onTap: () { + goRouter.pushNamed(RouteName.depositScreen); + }, + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Container( + decoration: const BoxDecoration( + shape: BoxShape.circle, + color: AppColor.plainBlack, + ), + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Image.asset( + AppImages.depositIcon, + height: 20.h, + ), + ), + ), + TextWidget().text12W700(AppText.depositTitle, + clr: AppColor.textLabelColor), + ], + ), + ), + const VerticalDivider( + color: AppColor.plainBlack, + width: 20.0, + ), + GestureDetector( + onTap: () { + goRouter.pushNamed(RouteName.withdrawalScreen); + }, + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Container( + decoration: const BoxDecoration( + shape: BoxShape.circle, + color: AppColor.plainBlack, + ), + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Image.asset( + AppImages.withdrawIcon, + height: 20.h, + ), + ), + ), + TextWidget().text12W700(AppText.withdrawText, + clr: AppColor.textLabelColor) + ], + ), + ), + ], + ), + ), + ), + ), + ), + ) + ], + ), + ), + backgroundColor: Colors.transparent, + ), + 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: [ + TextWidget() + .text11W500(AppText.day, clr: AppColor.hintTextColor), + Row( + children: [ + Container( + decoration: const BoxDecoration( + color: AppColor.fillColor, + borderRadius: BorderRadius.all(Radius.circular(12.0)), + ), + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Image.asset( + AppImages.walletSearchIcon, + height: 20.h, + ), + ), + ), + SizedBox( + width: 5.w, + ), + GestureDetector( + onTap: () { + goRouter.pushNamed(RouteName.filterScreen); + }, + child: Container( + decoration: const BoxDecoration( + color: AppColor.fillColor, + borderRadius: BorderRadius.all(Radius.circular(12.0)), + ), + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Image.asset( + AppImages.walletFilterIcon, + height: 20.h, + ), + ), + ), + ), + ], + ), + ], + ), + Gap(10.h), + const WalletListSection(), + ], + ), + ), + ); + } +} diff --git a/lib/features/MainScreens/Wallet/presentation/pages/withdrawal/withdrawalScreen.dart b/lib/features/MainScreens/Wallet/presentation/pages/withdrawal/withdrawalScreen.dart index 6d1e3cb..fbdd381 100644 --- a/lib/features/MainScreens/Wallet/presentation/pages/withdrawal/withdrawalScreen.dart +++ b/lib/features/MainScreens/Wallet/presentation/pages/withdrawal/withdrawalScreen.dart @@ -5,8 +5,11 @@ import 'package:gap/gap.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_color.dart'; import 'package:tanami_app/core/styles/app_text.dart'; +import '../../../../../../shared/components/button_widget.dart'; + class WithdrawalScreen extends StatefulWidget { const WithdrawalScreen({super.key}); @@ -47,25 +50,40 @@ class _WithdrawalScreenState extends State { child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - RichText( - text: TextSpan( + Container( + width: 0.5.sw, + decoration: const BoxDecoration( + border: Border( + bottom: BorderSide(width: 1, color: Colors.grey))), + child: Row( children: [ - TextSpan( - text: AppText.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, + RichText( + text: TextSpan( + children: [ + TextSpan( + text: '${AppText.balance}: ', + style: GoogleFonts.dmSans( + color: Colors.grey, + fontSize: 12.0, + fontWeight: FontWeight.bold, + ), + ), + TextSpan( + text: 'SAR 178,000', + style: GoogleFonts.dmSans( + color: Colors.black, + fontSize: 14.0, + fontWeight: FontWeight.bold, + ), + ), + ], ), ), + const Icon( + Icons.arrow_forward, + color: Colors.grey, + size: 15, + ) ], ), ), diff --git a/lib/features/MainScreens/Wallet/presentation/widgets/wallet_list_section.dart b/lib/features/MainScreens/Wallet/presentation/widgets/wallet_list_section.dart new file mode 100644 index 0000000..2fc1aeb --- /dev/null +++ b/lib/features/MainScreens/Wallet/presentation/widgets/wallet_list_section.dart @@ -0,0 +1,196 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; +import 'package:gap/gap.dart'; + +import '../../../../../core/routes/route_name.dart'; +import '../../../../../core/routes/routes.dart'; +import '../../../../../core/styles/app_color.dart'; +import '../../../../../core/styles/app_images.dart'; +import '../../../../../core/styles/app_text.dart'; +import '../../../../../shared/components/text_widget.dart'; + +class WalletListSection extends StatelessWidget { + const WalletListSection({super.key}); + + @override + Widget build(BuildContext context) { + return 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: AppColor.fillColor, + ), + 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: [ + TextWidget().text14W700( + data[index]['title'], + clr: AppColor.otpTextColor, + ), + Gap(4.h), + (data[index]['subTitle'] != '') + ? Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + TextWidget().text12W400( + data[index]['subTitle'], + clr: AppColor.otpTextColor, + ), + Gap(4.h), + ], + ) + : const SizedBox(), + TextWidget().text11W500(data[index]['dateTime'], + clr: AppColor.hintTextColor) + ], + ), + const Spacer(), + Column( + crossAxisAlignment: CrossAxisAlignment.end, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + (data[index]['onHold']) + ? Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + TextWidget().text14W700(AppText.onHold, + clr: AppColor.onHoldTextColor), + Gap(4.h), + ], + ) + : const SizedBox(), + TextWidget().text14W700(data[index]['value'], + clr: AppColor.otpTextColor), + Gap(4.h), + (data[index]['subValue'] != '') + ? TextWidget().text12W500(data[index]['subValue'], + clr: AppColor.otpTextColor) + : const SizedBox(), + ], + ), + ], + ), + ), + ), + ), + ); + }, + ), + ); + } +} + +Widget getIcon(String title) { + if (title == 'Deposit') { + return Container( + decoration: const BoxDecoration( + shape: BoxShape.circle, color: AppColor.depositListIconColor), + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Image.asset( + AppImages.depositListIcon, + height: 25.h, + ), + ), + ); + } else if (title == 'Withdrawal') { + return Container( + decoration: const BoxDecoration( + shape: BoxShape.circle, color: AppColor.withdrawalListIconColor), + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Image.asset(AppImages.withdrawalListIcon, height: 25.h), + ), + ); + } else if (title == 'Investment') { + return Container( + decoration: const BoxDecoration( + shape: BoxShape.circle, color: AppColor.investmentListIconColor), + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Image.asset(AppImages.investmentListIcon, height: 25.h), + ), + ); + } else if (title == 'Yield') { + return Container( + decoration: const BoxDecoration( + shape: BoxShape.circle, color: AppColor.yieldListIconColor), + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Image.asset(AppImages.yieldListIcon, height: 25.h), + ), + ); + } else { + return Container( + decoration: const BoxDecoration( + shape: BoxShape.circle, color: AppColor.refundListIconColor), + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Image.asset(AppImages.refundListIcon, height: 25.h), + ), + ); + } +} + +List data = [ + { + 'title': AppText.deposit, + 'subTitle': '', + 'dateTime': '10/04/2024 22:04', + 'value': '+ SAR 100,000', + 'subValue': '', + 'onHold': false, + }, + { + 'title': AppText.withdrawal, + 'subTitle': '', + 'dateTime': '10/04/2024 22:04', + 'value': '- SAR 100,000', + 'subValue': '', + 'onHold': true, + }, + { + 'title': AppText.investment, + 'subTitle': 'Name of Investment', + 'dateTime': '10/04/2024 22:04', + 'value': '- SAR 100,000', + 'subValue': '', + 'onHold': false, + }, + { + 'title': AppText.yield, + 'subTitle': 'Name of Investment', + 'dateTime': '10/04/2024 22:04', + 'value': '+ SAR 100,000', + 'subValue': '+ \$100,00', + 'onHold': false, + }, + { + 'title': AppText.refund, + 'subTitle': '', + 'dateTime': '10/04/2024 22:04', + 'value': '- SAR 100,000', + 'subValue': '', + 'onHold': true, + }, +]; diff --git a/lib/features/MainScreens/Wallet/presentation/widgets/yield_detail_section.dart b/lib/features/MainScreens/Wallet/presentation/widgets/yield_detail_section.dart new file mode 100644 index 0000000..eca92db --- /dev/null +++ b/lib/features/MainScreens/Wallet/presentation/widgets/yield_detail_section.dart @@ -0,0 +1,41 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; +import 'package:gap/gap.dart'; + +import '../../../../../core/styles/app_color.dart'; +import '../../../../../shared/components/text_widget.dart'; +import 'wallet_list_section.dart'; + +class YieldDetailSection extends StatelessWidget { + final String type; + const YieldDetailSection({super.key, required this.type}); + + @override + Widget build(BuildContext context) { + return Padding( + padding: const EdgeInsets.fromLTRB(20.0, 30, 20, 10), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + getIcon(type), + Gap(16.h), + TextWidget().text14W600(type, clr: AppColor.otpTextColor), + Gap(4.h), + TextWidget() + .text17W700("Name of investment", clr: AppColor.otpTextColor), + Gap(4.h), + TextWidget() + .text11W500('10/04/2024 22:04', clr: AppColor.hintTextColor), + Gap(16.h), + TextWidget() + .text20W900('+ SAR 100,000', clr: AppColor.otpTextColor), + ], + ), + ], + ), + ); + } +} diff --git a/lib/features/MainScreens/main_screen.dart b/lib/features/MainScreens/main_screen.dart index 5b14c55..1dec790 100644 --- a/lib/features/MainScreens/main_screen.dart +++ b/lib/features/MainScreens/main_screen.dart @@ -4,7 +4,7 @@ import 'package:tanami_app/features/MainScreens/Academy/presentation/pages/acade import 'package:tanami_app/features/MainScreens/Invest/presentation/pages/invest_screen.dart'; import 'package:tanami_app/features/MainScreens/Portfolio/presentation/pages/portfolio_screen.dart'; import 'package:tanami_app/features/MainScreens/Settings/presentation/pages/settings_Screen.dart'; -import 'package:tanami_app/features/MainScreens/Wallet/presentation/pages/walletScreen.dart'; +import 'package:tanami_app/features/MainScreens/Wallet/presentation/pages/wallet_screen.dart'; import 'package:tanami_app/shared/components/common_bottom_navigation.dart'; import '../../shared/components/bloc/bottom_nav_bar/bottom_navigation_bloc.dart'; @@ -39,7 +39,7 @@ class MainScreen extends StatelessWidget { return false; }, child: Scaffold( - backgroundColor: Colors.white, + backgroundColor: const Color.fromARGB(255, 121, 104, 104), body: PageView( controller: pageController, physics: const NeverScrollableScrollPhysics(), diff --git a/lib/shared/components/text_widget.dart b/lib/shared/components/text_widget.dart index 4466725..7e7fb45 100644 --- a/lib/shared/components/text_widget.dart +++ b/lib/shared/components/text_widget.dart @@ -285,6 +285,14 @@ class TextWidget { ); } + Widget text20W900(String text, {Color? clr}) { + return Text(text, + style: GoogleFonts.dmSans( + fontSize: 20, + fontWeight: FontWeight.w900, + color: clr ?? AppColor.plainWhite)); + } + //Text Size 28 Widget text28W700(String text, {Color? clr}) { return Text( diff --git a/pubspec.lock b/pubspec.lock index 0d1282c..dd39c63 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -21,10 +21,10 @@ packages: dependency: transitive description: name: archive - sha256: "6bd38d335f0954f5fad9c79e614604fbf03a0e5b975923dd001b6ea965ef5b4b" + sha256: cb6a278ef2dbb298455e1a713bda08524a175630ec643a242c399c932a0a1f7d url: "https://pub.dev" source: hosted - version: "3.6.0" + version: "3.6.1" args: dependency: transitive description: @@ -341,26 +341,26 @@ packages: dependency: "direct main" description: name: firebase_core - sha256: "4b5100e2dbc3fe72c2d4241a046d3f01457fe11293283a324f5c52575e3406f8" + sha256: "26de145bb9688a90962faec6f838247377b0b0d32cc0abecd9a4e43525fc856c" url: "https://pub.dev" source: hosted - version: "2.31.1" + version: "2.32.0" firebase_core_platform_interface: dependency: transitive description: name: firebase_core_platform_interface - sha256: c437ae5d17e6b5cc7981cf6fd458a5db4d12979905f9aafd1fea930428a9fe63 + sha256: "1003a5a03a61fc9a22ef49f37cbcb9e46c86313a7b2e7029b9390cf8c6fc32cb" url: "https://pub.dev" source: hosted - version: "5.0.0" + version: "5.1.0" firebase_core_web: dependency: transitive description: name: firebase_core_web - sha256: "43d9e951ac52b87ae9cc38ecdcca1e8fa7b52a1dd26a96085ba41ce5108db8e9" + sha256: "6643fe3dbd021e6ccfb751f7882b39df355708afbdeb4130fc50f9305a9d1a3d" url: "https://pub.dev" source: hosted - version: "2.17.0" + version: "2.17.2" fixnum: dependency: transitive description: @@ -378,10 +378,10 @@ packages: dependency: "direct main" description: name: flutter_bloc - sha256: f0ecf6e6eb955193ca60af2d5ca39565a86b8a142452c5b24d96fb477428f4d2 + sha256: b594505eac31a0518bdcb4b5b79573b8d9117b193cc80cc12e17d639b10aa27a url: "https://pub.dev" source: hosted - version: "8.1.5" + version: "8.1.6" flutter_cache_manager: dependency: transitive description: @@ -418,10 +418,10 @@ packages: dependency: "direct main" description: name: flutter_screenutil - sha256: b372c35a772a1dc84142a3b9c5ee89a390834bd258e5e6a450d9b975b985d1c9 + sha256: "8239210dd68bee6b0577aa4a090890342d04a136ce1c81f98ee513fc0ce891de" url: "https://pub.dev" source: hosted - version: "5.9.1" + version: "5.9.3" flutter_secure_storage: dependency: "direct main" description: @@ -516,10 +516,10 @@ packages: dependency: "direct main" description: name: go_router - sha256: "6ad5662b014c06c20fa46ab78715c96b2222a7fe4f87bf77e0289592c2539e86" + sha256: cdae1b9c8bd7efadcef6112e81c903662ef2ce105cbd220a04bbb7c3425b5554 url: "https://pub.dev" source: hosted - version: "14.1.3" + version: "14.2.0" google_fonts: dependency: "direct main" description: @@ -876,18 +876,18 @@ packages: dependency: transitive description: name: permission_handler_android - sha256: "8bb852cd759488893805c3161d0b2b5db55db52f773dbb014420b304055ba2c5" + sha256: b29a799ca03be9f999aa6c39f7de5209482d638e6f857f6b93b0875c618b7e54 url: "https://pub.dev" source: hosted - version: "12.0.6" + version: "12.0.7" permission_handler_apple: dependency: transitive description: name: permission_handler_apple - sha256: e9ad66020b89ff1b63908f247c2c6f931c6e62699b756ef8b3c4569350cd8662 + sha256: e6f6d73b12438ef13e648c4ae56bd106ec60d17e90a59c4545db6781229082a0 url: "https://pub.dev" source: hosted - version: "9.4.4" + version: "9.4.5" permission_handler_html: dependency: transitive description: @@ -932,10 +932,10 @@ packages: dependency: transitive description: name: platform - sha256: "12220bb4b65720483f8fa9450b4332347737cf8213dd2840d8b2c823e47243ec" + sha256: "9b71283fc13df574056616011fb138fd3b793ea47cc509c189a6c3fa5f8a1a65" url: "https://pub.dev" source: hosted - version: "3.1.4" + version: "3.1.5" plugin_platform_interface: dependency: transitive description: @@ -972,10 +972,10 @@ packages: dependency: transitive description: name: pubspec_parse - sha256: c63b2876e58e194e4b0828fcb080ad0e06d051cb607a6be51a9e084f47cb9367 + sha256: c799b721d79eb6ee6fa56f00c04b472dcd44a30d258fac2174a6ec57302678f8 url: "https://pub.dev" source: hosted - version: "1.2.3" + version: "1.3.0" rxdart: dependency: transitive description: @@ -1089,10 +1089,10 @@ packages: dependency: "direct main" description: name: sms_autofill - sha256: "43139a175fb3c57ff103ac4b82f2aa70b6c45cf93539d7974c2556810f355363" + sha256: a851630775fa11ca985d85d8c4e51573c26d9647ab35de151748eb733d4893e8 url: "https://pub.dev" source: hosted - version: "2.3.1" + version: "2.4.0" source_gen: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index 63e69a6..2f98d63 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -83,8 +83,13 @@ dependencies: #Expansion Tile expansion_tile_group: ^1.2.4 + + #Ticket ticket_widget: ^1.0.2 + # #Device Preview + # device_preview: + dev_dependencies: flutter_test: sdk: flutter