diff --git a/assets/images/wallet_screen/bg.png b/assets/images/wallet_screen/bg.png new file mode 100644 index 0000000..b62e171 Binary files /dev/null and b/assets/images/wallet_screen/bg.png differ diff --git a/assets/images/wallet_screen/deposit.png b/assets/images/wallet_screen/deposit.png new file mode 100644 index 0000000..2ee209e Binary files /dev/null and b/assets/images/wallet_screen/deposit.png differ diff --git a/assets/images/wallet_screen/withdraw.png b/assets/images/wallet_screen/withdraw.png new file mode 100644 index 0000000..c0cbebc Binary files /dev/null and b/assets/images/wallet_screen/withdraw.png differ diff --git a/lib/core/styles/app_text.dart b/lib/core/styles/app_text.dart index cd0b8e1..17fcef8 100644 --- a/lib/core/styles/app_text.dart +++ b/lib/core/styles/app_text.dart @@ -126,4 +126,7 @@ class AppText { "To restore password please enter phone number"; static const String createNewPasswordText = "Create new password"; static const String submitText = "Submit"; + + //Wallet + static const String walletTitle = "Wallet balance"; } diff --git a/lib/features/MainScreens/Academy/presentation/pages/detailsScreen.dart b/lib/features/MainScreens/Academy/presentation/pages/detailsScreen.dart index 3d28bc4..92072f8 100644 --- a/lib/features/MainScreens/Academy/presentation/pages/detailsScreen.dart +++ b/lib/features/MainScreens/Academy/presentation/pages/detailsScreen.dart @@ -181,7 +181,6 @@ class _AcademyDetailsScreenState extends State { videos[index], fit: BoxFit.cover, height: 160.h, - // alignment: Alignment.topCenter, ), ), ); diff --git a/lib/features/MainScreens/Portfolio/presentation/pages/portfolioScreen.dart b/lib/features/MainScreens/Portfolio/presentation/pages/portfolioScreen.dart new file mode 100644 index 0000000..3f2aebb --- /dev/null +++ b/lib/features/MainScreens/Portfolio/presentation/pages/portfolioScreen.dart @@ -0,0 +1,342 @@ +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'; +import 'package:tanami_app/core/styles/app_text.dart'; + +class PortfolioScreen extends StatefulWidget { + const PortfolioScreen({super.key}); + + @override + State createState() => _PortfolioScreenState(); +} + +class _PortfolioScreenState extends State { + @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) { + var top = constraints.biggest.height; + var percentage = + ((top - kToolbarHeight) / (200.0 - kToolbarHeight)) + .clamp(0.0, 1.0); + var opacity = (1 - percentage).clamp(0.0, 1.0); + return FlexibleSpaceBar( + // centerTitle: true, + titlePadding: + const EdgeInsets.only(left: 30, top: 0, bottom: 15), + title: Opacity( + opacity: opacity, + child: Row( + children: [ + Text( + AppText.portfolio, + style: GoogleFonts.dmSans( + color: const Color(0xFF888888), + fontSize: 12.sp, + fontWeight: FontWeight.w700, + ), + ), + Text( + 'SAR 178,000', + style: GoogleFonts.dmSans( + color: Colors.black, + fontSize: 14.sp, + fontWeight: FontWeight.w700, + ), + ), + ], + ), + ), + background: Stack( + fit: StackFit.expand, + children: [ + Image.asset( + 'assets/images/portfolio_screen/bg.png', // Replace with your image asset + fit: BoxFit.cover, + ), + Padding( + padding: const EdgeInsets.only(left: 40.0), + child: Opacity( + opacity: percentage, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + AppText.portfolio, + style: GoogleFonts.dmSans( + color: const Color(0xFFC9D9CB), + fontSize: 14.sp, + fontWeight: FontWeight.w700, + ), + ), + SizedBox( + height: 8.h, + ), + Text( + 'SAR 178,000', + style: GoogleFonts.dmSans( + color: Colors.white, + fontSize: 28.sp, + fontWeight: FontWeight.w700, + ), + ), + ], + ), + ), + ), + ], + ), + ); + }), + backgroundColor: Colors.white, + ), + SliverList( + delegate: SliverChildBuilderDelegate( + (context, index) => Padding( + padding: const EdgeInsets.all(10.0), + child: GestureDetector( + onTap: () { + goRouter.pushNamed(RouteName.porfolioDetails); + }, + child: Container( + decoration: BoxDecoration( + color: Colors.white, + + borderRadius: const BorderRadius.all(Radius.circular(20.0)), + + boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(0.15), + spreadRadius: 2, + blurRadius: 10, + offset: + const Offset(0, 3), // changes position of shadow + ), + ], + ), + child: Column( + children: [ + Padding( + padding: const EdgeInsets.symmetric( + horizontal: 20.0, vertical: 16.0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + mainAxisAlignment: + MainAxisAlignment.spaceBetween, + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Image.asset( + (index == 2) + ? 'assets/images/portfolio_screen/clock_off.png' + : 'assets/images/portfolio_screen/clock.png', + height: 25.sp, + ), + SizedBox( + width: 5.w, + ), + Text( + 'Mar 01 2024', + style: GoogleFonts.dmSans( + color: const Color(0xFF004717), + fontSize: 12.sp, + fontWeight: FontWeight.w500, + ), + ), + ], + ), + Text( + (index == 2) ? 'Exited' : 'Pending', + style: GoogleFonts.dmSans( + color: (index == 2) + ? const Color(0xFF8D8D8D) + : const Color(0xFF0FA4A4), + fontSize: 14.sp, + fontWeight: FontWeight.w700, + ), + ) + ], + ), + SizedBox( + height: 8.h, + ), + Text( + (index == 2) + ? 'Real Estate III' + : 'Private equity portfolio I', + style: GoogleFonts.dmSans( + color: Colors.black, + fontSize: 17.sp, + fontWeight: FontWeight.w700, + ), + ), + ], + ), + ), + Container( + decoration: const BoxDecoration( + color: Color(0xFFF8F8F8), + borderRadius: BorderRadius.only( + bottomLeft: Radius.circular(20.0), + bottomRight: Radius.circular(20.0), + ), + ), + child: Padding( + padding: const EdgeInsets.symmetric( + horizontal: 20.0, vertical: 16.0), + child: Column( + children: [ + Row( + mainAxisAlignment: + MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + AppText.investmentamount, + style: GoogleFonts.dmSans( + color: (index == 2) + ? const Color(0xFF8D8D8D) + : const Color(0xFF535353), + fontSize: 14.sp, + fontWeight: FontWeight.w500, + ), + ), + Column( + crossAxisAlignment: + CrossAxisAlignment.end, + children: [ + Text( + 'SAR 100,000', + style: GoogleFonts.dmSans( + color: (index == 2) + ? const Color(0xFF8D8D8D) + : Colors.black, + fontSize: 14.sp, + fontWeight: FontWeight.w700, + ), + ), + Text( + ' \$ 26,700', + style: GoogleFonts.dmSans( + color: (index == 2) + ? const Color(0xFF8D8D8D) + : Colors.black, + fontSize: 11.sp, + fontWeight: FontWeight.w400, + ), + ), + ], + ) + ], + ), + SizedBox( + height: 8.h, + ), + Row( + mainAxisAlignment: + MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + AppText.currentval, + style: GoogleFonts.dmSans( + color: (index == 2) + ? const Color(0xFF8D8D8D) + : const Color(0xFF535353), + fontSize: 14.sp, + fontWeight: FontWeight.w500, + ), + ), + Column( + crossAxisAlignment: + CrossAxisAlignment.end, + children: [ + Text( + 'SAR 100,000', + style: GoogleFonts.dmSans( + color: (index == 2) + ? const Color(0xFF8D8D8D) + : Colors.black, + fontSize: 14.sp, + fontWeight: FontWeight.w700, + ), + ), + Text( + ' \$ 26,700', + style: GoogleFonts.dmSans( + color: (index == 2) + ? const Color(0xFF8D8D8D) + : Colors.black, + fontSize: 11.sp, + fontWeight: FontWeight.w400, + ), + ), + ], + ) + ], + ), + SizedBox( + height: 8.h, + ), + Row( + mainAxisAlignment: + MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + AppText.totalreturn, + style: GoogleFonts.dmSans( + color: (index == 2) + ? const Color(0xFF8D8D8D) + : const Color(0xFF535353), + fontSize: 14.sp, + fontWeight: FontWeight.w500, + ), + ), + Text( + (index == 2) ? '- 20.0%' : '+ 20.0%', + style: GoogleFonts.dmSans( + color: (index == 2) + ? const Color(0xFFde9595) + : const Color(0xFF066123), + fontSize: 14.sp, + fontWeight: FontWeight.w700, + ), + ) + ], + ) + ], + ), + ), + ) + ], + ), + ), + ), + ), + childCount: 3, + ), //SliverChildBuildDelegate + ), + ], + ), + ); + } +} diff --git a/lib/features/MainScreens/Wallet/presentation/pages/walletScreen.dart b/lib/features/MainScreens/Wallet/presentation/pages/walletScreen.dart index 1b91cc0..be6b9f8 100644 --- a/lib/features/MainScreens/Wallet/presentation/pages/walletScreen.dart +++ b/lib/features/MainScreens/Wallet/presentation/pages/walletScreen.dart @@ -1,4 +1,8 @@ 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/styles/app_text.dart'; class WalletScreen extends StatefulWidget { const WalletScreen({super.key}); @@ -10,8 +14,150 @@ class WalletScreen extends StatefulWidget { class _WalletScreenState extends State { @override Widget build(BuildContext context) { - return const Scaffold( - body: Text('Wallet'), + + 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, + ), + 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: Row( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + Column( + 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/deposit.png', + height: 20.h, + ), + ), + ), + Text( + 'Deposit', + style: GoogleFonts.dmSans( + color: const Color(0xFF363636), + fontSize: 12.sp, + fontWeight: FontWeight.w700, + ), + ), + ], + ), + VerticalDivider( + color: Colors.black, + width: 20.0, + ), + Column( + 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, + ), + ), + ], + ), + ], + ), + ), + ), + ) + ], + ), + ), + ), + ], + ), + ); } } diff --git a/pubspec.yaml b/pubspec.yaml index ab87649..dedb1bd 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -103,6 +103,7 @@ flutter: - assets/images/bottom_bar/inactive/ - assets/images/portfolio_screen/ - assets/images/academy_screen/ + - assets/images/wallet_screen/ - assets/images/biometric_screen/ - assets/images/biometric_screen/png/ - assets/images/biometric_screen/svg/