diff --git a/assets/images/wallet_screen/deposit_list.png b/assets/images/wallet_screen/deposit_list.png new file mode 100644 index 0000000..86bcafe Binary files /dev/null and b/assets/images/wallet_screen/deposit_list.png differ diff --git a/assets/images/wallet_screen/invest_list.png b/assets/images/wallet_screen/invest_list.png new file mode 100644 index 0000000..408de4d Binary files /dev/null and b/assets/images/wallet_screen/invest_list.png differ diff --git a/assets/images/wallet_screen/refund_list.png b/assets/images/wallet_screen/refund_list.png new file mode 100644 index 0000000..1e8cd4b Binary files /dev/null and b/assets/images/wallet_screen/refund_list.png differ diff --git a/assets/images/wallet_screen/withdraw_list.png b/assets/images/wallet_screen/withdraw_list.png new file mode 100644 index 0000000..e232b30 Binary files /dev/null and b/assets/images/wallet_screen/withdraw_list.png differ diff --git a/assets/images/wallet_screen/yield_list.png b/assets/images/wallet_screen/yield_list.png new file mode 100644 index 0000000..ec1a6c0 Binary files /dev/null and b/assets/images/wallet_screen/yield_list.png differ 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/